ブログタイトルに画像を用いる方法

公開
2012年06月09日(土) 13:41

ブログタイトルに画像を用いる方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. ブログの横幅と同サイズの画像をブログタイトルにする方法を述べますが、画像のサイズは任意で結構です。

メリット

  1. 文字でタイトルを表示するよりもインパクトがあり、ブログを覚えてもらいやすいです。

テンプレートのHTMLを編集

  1. 下図で赤色破線で囲った部分を画像に変更します。

    customtemplate-110-banner-3.png

  2. 下図で反転しているコードを変更します。これ↓が上記説明のclassですの8行下あたりです。

    
<%blog_name>
    customtemplate-110-banner-1.png

  3. 次のコードに変更しました。画像のURL、横幅、高さなどは挿入する画像に合わせて適宜調整してください。

    
<img src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/customtemplate-110-banner-example.png" width="958" height="300" alt="<%blog_name>" />
    customtemplate-110-banner-2.png

  4. 以上のHTML編集だけでブログタイトルを画像に変更できました。画像の上部に5pxの余白がありますので、気になる場合はCSSを編集することで調整できます。

    customtemplate-110-banner-4.png

テンプレートのCSSを編集

  1. 画像上部の5pxの余白を削除する場合、CSS内の次のコードを消去します。

    
padding-top:5px;
    customtemplate-110-banner-5.png

  2. クリックでデモページを確認できます。

参考ページ

  1. このページで述べた方法は、作者が考える最も簡単な方法です。

  2. 他の方法としましては、ブログタイトルの背景画像として画像を表示する方法もあります。次のページが参考になります。HTMLとCSSに相当慣れていないと難しいかもしれません。

  3. 当サイト内では次のページが参考になります。

以上です。

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