ブログタイトルのアイキャッチ画像やブログ名の位置をカスタム

更新
2013年04月07日(日) 19:30

ブログタイトルで表示されるネコのアイキャッチ画像やブログ名の位置をカスタムする方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. デフォルトで表示されているアイキャッチ画像を変更できます。

  2. アイキャッチ画像内の右下に表示されているブログタイトルの位置を変更できます。

メリット

  1. オリジナリティのあるブログへとカスタムできます。

  2. CSSをコピペして値の変更だけでできます。

テンプレートのCSSを編集

アイキャッチ画像の変更

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

    /*
    ※ アイキャッチ画像の差替 ver130407
    ※ http://customtemplate.blog112.fc2.com/blog-entry-121.html
    */
    #site-title a{
    background:url("http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-13.jpg") 50% 50%;
    background-size:cover;
    }
  2. 上記コードでは、ページ横幅にぴったり合うように調整されてアイキャッチ画像が表示されます。画像を等倍で表示させたい場合、coverauto に変更します。等倍だとアイキャッチ画像表示エリア内に同じ画像が敷き詰められます。

  3. デフォルトのアイキャッチ画像を変更するだけなので、記事ごとやカテゴリごとのアイキャッチ画像は有効なままです。

  4. アイキャッチ/サムネイル未設定の記事のデフォルト画像を変更する方法もあります。たまにアイキャッチ/サムネイルを設定しない記事がある場合、あらかじめご確認いただく方がいいです。

ブログタイトルの位置を変更

  1. CSS編集で任意の場所に次のコードのどれかを追加します。

  2. 左上

    /*
    ※ ブログタイトルを左上 ver130407
    ※ http://customtemplate.blog112.fc2.com/blog-entry-121.html
    */
    #site-title a{text-align:left;padding:0 0 275px 1%;}
    130403eyecatcher-title-1.png
  3. 右上

    /*
    ※ ブログタイトルを右上 ver130407
    ※ http://customtemplate.blog112.fc2.com/blog-entry-121.html
    */
    #site-title a{text-align:right;padding:0 1% 275px 0;}
    130403eyecatcher-title-2.png
  4. 左下

    /*
    ※ ブログタイトルを左下 ver130407
    ※ http://customtemplate.blog112.fc2.com/blog-entry-121.html
    */
    #site-title a{text-align:left;padding:275px 0 0 1%;}
    130403eyecatcher-title-3.png
  5. おまけ:ブログタイトルの文字間隔を詰められます。間隔を広げる場合は 014px などに変更します。

    /*
    ※ ブログタイトル文字間隔 ver130407
    ※ http://customtemplate.blog112.fc2.com/blog-entry-121.html
    */
    #site-title a{letter-spacing:0;}

このページに関して

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

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

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

以上です。

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