2009年03月22日

さくらブログのバナー画像を変更する方法

さくらインターネットのさくらブログは、簡単な操作で使えるのがよい。しかし、難点はデザインがいまいちでオリジナリティが出しにくいこと。そこで、簡単な改造で企業や個人がオリジナルのデザインにしたように見せる改造方法を説明。まずはバナー画像を変更するだけで、かなりオリジナリティがでるのでそれだけでもやってみてはどうか。

以下より、さくらブログの改造例を説明する。

 

mamejins.gif
ここではマメジンブログの例で説明する。マメジンのバナー画像はアニメーションgifを使っている。

マメジンブログはさくらのブログを改造して使っている。

まずは、http://blog.mamejin.com/のソース(html)を見る。
11行目あたりに
<link rel="stylesheet" href="http://blog.mamejin.com/styles-index.css" type="text/css" />
という記述がある。
この
http://blog.mamejin.com/styles-index.css
はCSS(スタイルシート)といい、デザイン情報を記述してあるものだ。

そこで、次は
http://blog.mamejin.com/styles-index.css
をブラウザで開く。
上から30行目あたりにbackground-image:url(http://www.mamejin.com/mamejin/mamejins.gif);
という記述がある。
この
http://www.mamejin.com/mamejin/mamejins.gif
のmamejins.gifが、ブログのバナー画像である。

もともとは
background-image: url(http://blog.sakura.ne.jp/img/bg/sushi/banner.jpg);
だったものを変更した結果である。

ブログのバナー画像を変更するときは
1.URL先の画像(banner.jpg)を変える
2.CSS記述内のURL名を変える
のどちらかになる。

実は
1.URL先の画像(banner.jpg)を変える
というのはできない。
さくらブログの本体であるhttp://blog.sakura.ne.jp/img/bg/sushi/banner.jpgを変更することはユーザでは管理できない領域だからである。

で、
2.CSS記述内のURL名を変える
ということになる。

ここからが実際の改造の手順となる。

Sakura

まずは自分が管理できるところに修正した画像をFTPでアップする。

今回の例は、http://www.mamejin.com/mamejin/mamejins.gif

CSS記述内のURL名を変える方法はさくらブログの管理画面からできる。

デザイン>デザイン一覧
でCSSの一覧画面がでる。
その画面からタイトル一覧となっているCSS一覧がある。
初期ではまだ1つしかないはず。
それをクリックするとCSSの編集画面になる。

その中身の
background-image: url(http://blog.sakura.ne.jp/img/bg/sushi/banner.jpg);

background-image:url(http://www.mamejin.com/mamejin/mamejins.gif);
に変更して保存。

その後、全再構築をすればバナー画像は変わるはずである。

簡単だが効果は大きいので、さくらブログの改造の第一歩としてはいいだろう。ためしてみてはいかが?

posted by さくらブログ at 07:13| バナー画像の変更方法
さくらのブログでビジネスブログ(さくらのブログを使いこなしたらMTOSで行こう!もご覧ください)