ブログタイトルの文字を非表示にし画像だけを表示(CSSにコピペでOK)

CSSにコピペするだけで、ブログタイトルの文字を非表示にする方法です。当サイト作者が作成した次のテンプレートについてです。

デモ画像

  1. カスタム前のデフォルト状態です。ブログタイトルが表示されています。スカイブルーの破線で囲われている部分です。(キャプチャーしたページ:しましまネコが前足そろえて | 愛猫チェリッシュ

    130407no-blog-title-1.png
  2. カスタム後です。ブログタイトル文字が非表示になりました。

    130407no-blog-title-2.png

メリット

  1. ブログタイトル文字と背景画像が被らないので、画像デザインがやりやすくなります。ただし、画像内にブログタイトルが記載されていないと、初めて来た人はブログタイトルが分からないでしょう。

  2. HTMLを直接削除しないので、SEO的に不利にならないでしょう。

  3. 追加したCSSを削除するだけで、いつでもブログタイトル文字を表示できます。追加したCSSコードを削除ではなく、コメントアウトでもいいです。

テンプレートのCSSを編集

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

    /*
    ※ ブログタイトル文字非表示 (ver130407)
    ※ http://customtemplate.blog112.fc2.com/blog-entry-125.html
    */
    #site-title a{text-indent:100%;white-space:nowrap;overflow:hidden;}
  2.  更新 すれば完了です。

  3. ブログタイトル文字を非表示ではなく、ブログタイトルのアイキャッチ画像やブログ名の位置をカスタムする方法もあります。

このページに関して

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

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

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

以上です。

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