記事のタイトルに画像を使った見出しをつける方法について取り上げます。
記事のタイトルの見出し画像とは、例えば下の画像のようなことです。
この画像は、ライブドアブログのテンプレート、シーズンの中の「雨模様」というテンプレートです。
上の画像では、記事のタイトル「はじめに」の左に、「カタツムリ」の画像が置かれています。
ライブドアブログのテンプレートには、このように記事のタイトルを装飾するために見出し画像が使われているものがあります。
すべてのテンプレートが記事のタイトルに見出し画像を使っているわけではありませんが、画像を使っていないテンプレートに画像を使いたい場合は、これから説明するスタイルシート（CSS）を追加・変更することで、画像が表示されるようになります。
また、ライブドアブログのテンプレートの中には、記事のタイトルではなく、日付に見出し画像を使っているものもありますので、その場合は、日付の画像の部分のスタイルシート（CSS）を変更すれば、画像を変更することができます。
記事のタイトルのスタイルシート（CSS）は、「.title」の部分に記述されています。
＊テンプレートによっては、記事のタイトルのスタイルシート（CSS）が「.title」ではない場合があるかもしれませんが、多くのライブドアブログのテンプレートで、記事タイトルのスタイルシート（CSS）は、「.title」の部分に記述されていると思われます。
この部分のスタイルシート（CSS）は、下記のようになっています。
＊【スタイルシート（CSS）】ファイルまでのアクセス方法は「カスタマイズ応用編では」を参考にしてください。
.title{
color:#15A8A8;
font-size:x-small;
font-weight:bold;
background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif)
no-repeat scroll 0 0;
padding:5px 0 5px 35px;
}上記、スタイルシート（CSS）の中に、
background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif)
no-repeat scroll 0 0;という箇所が確認できると思います。
ここのurl「http://image.blog.livedoor.com/img/usr/rain/snail.gif」の部分が「カタツムリ」の画像が置かれている場所を示しています。
＊上のURLをクリックすると、「カタツムリ」の画像が表示されます。
このURLが本当に記事のタイトルの装飾画像がどうか調べるには、このURLをWebブラウザーに貼り付ければ確認できます。
やり方は、「ヘッダーの背景画像を変更する」を参考にしてください。
記事のタイトルの画像を変更するには、まずは変更する画像を用意し、その画像をアップロードして、アップロードしたURLを上記のURLと置き換えればO.Kです。
＊画像のアップロード方法は、「画像のアップロード方法」を参考にしてください。
その際、URL以外のスタイルシート（CSS）は変更しないようにしましょう。
ただし、実際に画像を変更後、Webブラウザーで確認してみて、画像とタイトルの表示位置がおかしかったら、「padding」を調整する必要があります。
上記のスタイルシート（CSS）では、
padding:5px 0 5px 35px;このようになっています。
これは、記事のタイトルの見出し画像とタイトルの文字が重なって表示されないように指定している箇所です。「.title」というブロック要素の左上を基点として、Webブラウザで見たときに、上から5px（ピクセル）、右から0px、下から5px、左から20pxにタイトルの文字を詰めて表示するということを指定しています。
上記のように、上右下左の4つを指定していない場合もありますが、そのときはその記述をもとに、画像表示を確認しながら試してみてください。
「padding」についての詳しい説明は、下記のサイトが参考になると思います。
TAG<index>
http://www.tagindex.com/stylesheet/box/padding.html
画像を自分で作るのは結構面倒なので、そんな場合は、インターネット上で配布されている「アイコン」画像を利用しましょう。
画像を無料で配布しているサイトはたくさんあるので、調べてみるだけでも楽しいですよ。
ここでは、いくつか画像を無料で配布しているサイトを紹介しますが、Webブラウザーの検索窓に「フリー素材」とか「アイコン 無料」などで、検索するとたくさんのサイトがヒットしますので、いろいろ試してください。
無料で画像を配布しているサイト
＊画像を利用する際には、それぞれのサイトの利用規約を守って利用してください。
0円のWEB素材屋さん
http://www.image-seed.com/
素材王国
http://www.sozaioukoku.com/
Little Cherry Stone
http://www.eonet.ne.jp/~lcs/
