紅旗征戎吾ガ事ニ非ズ

SLASH METAL⚡ GARAGE OFFICIAL BLOG

ブログのタイトル文字を画像で指定

ブログタイトルを、OSの影響を受けない画像に変更することにした。

f:id:ghost_pain:20161216224122p:plain

まずは、好みのフォントで作ったタイトルを画像にして、はてなフォトライフにアップロード。画像アドレスをコピーする。それからヘッダのタイトル下に以下のように記述する。

<div id="title2">

<a href="(ブログのアドレス)">

<img src="(ブログタイトルの画像アドレス)">

</a>

</div>

CSSで以下のように追加して調整。

#title a{

display: none; /*デフォルトのブログタイトルを削除*/

}

 

#blog-description{


margin:0 0 -150px 0; /*説明文の位置を調整*/

}

 

#title2{

margin:0 0 150px -5px; /*新しいブログタイトルの位置調整*/

}

終了。

 

f:id:ghost_pain:20161211180554p:plain

 

ちなみに、デフォルトの表示ではこんな感じ。(デフォルトの文字を太くすると少し印象が変わるが、Mac以外では全く反映されない)