アイキャッチ画像のデフォルトサイズや高さ(height)の調整方法

アイキャッチ画像のデフォルトサイズや高さの調整方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. アイキャッチ画像のデフォルトサイズについてです。

  2. サイズを考慮して緻密にカスタムする方法です。

  3. アイキャッチ画像の高さを任意に変更できます。CSS編集にコピペで追加し、値を任意に変更します。

アイキャッチ画像のデフォルトサイズ

  1. 横幅は #page の横幅に依存します。3カラムと2カラムで異なります。それぞれのデフォルト値は次のとおりです。

    • eyecatcher (3カラム) - 1234px
    • eyecatcher-2c、dt18_eyecatcher (2カラム) - 958px
  2. 高さは3つとも共通で 300px です。

  3. アイキャッチ画像としてつかう画像のサイズに関わらず、横幅は 1234px(もしくは958px) で表示されます。たとえば、デフォルトで表示される下の画像サイズは960x300ですが、3カラムのeyecatcherで表示させても横幅はぴったり1234に調整されます。横幅を960から1234に拡大したので高さも同じ倍率で拡大され386pxとなりますが、表示する高さを300pxに設定しているので、上下それぞれ43px分がはみ出てしまい、その部分は非表示になるようにしています。

    eyecatcherデフォルトアイキャッチ画像
  4. 上記設定は、アイキャッチ画像として使う画像のサイズが統一されていなくても、#page横幅に合わせて表示できるようにするための仕様です。

テンプレートのCSSを編集

  1. たとえば、高さを200pxに狭めたい場合は次のコードを追加します。反転している部分は200から25を引いた値の175です。

    
    /*
    ※ アイキャッチ画像の高さ調整 ver130504
    ※ http://customtemplate.blog112.fc2.com/blog-entry-133.html
    */
    #site-title a{padding:175px 1% 0 0;}
  2. 同様に、高さを250pxに狭めたい場合は次のコードを追加します。やはり、指定したい高さから25を引いた値を反転している部分に入れます。

    
    /*
    ※ アイキャッチ画像の高さ調整 ver130504
    ※ http://customtemplate.blog112.fc2.com/blog-entry-133.html
    */
    #site-title a{padding:225px 1% 0 0;}
  3. ブログタイトルの位置を指定している場合、それぞれのコード内にある 275 を指定したい高さの値から25を引いた値に変更します。

このページに関して

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

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

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

  4. 作者覚書:記事作成~公開まで1時間。

以上です。

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