記事のタイトルの見出し枠線をつける方法について取り上げます。
記事のタイトルの見出しに枠線をつけるとは、例えば下の画像のようなことです。
上の画像の記事のタイトル「はじめに」の前に青の枠線がついているのがわかると思います。
ちなみに、この「ライブドアブログの覚書」でも、記事のタイトルの見出しに枠線をつけて装飾しています。
上の画像は、ライブドアブログテンプレート、シーズンの中の「空02」というテンプレートを使ったものです。
記事のタイトルの見出し枠線をつける前が、下の画像です。
記事のタイトル「はじめに」の前には青い枠線はありません。
ライブドアブログテンプレートには、このテンプレートのように記事のタイトルの前に何もついていないものと、画像が使われているものとがあります。
＊「記事のタイトルに画像を使った見出しをつける」を参考にしてくだい。
記事のタイトルの前にアクセントをつけたいと思っている方は参考にしてください。
画像を使うよりも簡単にアクセントをつけることができます。
それではまず、記事のタイトルを指定するスタイルシート（CSS）を探します。
記事のタイトルを指定するスタイルシート（CSS）は、「.title」の部分に記述されています。
＊テンプレートによっては、記事のタイトルのスタイルシート（CSS）が「.title」ではない場合があるかもしれませんが、多くのライブドアブログのテンプレートで、記事タイトルのスタイルシート（CSS）は、「.title」の部分に記述されていると思われます。
ライブドアブログテンプレート、シーズンの「空02」のスタイルシート（CSS）では、下記のようになっています。
＊【スタイルシート（CSS）】ファイルまでのアクセス方法は「カスタマイズ応用編では」を参考にしてください。
.title{
margin-left:20px;
color:#666666;
font-size:14px;
font-weight:bold;
}このスタイルシート（CSS）に、タイトルの左側に見出し枠線をつける記述を追加すると下のようになります。
赤字の部分が追加した部分です。
.title{
margin-left:20px;
color:#666666;
font-size:14px;
font-weight:bold;
border-left:10px solid #486D94;
padding-left:5px;
}「border」は、枠線の種類や色、太さを指定するスタイルシート（CSS）です。
「border-left」は、枠線を左側につけるという意味です。
その隣の「10px」は、枠線の太さを指定しているので、細くしたければ、数字を小さくすれば細くなります。逆に、太くしたければ数字を大きくすれば、太くなります。
「solid」は、1本の実線を表します。
「#486D94;」は、枠線の色を指定しています。
なお、枠線の相対的な大きさは、「font-size」で指定してある数値になります。
この部分は、記事のタイトルのスタイルシート（CSS）ですので、記事のタイトルの文字が「font-size:14px;」と指定されているので、枠線もその数値に準じたものになっています。
個別に指定したい場合は、「border-left-width」という記述が使えます。
＊「border」についての詳しい説明は、下記のサイトが参考になると思います。
TAG<index>
borderの種類について http://www.tagindex.com/stylesheet/box/border_style.html
borderの太さについて http://www.tagindex.com/stylesheet/box/border_width.html
次回は、記事のタイトルに画像を使った見出しをつけているテンプレートの、画像を枠線に変更する 場合について、取り上げたいと思います。
