あきたポタリング日記

ポタリングとは、気の向くままに自転車で散歩をすること。 四季の美しい風景の中を のんびり走るのが好きです。 自転車に乗れないときは、不定期更新日記になります。

ブログデザインのカスタマイズ

先日、私の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”に置き換えて、[保存]して、はい、出来上がりです。 ただし「オリジナルデザイン」以外を選ぶと、上書きされ、消えてしまいますので、ご注意を。 いろいろいじって、遊んでみてくださいネ。