livedoor Blogには、ブログテンプレートの画像を簡単に入れ替える事ができる機能ありますので、
今回はそれを使ってブログのタイトル画像の設置を行ってみましょう。
※第五世代テンプレート以降ではデフォルトでこの機能が備わっておりますので、
下記で説明する導入作業を行う必要はありません。
使用する独自タグ：
・<$BlogHeaderImageUrl$> ： タイトル画像の表示タグ
・<$BlogHeaderImageWidth$> ： タイトル画像の横幅指定タグ
・<$BlogHeaderImageHeight$> ： タイトル画像の高さ指定タグ
※「独自タグ」については「独自タグについて」をご覧ください。
導入方法
・ヘッダー画像を表示させたい場所に<$BlogHeaderImageUrl$>という独自タグを挿入する。<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background-image:url(<$BlogHeaderImageUrl$>);"</IfBlogHeaderImageUrl>>※<IfBlogHeaderImageUrl>は、タイトル画像が設定さているかの条件タグ
・タイトル画像の横幅を指定する場合
<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background:url(<$BlogHeaderImageUrl$>) no-repeat left top;width:<$BlogHeaderImageWidth$>px;"</IfBlogHeaderImageUrl>>
・ブログ画像の縦幅を指定する場合
<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background:url(<$BlogHeaderImageUrl$>) no-repeat left top;height:<$BlogHeaderImageHeight$>px;"</IfBlogHeaderImageUrl>>
タイトル画像を変更する
テンプレート側のカスタマイズで「かんたんタイトル画像変更」の対応が完了していれば、管理画面で画像の設定が行えます。「管理画面」>「ブログ設定」>「基本設定」>"かんたんタイトル画像"
でブログのテンプレートとして表示させたい画像を指定/変更します。
つまり画像の変更が管理画面上で行えますので、簡単にブログの模様替えが行えるようになります。
詳しくは「かんたんタイトル画像について」をご覧ください。
