Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編-

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

Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編-

ついにリリースされた「Stinger5」。
レスポンシブ対応ということで心待ちにされていた方も多いのではないでしょうか。

カスタマイズ初心者の方には「どこがどのクラスなんだ?」と困っている方も多いはず。
また、先代Stinger3から構造やclass,id名が大きく変更されているので「変更点が知りたいよ」という方も多い気がします。

そこで今回はStinger5のid,class構造がひと目で分かる早わかり画像を作りました。
今回はトップページ編です。

※今までStinger3を使われていた方はこちらの記事と比較しながら読んで頂くとどこが変わったのかわかりやすいかと思います。

Sponsored Link

大まかな構造

Stingerのトップページは大きく

  • header.php
  • home.php
  • sidebar.php
  • footer.php
  • の4つで構成されています。各ファイルがどの部分を担っているかは以下のとおりです。

    各部分の割り振り

    また、Stinger5ではページ全体に「#wrapper」というidが割り当てられています。

    #wrapper

    では4つの部分を詳しく見ていきましょう。

    ヘッダー部分の構造

    ヘッダー部分は

  • タイトル&説明文
  • 画像
  • ナビゲーション
  • からできています。

    タイトル部分

    タイトル部分は

  • サイト名→「.sitename」
  • 説明文→「.descr」
  • のようになっています。

    サイトタイトル、説明

    画像部分

    画像部分は「#gazou」に「#headimg」が入った構造をしています。

    画像部分

    ナビゲーション部分

    ナビ部分は「.smanone」でできています。

    ナビゲーション

    記事一覧部分

    つづいてhome.php、itiran.phpが担っている記事一覧の部分。
    「#content」→「#contentInner」→「#topnews」の順に入れ子になっています。
    また「#topnews」以下(「#topnews」も含めます)でひとつのセクションとなっています。

    セクション(section)って?

    HTML5の要素のひとつ。
    「ここからここまででひとつのまとまりですよ」というように「階層構造のまとまり」を表す場合に用います。
    div要素とは別物なので注意してください。

    こちらのサイトで詳しく説明されています。
    MdN DESiGN INTERACTIVE

    記事一覧部分

    ひとつひとつの記事は「dl」で表されています。
    「dt」がサムネイル、「dd」がタイトルや説明部分を担っています。

    記事一覧詳細

    さらに「dd」は日付やカテゴリなどを表す「.blog_info」と抜粋を表す「.smanone」に分かれます。
    「.blog_info」の中にはカテゴリ、タグを表す「.pcone」が入っています。

    記事一覧更に詳細

    サイドバー部分

    サイドバー部分は

  • RSS購読ボタン
  • 検索ボックス
  • NEW POST
  • その他の部分
  • という構成になっています。

    RSS購読ボタン

    RSSボタンは「.rssbox」でできています。

    RSSボタン

    検索ボックス

    サイト内検索は「#search」が担っています。

    サイト内検索

    NEW POSTのところ

    NEW POST部分の構造は記事一覧とほぼ同じです。
    「#kanren」の中の「dl」がひとつの記事、「dt」がサムネイル、「dd」がタイトルと抜粋を担っています。
    「NEW POST」の文字には「.menu_underh2」が使われています。

    NEW POSTのところ

    その他の部分

    サイドバーの残りの部分が管理画面から編集できる部分です。
    全体に「#mybox」が割り当てられており、各要素のタイトルに「.menu_underh2」が使われています。

    サイドバーその他

    フッター部分

    フッター部分は全体に「#footer」、コピーライトに「.copy」が割り当てられています。

    フッター部分

    あとがき

    公式サイトにこんなお言葉が。

    ENJIさんのお言葉

    この記事がカスタマイズの手助けになったら嬉しいです^^

    先代Stinger3に比べてclassやidの数が減った気がします。
    レスポンシブなのでカスタマイズの際はPC側とスマホ側両方からの確認を忘れないようにしましょう。

    最後まで読んでいただきありがとうございました。
    Jimon(@jimon_s)でした。

    jimon


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

    Comment

    1. […] 参照:Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編- […]

    2. […] URLhttp://korehalog.info/stinger5-class-id-toppage/ […]

    3. […] (Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編- より引用) […]

    4. […] ・これは!ログ/Jimon様の記事 ⇒ Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編- […]

    5. […] Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編- […]

    6. […] Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編- […]

    7. […] Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編- […]

    Message

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

    PROFILE

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

    About


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

    PAGE TOP ↑