いり江の福岡生活

ブログの"カオ"と言えば、トップ画面の上にあるバナー画像ですね。
ブログのテンプレートのカスタマイズはhtmlの知識が必要なので、少し勉強しないと
見栄えの良いブログを作ることは難しいと思います。しかし、ブログに標準で添付
されているテンプレートをそのまま使うのは味気ない。そういう方にはブログの"カオ"
であるバナー画像だけを変更することをオススメします。これだけでグッと自分だけの
オリジナル感のあるブログに見せる事ができます。手順は簡単です(さすがに嘘です)

ここでは、よかよかブログのテンプレートのカスタマイズ方法を簡単に説明します。

▼ブログのバナー画像


例えばこのブログ。バナー画像は可愛いですが、これではこのブログがよかよかで
大人気の「ぐうたら主婦のぐだぐだ日記」だと言う事が分かりませんね(笑)　そこで
まず、ぐだぐだ感たっぷりの画像を準備します。次に、管理画面にログインして、

管理画面＞テンプレート

を選択します。するとテンプレートの設定画面が表示されます。

▼テンプレート


よかよかブログの場合、3つまでテンプレートが選択でき、実際に現在使っている
テンプレートがアクティブになっていると思います。右の方の"カスタマイズ"をクリック。

▼スタイルシート


テンプレートをカスタマイズ出来るようになっています。ここは初心者はいじって壊すと
大変な事になりますが、最悪もう1度同じテンプレートを選択すれば上書き保存されて
元に戻りますから、心配なく作業を進めて下さい。バックアップをとっていれば安心です。

▼スタイルシート＞バナーの記述


大体、”banner”とかで検索すればそれらしい記述が見つかると思います。この
テンプレートの場合は恐らく(時間が無いので確認してません) #containerという部分
だと思います。この中に画像のURLがありますね？ここに自分が準備した画像のURLを
記述すれば良い訳です。じゃあ、具体的にはどうすれば良いのか？

▼画像のアップロード


普通にブログの記事に写真をアップロードする要領で準備した画像をアップします。
この時にスタイルシートの記述によれば、width:760px(幅760ピクセル)と書いてあるので
写真の幅をそれに合わせておく必要があります。大きい画像ならアップロードする時に
幅を760で制限するのが簡単かもしれませんし、Photoshopみたいなソフトを使っても良い。

そして、アップロードした画像のURLを先ほどのスタイルシートの所望の位置に記載します。
画像のURLが分からない？最も簡単な確認方法はダミーの記事投稿画面を開いて、
画像を貼りつけて確認してみるのが間違いがないと思います。

▼画像URLの確認方法


赤字の部分が画像のURLです。それをhtt://から全てスタイルシートに記載すればOKです。
実際には縦の長さ(この場合120px)の調整や、タイトル文字の位置調整をした方が良いですが
(スタイルシートの同じ場所に位置調整があります)　それ程気にされなくても良いでしょう。

どうです・・・意外と簡単でしょう？　他のテンプレートを使用している方も同じ要領で出来ます！