さくらインターネット会員なら無料で使えるさくらブログ、バナー画像を変更すればもっとオリジナリティがでる

2008.12.182022.08.20

この記事は約3分で読めます。

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

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

まずは、http://blog.mamejin.com/のソース（html）を見る。
１１行目あたりに
<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
をブラウザで開く。
上から３０行目あたりに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);
だったものを変更した結果である。

ブログのバナー画像を変更するときは
１．URL先の画像（banner.jpg）を変える
２．CSS記述内のURL名を変える
のどちらかになる。

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

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

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

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

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

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

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

その中身の
background-image: url(http://blog.sakura.ne.jp/img/bg/sushi/banner.jpg);
を
background-image:url(http://www.mamejin.com/mamejin/mamejins.gif);
に変更して保存。

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

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