はてなダイアリーのテンプレートをカスタマイズして、ブログタイトル部分の背景画を変えてみました。


当ブログ「おきにワールド!」は、はてなダイアリーのデザインテーマ「Hatena2-white」を使用しています(2011年3月1日現在)。

シンプルな白ベースなので、エントリー文章に画像を入れても色目がごちゃごちゃせず良いのですが、ブログタイトルのエリア幅が広いのでカスタマイズしないと真っ白でちょっとさみしい感じ。

今日から3月ということもあり、春っぽいイメージの画像を入れてみましたよ~。

背景画をカスタマイズしたいけれど、やり方がわからないという方のために手順をメモっておきますね。

(1)まず、始めに背景画に使いたい画像ファイルを用意します。

私の場合は、1つの画像を固定して使いたかったので、テンプレート幅に合わせて900×160ピクセルの画像を用意。画像は、FlickrへUP(画像をインターネット上にアップロードする先は任意なので、はてなフォトやYahoo!フォト等、どこでも可)。

なお、固定した画像ではなく、幾何学模様などをリピート(繰り返し)して使う場合は、画像の大きさは何でも構いません。

(2)次に、画像ファイルのURLを確認、コピペします。

(3)次に、自分のブログ管理画面を開いて、「デザイン」→「デザイン編集」を選択。その中のタブ「詳細」→「ヘッダ/フッタ/スタイルシートの編集」の「スタイルシート」という欄に次のソースを加えます。

h1{

background-image:url(http://○○○○○.jpg);

background-repeat: no-repeat;

}

○○○○○.jpgの部分は、各自のファイル名を入れて下さい。私は画像を繰り返さないので「no-repeat」を使いましたが、各自の使い方に合わせて下記のソースから選び書き換えて下さい。

repeat   背景画像を縦、横に繰り返す

repeat-x  背景画像を横に繰り返す

repeat-y  背景画像を縦に繰り返す

no-repeat 背景画像を繰り返さない

(4)同ページの一番下に「プレビュー」ボタンがあるので、画像が表示されるかを確認後、「この内容に変更する」ボタンで確定すれば完成!

なお、この方法は、はてなダイアリーのテーマ「Hatena2-white」の変更方法なので、他のテーマにも同様に使えるとは限りませんので、違うテーマを使っている方にはあくまでもご参考までに。背景画を入れるだけで、ぐっと個性が出るようになりますね~。

※追記:実は、背景画像を繰り返さない方法にすると、IEブラウザで閲覧した場合には、このテンプレートは横幅が任意に広がる仕様なので、ウインドウを大きく広げすぎると右側に空欄ができちゃいます。気になる方は、繰り返しにした方がよいかもしれません。Firefox、Safariの場合は、ウインドウ幅を広げても固定されるのでレイアウト崩れません。

Related Posts Plugin for WordPress, Blogger...

miku の紹介

当ブログでは、あなたにお手紙を書くような気持ちで、好奇心旺盛に日々のいいね!を綴ります。ささやかな幸せを共有できましたら嬉しいです。 ▼オンライン上の活動は、以下のプロフィールページにまとめてあります。 http://flavors.me/miku8
カテゴリー: 未分類 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.