2009年12月05日
ブログカスタマイズ(タイトル文字)
前回の続きで
今度はブログページの一番上にあるタイトルを
画像に置き換えてしまう方法を紹介するが
このカスタマイズは
ブログのテンプレートによって見栄えが悪くなる場合もある
どういう場合かというと
画像の上にタイトル文字が表示されるように
スタイルシートで設定されているテンプレートの場合だ
それとこの方法でやると
ブログの説明文も表示されなくなるので
その場合は別途自分で文字をいれなければなくなる
まあ紹介文が表示されなくともよいのであれば別にかまわないが
まず画像に置き換える方法を説明する前に
準備段階として「コメントアウト記述」について説明する
「トップページ」「個別記事」「アーカイブ」の部分に関しては
HTMLという言語で書かれているが
無効にしたい部分をコメントをいれる為に用意されている
「コメントアウト記述」することで
あとで元にもどしたい場合の為に残しておける
では「コメントアウト記述」の方法だが
実に簡単で
始まり: <!--
終わり: -->
で挟むだけになる
たとえば
<img src="http://www.hoge.ne.jp/title.jpg">
という部分をコメントアウトして残したい場合なら
<!--
<img src="http://www.hoge.ne.jp/title.jpg">
-->
とすればOKだ
それではカスタマイズ箇所だが
テンプレートは前回と同じもので説明するので
話しがわからない場合は前回の記事を参照よろしく
まずは「トップページ」の以下の部分をコメントアウトしよう
<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->
次に緑色の部分のみコピーしてコメントアウトの下へ貼り付け
文字部分を画像に置き換える
前回同様にアップロードしておいた画像を使用するのであれば
< img src="自分のブログのアドレス/画像ファイル">
というHTMLタグを以下のように間にいれることになる
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><;img src="画像へのURL"></a></h1>
といった感じで
続けると以下のようになっているはずだ
<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><img src="画像へのURL"></a></h1>
以上、タイトル文字を画像に置き換える方法を紹介したが
このブログの文字も画像に置き換えてあるので
確認してみてほしい
それといろいろカスタマイズしたいのであれば
テンプレートにカスタマイズしたいものを登録し
そちらをいじることをオススメする
今度はブログページの一番上にあるタイトルを
画像に置き換えてしまう方法を紹介するが
このカスタマイズは
ブログのテンプレートによって見栄えが悪くなる場合もある
どういう場合かというと
画像の上にタイトル文字が表示されるように
スタイルシートで設定されているテンプレートの場合だ
それとこの方法でやると
ブログの説明文も表示されなくなるので
その場合は別途自分で文字をいれなければなくなる
まあ紹介文が表示されなくともよいのであれば別にかまわないが
まず画像に置き換える方法を説明する前に
準備段階として「コメントアウト記述」について説明する
「トップページ」「個別記事」「アーカイブ」の部分に関しては
HTMLという言語で書かれているが
無効にしたい部分をコメントをいれる為に用意されている
「コメントアウト記述」することで
あとで元にもどしたい場合の為に残しておける
では「コメントアウト記述」の方法だが
実に簡単で
始まり: <!--
終わり: -->
で挟むだけになる
たとえば
<img src="http://www.hoge.ne.jp/title.jpg">
という部分をコメントアウトして残したい場合なら
<!--
<img src="http://www.hoge.ne.jp/title.jpg">
-->
とすればOKだ
それではカスタマイズ箇所だが
テンプレートは前回と同じもので説明するので
話しがわからない場合は前回の記事を参照よろしく
まずは「トップページ」の以下の部分をコメントアウトしよう
<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->
次に緑色の部分のみコピーしてコメントアウトの下へ貼り付け
文字部分を画像に置き換える
前回同様にアップロードしておいた画像を使用するのであれば
< img src="自分のブログのアドレス/画像ファイル">
というHTMLタグを以下のように間にいれることになる
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><;img src="画像へのURL"></a></h1>
といった感じで
続けると以下のようになっているはずだ
<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><img src="画像へのURL"></a></h1>
以上、タイトル文字を画像に置き換える方法を紹介したが
このブログの文字も画像に置き換えてあるので
確認してみてほしい
それといろいろカスタマイズしたいのであれば
テンプレートにカスタマイズしたいものを登録し
そちらをいじることをオススメする