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

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

:2014/6/28 STINGER Wordpress

Stingerのカスタマイズ楽しまれてますか?

テーマをカスタムしていくとき、まず変えたい部分のclassとidを調べると思います。
慣れてきた今でこそ「Developer Tools」からすんなり目的のものを見つけられますが、はじめの頃は大変でした。

また入れ子の階層構造がうまくつかめていないと思ったとおりに変更できなかったりしますよね。

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

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

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

スポンサーリンク

記事内リード文下_PC


ざっつりとしたファイル構造

まずざっくりとどの部分がどのファイルで管理されているのか説明します。
Stingerのトップ画面は大きく

  • header.php
  • home.php
  • sidebar.php
  • footer.php
  • の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」がひとつの記事を表します。

    記事一覧部分1

    さらに「.entry」は写真部分の「.sumbox」と本文部分の「.entry-content」に分かれます。
    「.entry-content」はさらに「.entry-title-ac」「.blog_info contensbox」「.dami」「.motto」に分かれます。

    記事一覧部分2

    サイドバー部分

    サイドバー部分も「#wrap」、「#wrap-in」の中に「#side」が入っています。

    サイドバー全体

    さらにここから一番上の検索窓とその他の部分で分岐していきます。

    検索部分

    検索窓は「#search」と「#searchform」からできています。

    検索窓

    NEW ENTRYや最近の記事のところ

    「.kizi02」を大枠に各ブロックが入っています。NEW ENTRYや最近の記事などの見出しはすべて「.menu_underh2」です。
    またクラスやidではありませんが、NEW ENTRYの記事部分はひとつひとつの記事が「dl」、サムネイルが「dt」、本文が「dd」に割り当てられています。

    NEW ENTRYのところなど

    フッター部分

    フッター部分は「#footer」、「#footer-in」の順で入れ子になっておりさらにその中に「#gadf」「.stinger」「.copy」が入っています。

    フッター部分

    あとがき

    僕がはじめてカスタマイズに挑戦したとき「こんなのあったらいいのになー」と思っていたので作ってみました。
    間違いなどありましたらコメント欄に連絡ください。

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

    jimon


    記事下_W左_PC

    記事下_W右_PC

    -STINGER, Wordpress
    -,

    サイドバー上_PC

    CATEGORY
    この記事のカテゴリ
    STINGERの親カテゴリ
    ブログ内の他のカテゴリ
    更新チェックはこちらから!