ブログタイトル名を画像に変更したい |
||
テキストで書かれているよりも、ブログ名が画像の方が見栄えがいいですしかっこいいと思います。
スポンサードリンク
HTML編集
下記のような箇所を見つけてください。
<h1>~</h1>で囲まれた部分がブログ名になります。
<!--▼▼ ヘッダー ▼▼-->
<div id="header_outline">
<div id="header_body">
<h1>
<a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><%blog_name></a>
</h1>
<div class="intro"><%introduction></div>
</div><!--/header_body-->
</div><!--/header_outline-->
<!--▲▲ ヘッダー ▲▲-->
以下のように書き換えるだけタイトル名を画像にすることができます。
<!--▼▼ ヘッダー ▼▼-->
<div id="header_outline">
<div id="header_body">
<h1>
<a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0" /></a>
</h1>
<div class="intro"><%introduction></div>
</div><!--/header_body-->
</div><!--/header_outline-->
<!--▲▲ ヘッダー ▲▲-->
画像URLは、【ツール】→【ファイルアップロード】で各自アップロードした画像のURLを貼り付けてください。
僕の場合は、
<img src="http://blog-imgs-55-origin.fc2.com/x/x/n/xxnostalgiaxx/20121117120203e0c.png" border="0" />
このようになっています。
2013年10月4日追記
スマートフォン版テンプレートの方は、CSSの編集もお願い致します。赤い箇所の変更あるいは追加をお願いします。
CSS編集
/*============================================================
●●ヘッダー●●
============================================================*/
/****************************** ▼全体▼ */
#header {
position:relative;
min-height: 0px;
margin:0 0 0px;
padding: 0 0px;
background-color:#B22222; /* ヘッダ背景色(全体)*/
color:#FEFEFE; /* ヘッダ文字色 */
text-align: center; /* 中央寄せ */
background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")
↑SP01_Blueのみに存在します。不要であれば削除してください。
}
/****************************** ▲全体▲ */
/****************************** ▼タイトル文字部分▼ */
#header h1 {
overflow: hidden;
width: 100%;
margin:0 auto;
padding: 0px 0;
font-size:20px; /* 文字の大きさ */
text-overflow: ellipsis;
white-space: nowrap;
}
#header img {
width: 100%;
}
#header h1 a { color:#FFFFFF;} /* 文字色 */
#header h1 a :hover{ color:#FFFFFF; } /* 触れた時の文字色 */
/****************************** ▲ヘッダタイトル部分▲ */
例えば↓こんな大きなトップ絵を付けたいと思っていても、

#header img {
width: 100%;
}
によってどんな画像ファイルでもテンプレートの横幅と同じ大きさになるように設定しています。
流石に画像サイズが大きすぎると、閲覧時の読み込み時間に影響がありますので、大きすぎないように気をつけましょう。
小さすぎると逆にぼやけるかもしません。