記事フッター画像をCustom!

XVI

2005年12月06日 00:00

"フィッシング3カラム バスの喜び"をベースに始めたCustomBlogですが、
このベースにはBlog記事のフッター部分に画像が入っていませんでした。
故に、この画像変更をすっかり忘れてました(^^;

ってなわけで、

CustomBlog第八弾!
『記事フッター画像を変えて、もう完璧!!』

その1 フッター画像を準備しよう。

1.最初から用意されている画像は544×195だと思います。
このサイズは2カラムや3カラムによって変わりますので調整して下さい。
デフォルトの544×195が最大で、3カラムだと横400pxでジャストサイズだと思います。
今回は解りやすいように画像の名前を『footer.jpg』にして保存しておきます。
 (当然、GIF等にされる方はこの限りではありません)


2.ブログ管理画面を開き、
管理画面>>記事の投稿>>記事の投稿メニュー『画像・動画の登録、一覧、削除』の順にページを開きます。


3.『画像のアップロード』より"1."で用意したfooter.jpgをアップします。
 今回もオリジナルサイズで登録しましょう。

4.登録された画像をクリックするとブラウザのアドレス欄にアドレスが表示されるので控えます。
 今回は『http://blog.naturum.ne.jp/usr/***/footer.jpg
 と出るはずです。(***はご自分のブログページ名)
 控えるのは『http://blog.naturum.ne.jp/』から後ろの
 『/usr/***/footer.jpg』だけでOK。


これで画像の準備が出来ました。

その2 フッター画像を変えてみよう。

1.同じくブログ管理画面から、
管理画面>>デザイン>>デザインカテゴリ-オリジナルデザインの登録の順にページを開きます。


2.スタイルシートの中で、以下の部分を探します。

----------------------------------------------------------------
.blogbody
{
background:#fff url(/_img/fishing03/back006.gif);
background-repeat:no-repeat;
background-position:bottom right;
margin:0px 0px 10px 0px;
padding:8px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
----------------------------------------------------------------

 エディタのある人はエディタにコピペして、上から233行め辺り。

3.この中の赤色の部分だけ変更します。

----------------------------------------------------------------
.blogbody
{
background:#fff url(/_img/fishing03/back006.gif);
background-repeat:no-repeat;
background-position:bottom right;
margin:0px 0px 10px 0px;
padding:8px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
----------------------------------------------------------------

 最初から入っているファイル名はデザインによって変わります。

 その1"4"で控えたアドレスに書き換えます。
----------------------------------------------------------------
background:#fff url(/usr/***/footer.jpg)
----------------------------------------------------------------

 くれぐれも『***』の部分はご自分ブログページアドレスに変えて下さいね。
 この画像は記事欄の右下に配置されます。よって小さい画像は右下に表示され、
   大きい画像は左側が切れます。


4.『登録』をクリック。

5.『登録してもよろしいですか?』ダイアログで[OK]をクリック。

6.『今すぐ確認』をクリック。

7.多分完了です。
 ご自分のブログを開いて確認して見ましょう。

上手くいかなかったり、画面が崩れまくってしまった人は、
  最初から用意されているデザインをどれでも構わないので、
  登録し直すだけで取りあえずは治ります。


あなたにおススメの記事
関連記事