ブログデザインのカスタマイズ
先日、私のBLOGを読んでいただいた方からメールをいただきました。
“Zizouさんは、ページの写真を入れ替えてますが、どうやっているのですか?”
せっかくなので、私のカスタマイズ方法を、カンタンにご紹介します。
・・・ただし、若干のHTMLタグの知識があったほうが、スムースに行くと思います・・・(^^)
(HTML用語についての説明や、「なぜそうなるの?」にはお答えできませんのでネ・・・)
まずはじめに、ベースとなるブログのデザインを選びます。
現在の私のBLOGの場合、ベースは・アウトドア 2カラム「ラフティングを楽しむ人」です。
これを [>選択] [>保存] して、いったんブログのデザインを確定させます。
つぎに、ブログのいちばん上に表示されている写真を、好きな写真に入れ替えます。
この写真の大きさは、760x220ピクセルですので、この大きさで画像を用意します。
用意した画像を[画像のアップロード]機能を使って、ブログのサーバ上に登録します。
つぎに、「オリジナルデザインの登録」で、スタイルシートを編集します。スタイルシートに
#banner,#subbanner{ background:#fff url(画像の相対パスを入れる)left;と書かれてあるところをさがして・・・・・カッコ内の赤字部分の文字列を置き替えます。 私の画像の場合、このカッコ内の相対パスは“/usr/zizou/banner.jpg”になります。 まずこれで、トップ画像が、ラフティングの写真から、秋田の風景写真になりました。 次にサイドの余白部分の画像ですが、現在私が使っているのはコレですね。 この部分(ベースとなる背景画像)を指定しているのは、同様にスタイルシートで
body{ color:#000; margin:0px; background:#fff url(画像の相対パスを入れる); text-align:center;と書かれてあるところをさがして・・・・・カッコ内の赤字部分の文字列を置き替えます。 私の画像の場合、このカッコ内の相対パスは“/usr/zizou/kaberan21.gif”になります。 まずこれで、背景画像が、ランドナーのシルエット画像になりました。(乾さん、ありがとう!) 最後に、タイトルの横に表示されている、小さなMTBの絵ですが
.title{ color:#000; font-size:12px; font-weight:bold; height:30px; background-repeat: no-repeat; background-position: left; padding-left:35px; padding-top:10px; background-image: url(画像の相対パスを入れる); background-position:1px 1px; }この部分を“/usr/zizou/mtb1.gif”に置き換えて、[保存]して、はい、出来上がりです。 ただし「オリジナルデザイン」以外を選ぶと、上書きされ、消えてしまいますので、ご注意を。 いろいろいじって、遊んでみてくださいネ。