ブログタイトル名を画像に変更したい |
||
(0)
テキストで書かれているよりも、ブログ名が画像の方が見栄えがいいですしかっこいいと思います。
スポンサードリンク
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月４日追記
スマートフォン版テンプレートの方は、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%;
}
によってどんな画像ファイルでもテンプレートの横幅と同じ大きさになるように設定しています。
流石に画像サイズが大きすぎると、閲覧時の読み込み時間に影響がありますので、大きすぎないように気をつけましょう。
小さすぎると逆にぼやけるかもしません。
グレーが基本色のテンプレートです。
メインカラー ：#444444
メニューカラー：#333333
サブカラー ：#EFEFEF
ラインカラー ：#999999
で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。
SP01_Blue
爽やかな水色が基本色のテンプレートです。
必ず結果が出るブログ運営テクニック
もっとカスタマイズしたい方必見！
毎日メンテナンスするだけで･･･
