eyecatcher シリーズの説明や使い方 (fc2blog共有テンプレート)

公開
2013年03月23日(土) 00:05
更新
2013年05月05日(日) 22:55

当サイト管理人が作成した下記テンプレートの説明です。記事ごとに異なるアイキャッチ画像をページトップに表示できます。アイキャッチ(サムネイル)画像をフル活用できます。

アイキャッチ画像特化テンプレートeyecatcher

eyecatcher を使うメリット

  1. アイキャッチ画像をページトップに表示できます。アイキャッチ画像とは、参考画像内でスカイブルーの破線で囲われた画像のことです。

    各記事や各カテゴリごとに一つ一つ個別のアイキャッチ画像を設定でき、インパクト絶大です。

    130402eyecatcher-eyecatcher.png

  2. カルーセルに最新記事一覧をサムネイル付きで表示できます。管理ページで最新記事一覧を最大の30件にしていても、カルーセル機能により省スペースで表示できます。

    カルーセル内の最新記事一覧を順番にホバーしていくと、ページトップのアイキャッチ画像が次々と切り替わります。愛猫チェリッシュで確認できます。

    130402eyecatcher-crs-wr.png

  3. グローバルナビゲーション内の次の項目にもサムネイル表示できます。

    • 最新記事 (下図参照)
    • カテゴリ
    • テンプレート利用者さんが任意に設定できるリンクリスト
    130404eyecatcher-global-nav.png
    130402eyecatcher-crs-wr.png

  4. 関連記事リストにサムネイル画像を表示できます。

    valid-seo-3c-130-kanren-eyecatcher-10.png

  5. コメントに投稿者のサムネイル画像表示、fc2プロフ連携で自動表示可能です。

    130314cm-img-2.png

  6. サイトマップページや検索結果ページの記事一覧にもサムネイル画像を表示できます。

    130404eyecatcher-sitemap.png 130404eyecatcher-search-neko.png

  7. その他、customtemplateでできることはほぼ全てできます。eyecatcher は customtemplate ver1.5.1 をベースに作られています。

アイキャッチ画像かんたん表示設定

アップロードするファイル名が重要

  1. たとえば、blog-entry-1.html のアイキャッチ画像に使いたいファイル名を entry-1.jpg にしてアップロードします。blog-entry-50.html なら entry-50.jpg です。その際、サムネイルの同時に作成するにチェックを入れておけば、entry-1s.jpgというファイル名のサムネイル画像が自動生成されます。

  2. サムネイル画像を自動生成せずに別個で作成する場合、サムネイル画像のファイル名をentry-1s.jpg にしてアップロードします。

  3. カテゴリごとのアイキャッチ画像は category-1.jpg 、サムネイル画像は category-1s.jpgというファイル名でアップロードします。記事ごとの画像と同じ要領です。

  4. アップロードが完了すると、同一画面で下図のようにファイル名などを確認できます。また、同一画面内で「entry」を検索すれば、各記事用のアイキャッチ画像とサムネイル画像の一覧を確認できます。同様に、カテゴリ用は「category」で検索します。

    130404eyecatcher-uploaded-2.png

規則的なファイル名なら対応可能

  1. アイキャッチ画像のデフォルト名は entry-(記事番号).jpg です。

  2. すでにアイキャッチ画像を各記事に設定している場合、それらのファイル名を entry-(数字).jpg という形式に変更するのは骨が折れます。

  3. たとえば、entry_img_(数字).jpgというファイル名なら、HTML編集のJavaScript部分を次のようにします。元画像のサイズにかかわらず、100x100で表示されます。カテゴリ用アイキャッチ画像も同じ要領です。

    var ec={
e:'entry_img_',
  te:'y',//記事ページごとにタイトル背景画像を変更
  fe:0,//この数字以上の記事番号はアイキャッチ画像を個別に変更
  xe:'',//上記数字以上であってもこの数字はアイキャッチ画像に変更されない
c:'category-',
  tc:'y',
  fc:0,
  xc:'0',//カテゴリ番号0もブログタイトルの画像を差し替える場合は0を削除する
s:'',//s を削除した
k:'.jpg',//kind
i:'http://blog-imgs-44.fc2.com/c/u/s/customtemplate/transparent.png',//アイキャッチ無の画像
b:'http://blog-imgs-44.fc2.com/c/u/s/customtemplate/eyecatcher.jpg'//ce無のタイトル背景(hover終了時)
};var crs={};

var recsn=[];

アイキャッチ無しでサムネイルだけをアップロードする場合

  1. デフォルトでは、アイキャッチとサムネイルがあるという前提でJavaScriptで画像を表示しています。

  2. しかし、テンプレート利用者さんによっては、サムネイルだけを利用したいというニーズもあるでしょう。デフォルトでアイキャッチをアップロードせずサムネイルだけを利用していると、カルーセル内をホバーしたり記事ページを表示した際に、アイキャッチ画像が何も表示されなくなります(リンク切れ状態)。この場合の対処方法は次の記事で図解しています。コピペすら必要なく、HTML編集でそれぞれ１文字削除するだけのかんたんカスタムです。

便利な機能説明やカスタム具体例

  1. テンプレートの各部名称やid/classなどをキャプチャー画像で図解しています。

  2. 公式プラグイン「最新記事」にサムネイルを表示、コピペでOK

    130331plugin-recent-eyec-1.png

  3. 公式プラグイン「カテゴリ」にサムネイルを表示、コピペでOK

    130331plugin-cate-eyec-1.png

  4. 時間のある時に、便利な機能説明やカスタム具体例を順次記事にしていきます。その旨をこのページで逐一記載しませんが、タグ：eyecatcherで記事一覧を確認できます。

見落としそうなポイント

  1. 1つだけなぜかサムネイル画像が表示されないような場合は、画像のアップロードし忘れが考えられます。大量に画像をアップロードしていると、どうしても漏れが生じます。アップロード画面で「entry」や「category」で検索し、表示されない画像がアップロードされているかを確認します。

  2. アイキャッチ画像はアップロードされているのにサムネイル画像が表示されない場合、アップロード時にサムネイルの同時に作成するにチェックを入れていなかったことが考えられます。チェックを入れてアップロードするとサムネイル画像も表示されるようになります。

  3. アップロード時にサムネイルの同時に作成するにチェックを入れていても表示されない場合、拡張子が.jpgであるかを確認します。gifアニメやpng画像などをアップロードする際にも.jpgに変更します。デフォルトでは.jpgとしていますが、HTML編集で上記コードのjpg部分をpngに変更すればファイルの拡張子を変更せずにpngのままアップロード可能です。

  4. デフォルトでは、カテゴリ番号０は固有のアイキャッチ画像を設定しない仕様にしています。しかし、カテゴリ番号０も固有のアイキャッチ画像を表示する場合は、上記コードの xc:'0', の 0を削除します。その旨をコメントアウトでも載せています。

  5. fc2ブログでアイキャッチ/サムネイル画像を表示していると、fc2blog画像サーバが突然勝手に移転でアイキャッチ/サムネイル画像が表示されなくなることがあります。この場合の事後対策は、関連記事リストにサムネイル画像表示（画像サーバ移転対応版）で確認できます。有事の際にはきっと驚くでしょうが、今のところ対策可能ですのでその点はご安心ください。

質問などについて

  1. 基本的に質問を受け付けていません。作者多忙のためです。

  2. しかし、テンプレート利用者さん同士で助け合いできる環境を用意しました。

  3. 上記掲示板で利用者さん同士では解決できない場合、時間があれば作者が対応します。

  4. 要望に関しても上記掲示板で受け付けています。何らかの手段を用いて、作者だけが見れる非公開コメントをしたり、作者に対してメールを送信するのはやめてください。万一そのようなメッセージがあれば、上記掲示板にコピペして公開するかもしれません。

このページに関して

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

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

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

以上です。

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