テンプレートの各部名称やid/classなどをキャプチャー画像で図解

eyecatcherのHOMEページ表示時のキャプチャー画像を用いて各部名称を説明しています。当サイト作者が作成した次のテンプレートについてです。

概要・このページの見方

  1. テンプレートの機能説明やカスタム具体例を述べる際に、各部分の名称が明確になっている方が不慣れな方に親切かと思いこの記事を作成しました。

  2. 各名称は絶対的なものではなく、複数の呼称がある場合もあります。

  3. 愛猫チェリッシュ(eyecatcher ver1.0.0)のキャプチャー画像を用い、説明している部分を画像内でハイライトしています。eyecatcherシリーズ以外では無い部分もありますが、基本構造は同じです。

    130402eyecatcher.png

ヘッダー

ヘッダー全体

  1. ヘッダー全体です。id#header です。ヘッダー内にサイトタイトルやグローバルナビゲーションなどが入っています。

    130402eyecatcher-header.png

サイトタイトル(ブログタイトル)

  1. ブログのタイトルです。id#site-title です。

    130402eyecatcher-site-title.png

アイキャッチ画像

  1. アイキャッチ画像です。eyecatcherシリーズでは、サイトタイトルの背景画像として表示されています。id は サイトタイトルと同じく#site-title です。

    130402eyecatcher-eyecatcher.png
  2. eyecatcherシリーズ以外は、ブログタイトルに画像を用いる方法があります。

サイト説明文(ブログ説明文)

  1. ブログを1行で説明している部分です。id#site-description です。eyecatcherシリーズのデフォルトでは、説明文が中央寄せになっています。

    130402eyecatcher-site-description.png

カルーセル

  1. サムネイル付き最新記事一覧です。id#crs-wr です。eyecatcherシリーズだけに存在します。最新記事を表示しきれない場合、カルーセル内両端にある矢印でスクロール可能です。

    130402eyecatcher-crs-wr.png
  2. カルーセル内最新記事一覧の記事数を増減させる方法(最大30件)があります。

グローバルナビゲーション

  1. 読者の利便性向上を図るために、ブログ内で特に見てほしい記事へのリンクなどを設置できる部分です。id#nav-wrapper です。

    130402eyecatcher-nav-wrapper.png
  2. グローバルナビゲーションに関しては、タグ:グローバルナビゲーションでカスタム具体例などの記事一覧を確認できます。

記事部分

記事全体

  1. 記事が表示される部分です。id#content です。HOMEページなどの記事ページ以外では、各記事の追記部分は表示されません。

    130402eyecatcher-content.png

HOMEページ固定表示スペース

  1. ブログのHOMEページ(URLの「~.fc2.com/」の後に何もないページ)で表示される固定表示スペースです。id#sticky です。

    130402eyecatcher-sticky.png
  2. 不要な場合、手っ取り早くすべての固定表示スペースをコピペで非表示にする方法があります。

個別記事

  1. デフォルトでは新しい順にそれぞれの記事が表示されます。下図では、最新記事1つがハイライトされています。id ではなく、class.entry です。

    130402eyecatcher-entry.png

記事タイトル

  1. 各記事のタイトルです。id ではなく、class.entry-title です。公式プラグインの最新記事を利用している場合、そこでも記事タイトルが表示されます。eyecatcherシリーズでは、カルーセルでも表示されます。

    130402eyecatcher-entry-title.png
  2. eyecatcherシリーズで公式プラグイン「最新記事」にサムネイルを表示させる場合、コピペでOKです。

記事公開日時

  1. 記事を公開した日時です。id ではなく、class.entry-date です。

    130402eyecatcher-entry-date.png
  2. 記事の更新日を記事本文内に記述し、jQueryで記事公開日時の横に更新日を移動させるHTML記述方法もあります。

記事本文

  1. 記事の本文が表示される部分です。id ではなく、class.entry-content です。ただし、正確にはこのクラスは記事本文から各記事下部の固定表示スペースまでのエリアを含みます。下図では分かりやすいように、記事本文部分だけをハイライトしています。

    130402eyecatcher-entry-content.png

続きを読む

  1. 記事に追記がある場合、ハイパーリンク付きで「続きを読む」が表示されます。id ではなく、class.more-link です。

    130402eyecatcher-more-link.png

関連記事リスト

  1. その記事と同一カテゴリの記事タイトルが表示される部分です。id ではなく、class.relate です。

    130402eyecatcher-relate.png
  2. デフォルトでは記事タイトルが文字で表示されるだけですが、fc2blog関連記事にサムネイル(アイキャッチ)、画像サーバ移転対応版もあります。

各記事下部の固定表示スペース

  1. 各記事の下部にメッセージなどを表示できる部分です。id ではなく、class.each-entry-bottom です。

    130402eyecatcher-each-entry-bottom.png

各記事のカテゴリやタグなど

  1. その記事の属するカテゴリや付けられたタグ、コメントやトラックバックの有無が表示される部分です。id ではなく、class.entry-utility です。

    130402eyecatcher-entry-utility.png
  2. 各記事ページに編集ページへのリンクを表示する方法もあります。

    130331link-for-admin-3.png

サイドバー

サイドバー(左)

  1. 1つめのサイドバーです。2カラム版は唯一あるサイドバーを指し、3カラム版はデフォルトで左側に表示されているサイドバーを指します。id#sidebar です。

    130402eyecatcher-sidebar.png

プラグインカテゴリ1

  1. プラグインカテゴリ1が表示されるエリアです。id#primary です。下図ではプラグインが1つしか表示されていませんが、プラグインカテゴリ1に1つしかプラグインを設定していないためです。

    130402eyecatcher-primary.png

tbox(タブボックス、追尾ボックス)

  1. プラグインカテゴリ1の下部に表示されるボックスです。2カラム版では、プラグインカテゴリ2の下部に表示されます。id#tbox です。なお、valid-seoシリーズには存在せず、代わりに #fixedbox#fixedbox2 があります。

    130402eyecatcher-tbox.png
  2. 不要であれば、tbox(タブボックス、追尾ボックス)を非表示 → bodyにno-tbox でとりあえず非表示にできます。

サイドバー(右)

  1. 2つめのサイドバーです。3カラム版のみに存在します。id#sidebar2 です。内部にプラグインカテゴリ2が表示され、そのid#secondary です。サイドバー(左)同様、下部に追尾ボックス#tbox2がありますが、こちらはタブ切り替えなどなくシンプルなものになっています。下図ではその部分が表示されていません。

    130402eyecatcher-sidebar2.png

その他

フッター

  1. ページ最下部に表示される部分です。id#footer です。キャプチャー画像には載っていないので、画像は割愛します。

便利機能ボタン

  1. ブログ読者さんが簡易カスタムできるボタン群です。id#up-or-down です。

    130402eyecatcher-up-or-down.png
  2. 不要であれば、JavaScriptによる便利機能をデフォルトからカスタムする方法 で非表示にできます。

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)