ブログのヘッダー画像を変更してＨＰをワンラックアップ
今日は良い天気でした。
写真は、川中のお気に入りの木、鯖江市は西山公園の木です。
携帯で撮影したのですが、もっと綺麗に写る携帯が欲しくなりますね・・・。
さて、無料のseesaaブログを利用して企業ＨＰを作成することがあります。
その際はもちろん出来合のデザインテンプレートを使用するのですが、ヘッダー部分にオリジナル写真を配置することで、グッと見た目が良くなります。
今回はそんなプチカズタマイズを。
なお、『seesaaブログ』を例にしていますが、同じブログエンジンを使用している『さくらブログ』でも、同様のはずですよ。
デザインテンプレートのヘッダーの設定は、スタイルシートというものを確認します。
スタイルシートは、seesaaブログにログインして、デザイン==>>デザイン一覧と進み、デザインのタイトルをクリックすると表示されるものです。
これは『お宝キャンペーン』というデザイン。
色づけした画像ファイルを表示させています。
#banner{
margin:0px;
padding:0px 40px 0px 0px;
text-align:right;
height:170px;
background-image:url(http://blog.seesaa.jp/img/bg/navigation/header.jpg);
background-repeat:no-repeat;
background-position:top left;
}
これは『シンプル：茶色：右』というデザイン。
画像ファイルの表示ではなく、色で塗りつぶしています。
#banner{
background-color:#B17642;
border-right:5px solid #9C683A;
border-bottom:5px solid #865A32;
color:#fff;
padding:6px;
margin-bottom:25px;
}
と言うわけで、『シンプル：茶色：右』というデザインのヘッダーにオリジナル画像を表示させたのがこれ。
ソースはこんな感じで。
#banner{
height:170px;
color:#fff;
padding:6px;
margin-bottom:5px;
background-image:url(http://nisiyama.sakura.ne.jp/sblo_files/shigeshi/image/20091020header.jpg);
background-repeat:no-repeat;
background-position:top left;
}
何のことはない、二つのヘッダー部分のソースを混ぜ合わせただけです(^^)
なお、ヘッダーに表示させた画像のサイズは８００ｘ１７０。
幅は、デザインの幅に合わせてあります。
ブログの記事に写真を表示させる要領で、用意したヘッダーの画像をブログにＵｐし、その画像のアドレスをスタイルシートに埋め込みました。
ヘッダーの画像を変えると、ＨＰのイメージがグッと良くなります。
結構簡単です、失敗しても、スタイルシートは初期値に戻せます。
是非、チャレンジしてみてください。
ネットビジネスを応援する鯖江の税理士法人川中経営
税理士・ＩＴコーディネータ 川中重司
