Rios
2008年01月11日
18:42
昨日変えたタイトル画像、いちおうメモもかねて、やり方です。
「これじゃわからないよ・・・」っていう方、すみません m(_ _ )m
では、ソラマメブログのカスタマイズ方法です。 あ、自己流です^^;
幅100%に対応したり、タイトルと説明上にもっていったりしたいんですけどーーーー
それはまだやりかたわかりません ; ;
<画像の準備>
1.ブログに使う画像を用意します。
幅は740pxにします。
(後述する、幅固定のテンプレートを使う場合です)
保存形式は gif|png|jpg ならOKです。
2.管理画面の「記事を書く」→「画像一覧」をクリックします。
3.画像をアップロードします。
4.「ファイル一覧」に画像があることを確認して、
画像を表示するためのURLをコピーしておきます。
右クリックすると、
ショートカットのコピー とか リンクのURLをコピーっていう
コマンドがあると思います。
<スタイルシートの編集>
1.「ブログの設定」→「テンプレート」をクリックします。
2.元になるテンプレートを選びます。
私の知識では幅100%の場合の画像設定がわからないので、
幅固定のものを選んでください。すみません^^;
3.テンプレート画面の表の「編集欄」にある「カスタマイズ」を
クリックします。
4.スタイルシート 内を編集します。下記の部分です。
※念のため、メモ帳などに編集前のスタイルシートを
取っておくと◎だと思います。
Ctrl+Zなども使えますが。
#banner,#subbanner{
background:#D30900 url(/_img/simple_red/head.gif) left bottom;
padding:0px 10px 10px 10px; }
↑ 私が編集したところを赤文字にしました。
url()
の中身(()の中)を、先にコピーした画像表示用のURLにすると、
タイトル部分の背景が指定した画像に変わります。
left bottom
のbottomをtopに変更すると、上記の画像が上端から
表示されるようになります。
padding:0px 10px 10px 10px
のそれぞれの値を変更すると、画像が表示される位置や
範囲が変わります。上下の範囲を変えたい場合は、
最初の「0px」の値を増減させるとよさそうです。
★トップページとか個別記事の上にある「プレビュー」を
クリックして、実際の表示を確かめながら数値を
調節するとよいと思います。
★テンプレートの名前が変えられますので、
変えておくといいと思います。
5.できあがったら「登録」ボタンを押します。
<テンプレート適用>
1.テンプレートを選ぶ画面に戻るので、
表の「選択可能一覧」欄にある「このテンプレートを使う」を
クリックします。
これでカスタマイズしたテンプレートが使えるはずです。
・・・できたでしょうか?^^;
つたない説明ですみません。。。