アイキャッチ/サムネイル未設定記事の画像変更(カルーセル内ホバー時も)

アイキャッチ画像やサムネイル画像を設定していない記事の画像を変更する方法です。また、カルーセル内をホバー時に、デフォルトの猫画像ではなく任意のアイキャッチ画像が表示されるようにする方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. アイキャッチ画像やサムネイル画像を設定していない記事に関してです。記事ごとに必ずアイキャッチ/サムネイルがある場合は不要な設定です。

  2. デフォルトでは、カルーセル内のサムネイル画像は「No Image Available」画像、ホバー時に表示されるアイキャッチ画像は「猫」画像です。これを任意の画像に変更できます。

  3. HTML編集とCSS編集にコピペするだけです。

メリット

  1. ブログタイトルのアイキャッチ画像を変更している場合でも、また別の画像を設定できます。

  2. もちろん、変更後のブログタイトルのアイキャッチ画像と、同じ画像を設定することもできます。

テンプレートのHTMLを編集

アイキャッチ/サムネイルのない記事を登録

  1. テンプレートeyecatcherシリーズは、記事ごとにアイキャッチ/サムネイルがあるという前提でJavaScriptによる処理が行われています。

  2. アイキャッチ/サムネイルがない記事は、いわば例外なので、通常とは異なる処理をするために記事番号をテンプレートに登録します。登録しなくてもサムネイルは一応自動対応できますが、アイキャッチ画像は何も表示されなくなります(アイキャッチ/サムネイルがない記事に関してだけです)。

  3. 次のコードを探します。下図で反転している部分です。

    '0'
    130407hover-crs-no-eyecatcher-3.png
  4. たとえば、次のコードに変更します。下図で反転している部分が変更後です。

    '12,14'
    130407hover-crs-no-eyecatcher-4.png
  5. 愛猫チェリッシュでは、記事12と14でアイキャッチ/サムネイルを設定していないので、 '12,14' としました。たとえば、テンプレート利用者さんが記事15だけアイキャッチ/サムネイルを設定しない場合、 '15' に変更します。記事15と20と25なら、カンマで区切って '15,20,25' に変更します。

アイキャッチ/サムネイル画像URL

  1. アイキャッチ画像URLとサムネイル画像URLは1行違いで併記されています。

  2. サムネイル画像に関しては次のコード(画像URL)です。下図で反転している部分です。

    http://blog-imgs-44.fc2.com/c/u/s/customtemplate/transparent.png
    130407hover-crs-no-eyecatcher-1.png
  3. アイキャッチ画像に関しては次のコード(画像URL)です。下図で反転している部分です。

    http://blog-imgs-44.fc2.com/c/u/s/customtemplate/eyecatcher.jpg
    130407hover-crs-no-eyecatcher-2.png
  4. 反転している部分を任意の画像URLに変更し、続けてCSS編集へと進みます。

テンプレートのCSSを編集

  1. アイキャッチ/サムネイルのない記事をHTML編集で必ず登録する場合、この設定は不要です。ここでの設定は、登録し忘れ時の保険のようなものです。

  2. アイキャッチ/サムネイルを設定していない記事でも、上記登録をしなくてもサムネイル画像は一応自動対応します。デフォルトの「No Image Available」画像を変更すれば、任意の画像にできます。

  3. CSS編集で任意の場所に次のコードを追加します。反転している部分を表示させたい画像URLに差し替えます。

    /*
    ※ サムネイル画像未設定記事背景画像 (ver130407)
    ※ http://customtemplate.blog112.fc2.com/blog-entry-126.html
    */
    .ec-ng,.ec-ns{background:url("http://blog-imgs-44.fc2.com/c/u/s/customtemplate/no-image.png");background-size:cover;}
  4.  更新 すれば完了です。

このページに関して

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

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

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

  4. 作者覚書:記事立案・作成・公開に所要2時間。質問ではないので、コメントを読んで理解する時間が不要だった。

以上です。

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