Stinger3カスタマイズ！あると嬉しいclass,id構造早見表2 -記事ページ編-

今回は以前書いたStinger構造記事の続編、記事ページ編です。
【関連】Stingerカスタマイズ！あると嬉しいclass,id構造早見表 -トップページ編-

僕もまだまだ初心者ですが、これからカスタマイズをはじめる初心者の方のお役に立てればいいなと思います。
この記事でご紹介するのは「記事ページの本文部分」です。ヘッダーやサイドバー、フッダー部分の構造が知りたい方はトップページ編にまとめてあるのでそちらをご覧ください。

注意:id,classの範囲はわかりやすさのためデフォルメしている場合もあるのでご留意ください。画像が小さくて見えないときはクリックで拡大します。

おおまかな構造

記事ページのコンテンツ部分は「#wrap」、「#wrap-in」、「#main」の順番に入れ子になっています。この構造はStingerの基本になっていて、トップページやアーカイブページなど他のページも同じ構造です。

パンくずリスト部分

ページ左上のパンくずリスト部分は「.kuzu」、「#breadcrumb」、「#itemscope」の順に入れ子になっています。

記事部分

記事部分は全体に「.post」が割り当てられていて、その中で本文や関連記事などのブロックに分岐しています。以下ではこのそれぞれのブロックをさらに詳しく解説していきます。

記事本文部分

まずは記事本文部分。「.kizi」でできています。

記事タイトル、投稿日時・カテゴリー部分

「.kizi」の中で記事のタイトルは「.entry-title」、公開日とカテゴリーは「.blogbox」で表されます。
さらに「.blogbox」の中で日付部分は「.kdate」、その中でも日付部分は「.entry-date」が割り当てられています。「.entry-date」は数字の部分のみを表しているので注意してください。

SNSボックス

記事下のSNSボックスは「.kizi02」でできています。Twitterやfacebookなどの各項目はリストで表されていて、それぞれidやclassが割り当てられています。
各項目のclass,id構造はとても複雑で、公式のものかな？と思えるものもあったので今回は省略します。

関連記事部分

つづいて関連記事部分。ここは個性が出るところですね。構造は大きく「.kizi02」の中に「.kanren」と「.sumbox」が入っていて、「.sumbox」には「#topnews」が入れ子になっています。

「#topnews」内の「dl」がひとつの記事を表していて、「dl」内の「dt」が画像、「dd」がタイトルとや抜粋を表します。

「dd」はさらにタイトル部分の「.saisin」、抜粋の「.basui」、記事を読むの「.motto」に分かれます。

コメント部分

コメント部分はidとクラスが同じ場所に割り当てられていたりと少し特殊です。
「#comments」、「#respondと.comment-respond」の順で階層になっていて、コメント欄のタイトルの「#replu-titleと.comment-reply-title」と本体になる「#commentformと.comment-form」に分かれます。

コメント本体

コメント欄の本体となる部分は項目ごとに「.comment-○○○」、「.form-○○○」と分かれます。さらに入力部分は「#author」のように入れ子の形で別のidが当てられています。
また「この項目必須だよ！」という意味の「*」記号には「.required」が当てられています。

次の記事、前の記事部分

最後に次の記事、前の記事部分。「.p-navi」「.clearfix」が並列で割り当てられていて、その中の「dlが次(前)の記事」のかたまりを表します。
「dl」内の「dt」が○○の記事、「dd」が記事タイトルを表しています。

あとがき

@Jimon_sさんをフォロー