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

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

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

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

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

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

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

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

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

Sponsored Link


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

まずざっくりとどの部分がどのファイルで管理されているのか説明します。
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


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

    Comment

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

    2. […] ※2「テーマの編集」で参照させていただいたサイトStinger3カスタマイズ!あると嬉しいclass,id構造早見表 -トップページ編- […]

    Message

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

    PROFILE

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

    About


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

    PAGE TOP ↑