ブログのタイトル画像をプチカスタマイズしてみた

本当はこのテンプレート（アクア）の3カラムままでワイド化しようとしたものの、数値を弄ってもいまいちうまくいかないのでタイトル背景くらいは変えてやるの負け惜しみ。

・要は画像差し替えです。

管理＞デザイン＞テンプレート管理＞選択して編集＞
#container {
width :770px;
margin:0 auto;
background:#ffffff url(/_common/skins/211/images/banner-bg.jpg) no-repeat center top;
line-height:1.4;
text-align:left;
}


この画像ファイルを編集してアップロードして
太字部分を置換

#container {
width :770px;
margin:0 auto;
background:#ffffff url(/_images/blog/_a4c/goma514/title20blue20banner-bg_font65_bokashi8.jpg) no-repeat center top;
line-height:1.4;
text-align:left;
}


トップページしか確認してないけどできた予感。
レイアウトが崩れたりして失敗したら初期化ボタンで元通り。

なんでワイド化うまくいかないんだろう～全体の幅を広げて記事の真ん中を広げたのはいいけど、サイドバーの背景だけ動いてくれない。
スキンカスタマイズ？cssってなあに？と思って一から初心者入門ページを読み始めたら強烈な睡魔が＾＾　ﾀﾞﾒﾀﾞｺﾘｬ

pictbear second edition使用
と、書こうと思って調べたら脆弱性が発見されて更新されたばかりですね。
【PictBear】脆弱性に対応した PictBear 2.01 正式版をリリースいたしました！
http://www.fenrir.co.jp/blog/2010/03/pictbear_pictbear_201.html

なんたる偶然。


追記：
まるまるさんにコメントいただいたので再チャレンジ。
・770pxと書いてある2箇所を960pxに置換
・中カラムと思われる数字に差分の190をプラスして置換

ここまではできていたんです。そして、
・左右のカラムの背景の色指定している行をずっと探していましたが、今repeat-yと書いてあるgif発見。
　→背景はgif画像の縦連続だったんかいー
ここを置き換えれば完成？？

という段階まで来ました。面白いから不完全で一時保存。


さらに追記：
背景のgif画像をDLして広げて白いとこ増やして、とサクっと編集してアップロードして設定･･･してもうまく行かない。
なんだ透過設定してあるのかと勘で編集しても失敗。なんという高いハードル。
とりあえず目的の大きい画像が貼れれば、


さらに：
余白の白さに耐えられず900pxに縮める。　サムネイル画像490px

タグ：カスタマイズ テンプレート PictBear おれめも

コメント 8

width:770px;を好きなサイズに広げれば広がりますよ。
私は890ピクセルにしています。（元のままですが。）
margin:0 auto;の意味は、#container 枠を真ん中にすると言う事みたいですよ。
がんばって下さいませ。＾＾
by まるまる (2010-03-19 20:26) 

まるまるさんこんばんは。ありがとうございます。
770を換えて広がったことは広がったんですが背景は動いてくれないみたい、というかどこを弄ればいいかわからない状態で降参してます＾＾
もう一回見てみます。
by goma (2010-03-19 20:58) 

#mainも計算して同じピクセル数を広げるとそろうみたいです。
by まるまる (2010-03-19 21:30) 

まるまるさんどうもです。960に広げるに伴い該当すると思われる部分に190px足してみました。
なんとなくできた気分になってますが、そちらの環境で崩れてたら教えていただけると＾＾
by goma (2010-03-19 21:40) 

崩れることなく、上手くいっているように見えます。＾＾
by まるまる (2010-03-20 10:13) 

まるまるさんありがとうございますー。
狭い狭いと思って変えたはずが、変えてみるとスペースが気になってきました＾＾
by goma (2010-03-20 11:36) 

例ですが、
#side-a {
float:left;
width:170px;
background-color:#cdcdcd;　←これ
画像でなくとも、バックグラウンドをカラー指定するとイメージが変わりますよ。
repeat-y　とは縦の繰り返し。repeat-xで横の繰り返しになりますが、これは画像の場合で、カラー指定の場合はいりません。上の例からすると、#cdcdcdの部分がいろ番号です。ここに例えばyellowと#無しで書くとサイドカラムが黄色になります。
by まるまる (2010-03-20 15:47) 

おお！わざわざすいません＞＜　早速aliceblueを入れてみました。
なるほど、サイドバーの背景設定だとカラムのパーツの高さで止まるんですね。だからデフォルトは全体のバックグラウンドで縦のリピートにしてるんだなあ。
ただ、白の方がすっきりしていいという気もしてきました。
度々ありがとうございます。
by goma (2010-03-20 16:55)