ついにリリースされた「Stinger5」。
レスポンシブ対応ということで心待ちにされていた方も多いのではないでしょうか。
カスタマイズ初心者の方には「どこがどのクラスなんだ？」と困っている方も多いはず。
また、先代Stinger3から構造やclass,id名が大きく変更されているので「変更点が知りたいよ」という方も多い気がします。
そこで今回はStinger5のid,class構造がひと目で分かる早わかり画像を作りました。
今回はトップページ編です。
※今までStinger3を使われていた方はこちらの記事と比較しながら読んで頂くとどこが変わったのかわかりやすいかと思います。
スポンサーリンク
大まかな構造
Stingerのトップページは大きく
の4つで構成されています。各ファイルがどの部分を担っているかは以下のとおりです。
また、Stinger5ではページ全体に「#wrapper」というidが割り当てられています。
では4つの部分を詳しく見ていきましょう。
ヘッダー部分の構造
ヘッダー部分は
からできています。
タイトル部分
タイトル部分は
のようになっています。
画像部分
画像部分は「#gazou」に「#headimg」が入った構造をしています。
ナビゲーション部分
ナビ部分は「.smanone」でできています。
記事一覧部分
つづいてhome.php、itiran.phpが担っている記事一覧の部分。
「#content」→「#contentInner」→「#topnews」の順に入れ子になっています。
また「#topnews」以下(「#topnews」も含めます)でひとつのセクションとなっています。
HTML5の要素のひとつ。
「ここからここまででひとつのまとまりですよ」というように「階層構造のまとまり」を表す場合に用います。
div要素とは別物なので注意してください。
こちらのサイトで詳しく説明されています。
MdN DESiGN INTERACTIVE
ひとつひとつの記事は「dl」で表されています。
「dt」がサムネイル、「dd」がタイトルや説明部分を担っています。
さらに「dd」は日付やカテゴリなどを表す「.blog_info」と抜粋を表す「.smanone」に分かれます。
「.blog_info」の中にはカテゴリ、タグを表す「.pcone」が入っています。
サイドバー部分
サイドバー部分は
という構成になっています。
RSS購読ボタン
RSSボタンは「.rssbox」でできています。
検索ボックス
サイト内検索は「#search」が担っています。
NEW POSTのところ
NEW POST部分の構造は記事一覧とほぼ同じです。
「#kanren」の中の「dl」がひとつの記事、「dt」がサムネイル、「dd」がタイトルと抜粋を担っています。
「NEW POST」の文字には「.menu_underh2」が使われています。
その他の部分
サイドバーの残りの部分が管理画面から編集できる部分です。
全体に「#mybox」が割り当てられており、各要素のタイトルに「.menu_underh2」が使われています。
フッター部分
フッター部分は全体に「#footer」、コピーライトに「.copy」が割り当てられています。
あとがき
この記事がカスタマイズの手助けになったら嬉しいです^^
先代Stinger3に比べてclassやidの数が減った気がします。
レスポンシブなのでカスタマイズの際はPC側とスマホ側両方からの確認を忘れないようにしましょう。
最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。
