=Love Magic=

以前にも一度「SLMaMeはカスタマイズしにくい」と　のたまった私ですが

だからと言って、バナーくらいはいじりたいものです。

（元々のは白で横縞が入ってるから、ブログ説明が読みにくいので嫌だったんです。）

試行錯誤の末、何とか落ち着きました

CSSをいじりましたが、結局行ったのは簡単なことだけ。

一応、私のやった方法を書き残しておきます

0.　バナー画像を作成

　　私の場合は　1800×255　（ピクセル）　の画像にしました。




1.　管理画面の「記事の投稿」で画像をアップロード

　　その際　「公開」　ではなく　「下書き」　にしました。
　　
　　「公開」　にするとTOPバナーと同じ画像だけの文章なし記事がアップされてしまいます。　

　　確認画面で表示されるURLをコピーし、メモ帳に貼り付けておきました。


2.　設定する画面を開く

　　管理画面TOPの　「ブログの設定」　項目内の　「テンプレート」　をクリック

　　「選択可能一覧」　で　「使用中」　になっているテンプレートの　　「カスタマイズ」　をクリック

　　「スタイルシート」の入力フォーム　に記入されている設定を変更しました。


3.　デフォルトを保存しておく

　　スタイルシート（CSS）をいじりまくって元の設定が解らなくなる事を防ぐために

　　最初に開いた時にすべてをコピーし、メモ帳に貼り付け　保存しておきました。

　　これで何でもありになりましたｗ


4.　バナーが設定されている行をみつける

　　「スタイルシート」の入力フォーム内で　”　sub　”　と検索し

　　”　#banner,#subbanner　”　と記述された行を探しました。


5.　トップバナーを作成した画像に置き換える

　　まず　”　url　”と書かれている後ろのカッコ内に1.でコピーしておいたアドレスを上書きし、　

　　項目の最後に　”　｝　”　があるので、その直前に　width:1400px; height:265px　と入れました。

　　これは私の貼り付けた画像のサイズに合わせたものです。

　　”　width　”　が幅、　”　height　”　が高さですので　プレビューで確認しながらベストな位置に調整しました。


6. ブログタイトル文字を装飾する

　　すぐ下に　”　#banner a　”　という項目があります。

　　私のスタイルシートでは、ここの｛｝内を　以下のように変えました。

　　margin:20px;　　←文字開始位置の指定
　　padding :0px;　　←同上
　　color:#FF0000;　　←文字色（この場合、赤）
　　font-family: "Times New Roman", Times, serif;　　←フォント
　　font-size: 65px;　　←文字の大きさ
　　font-weight: bolder;　　←文字の太さ（この場合、ボールド）
　　font-style: italic;　　←文字の傾き（この場合、イタリック）

　　これで設定すると、このブログのTOPバナーのタイトル文字のようになります。


7.　文字色を統一させる

　　また、すぐ下に　”　#banner　”　で始まる項目がいくつかあります。

　　ブログタイトル文字自体がリンクになっているので、クリックした時や後の文字色が設定されています。

　　”　color:　”　の後ろに先ほど指定した文字色を上書きしました。

　　ちなみに、、文字色は　記事投稿画面で 本文の色を変更するために　「文字に色をつける」　という
　　
　　ボタンがあるので、そこから好きな色の色番号を調べることができます。

　　ブログの説明文は　”　#subbanner　”　項目で色の変更ができます。


8.　画面下の「登録」を実行して作業終了



以上は、私がした作業工程です。

これで、ちょっぴりブログのイメチェンができて　ちょっと満足です