Stingerのカスタマイズ楽しまれてますか？
テーマをカスタムしていくとき、まず変えたい部分のclassとidを調べると思います。
慣れてきた今でこそ「Developer Tools」からすんなり目的のものを見つけられますが、はじめの頃は大変でした。
また入れ子の階層構造がうまくつかめていないと思ったとおりに変更できなかったりしますよね。
今回はStingerのid,class構造がひと目で分かる早わかり画像を作ったのでご紹介します。
今回はトップページ編です。
【関連】Stingerカスタマイズ！あると嬉しいclass,id構造早見表2 -記事ページ編-
注意:id,classの範囲はわかりやすさのためデフォルメしている場合もあるのでご留意ください。画像が小さくて見えないときはクリックで拡大します。
スポンサーリンク
ざっつりとしたファイル構造
まずざっくりとどの部分がどのファイルで管理されているのか説明します。
Stingerのトップ画面は大きく
の4つで構成されています。大まかな割り振りはこのようになります。
では1箇所ずつ詳しく見て行きましょう。
ヘッダー部分の構造
ヘッダー部分は大きくタイトル部分、画像部分、ナビゲーションバー部分に分かれています。
タイトル部分
タイトル部分は
#headerの中に「#header-in」、さらにその中に「#h-l」が入っています。#h-lはさらに「.sitename」、「.descr」に分岐します。
画像部分
画像部分は「.gazou」、「.gazou-in」、「.headimg」の順に入れ子になっています。
ナビゲーションバー部分
ナビ部分は「.smanone」の中に「#navi-in」が入っています。
記事一覧部分の構造
つづいてhome.phpの部分です。
「#wrap」、「#wrap-in」、「#main」、「.entry」の順で入れ子になっていて「.entry」がひとつの記事を表します。
さらに「.entry」は写真部分の「.sumbox」と本文部分の「.entry-content」に分かれます。
「.entry-content」はさらに「.entry-title-ac」「.blog_info contensbox」「.dami」「.motto」に分かれます。
サイドバー部分
サイドバー部分も「#wrap」、「#wrap-in」の中に「#side」が入っています。
さらにここから一番上の検索窓とその他の部分で分岐していきます。
検索部分
検索窓は「#search」と「#searchform」からできています。
NEW ENTRYや最近の記事のところ
「.kizi02」を大枠に各ブロックが入っています。NEW ENTRYや最近の記事などの見出しはすべて「.menu_underh2」です。
またクラスやidではありませんが、NEW ENTRYの記事部分はひとつひとつの記事が「dl」、サムネイルが「dt」、本文が「dd」に割り当てられています。
フッター部分
フッター部分は「#footer」、「#footer-in」の順で入れ子になっておりさらにその中に「#gadf」「.stinger」「.copy」が入っています。
あとがき
間違いなどありましたらコメント欄に連絡ください。
最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。
