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

公開日: : 最終更新日:2014/08/17 Stinger, Wordpress ,

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

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

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

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

おおまかな構造

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

基本の構造

パンくずリスト部分

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

パンくずリスト

パンくずリストって?

サイトのカテゴリー構造をわかりやすく表示してくれるもの。これのおかげで今ホームページのどの位置にいるのかがぱっとわかります。
Stingerにはデフォルトで搭載されているので助かりますね。

記事部分

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

記事部分

記事本文部分

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

記事本文部分

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

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

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

SNSボックス

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

SNSボックス

関連記事部分

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

関連記事

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

関連記事2

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

関連記事3

コメント部分

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

コメント部分

コメント本体

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

コメント部分2

次の記事、前の記事部分

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

次の記事、前の記事部分

あとがき

構造を調べながら書いていて、僕自身とても勉強になりました。
はじめのころはclass,idを探すだけでも一苦労だと思うのでぜひ役立ててください。
【関連】-トップページ編-

間違い等ございましたらコメント欄に連絡ください。
最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

jimon


 これは!と思ったらシェアして頂けると嬉しいです
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 111 follow us in feedly
Loading Facebook Comments ...

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PROFILE

Jimon Profile
Jimon
東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
お問い合わせ

About


おしゃれな小物とiPhone,Macの情報発信ブログ。
管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

PAGE TOP ↑