Movable Typeって設置した初期の状態のままだとちょっとさみしいですよね？
特に自分の場合はタイトルバナー（最上部のタイトルが書かれている部分）が、背景色に文字だけなのはさみしくて嫌だったのでタイトルバナーを画像にする作業をしてみました。
あとで失敗例についても触れますが、いろんなサイトを見て何度も失敗してようやく魅せて稼ぐアフィリエイト作成情報局のタイトルバナーの背景に画像を入れてみよう！に辿り着いたのです。
このやり方だといじるのもスタイルシートだけで、あとは画像を指定した場所にアップロードすればいいので簡単でした！(^^)
最初に使いたい画像を用意しアップロードします。
次にスタイルシート内にある#banner部分を修正します。
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
/* background-color: #FF9900;*/
background-image: url(http://画像が置いてあるURL/title_bar.gif);
text-align: left;
padding: 15px;
border-bottom: 1px solid #FFFFFF;
height: 120px;
}
その通りコピーをしてbackground-imageのURLを画像をアップロードしたURL+画像名にし、heightのところで画像の高さを調整すれば最初の画像のようにタイトルバナーが画像に変わるのではないかと思います。
この方法だとスタイルシートのみの変更ですべてのページに画像が表示されるので便利です。
その際の注意点ですが・・・。
・指定したURLと画像をアップロードしたURLが一致していないといけない
・画像の大きさを調整すること
（ここでは幅760pxで設定）
URLが一致していないと当然画像が表示されません。
画像の大きさについてはブログの幅を設定していない人は支障ないかもしれないですが、うちのブログは全体の幅を770pxで設定しているので幅760pxで設定しています。
これを越えてしまうと前回アップしたようなカラム落ちやデザイン自体が崩れてしまうこともあると思います。
あと悩まされたのはこれ、です。
画像の大きさ自体は760x120でアップしているのに、height: 120pxでは上のように画像がはみでてしまったので、よくわからないながらも高さを90pxに小さくして一番上のようにタイトルバナーに画像を設置することができました。
カフェテラスえの木さんのところでも、タイトルバナーを画像にしたみたいです。
うちとは画像の挿入の仕方が違うので参考になるのではないかと思います。
詳しくは「タイトルバナー部に画像を入れてみた」に書いています。
|
コメント
何じゃ何じゃ！同じ事を遣っているのう、爺も画像を入れて見たのじゃよフォッフォッフォ～
>山の爺さま
ほんとですね〜、同じことを記事にしてますね。（笑）
画像見に行きますね〜。
今度こそ関連ある記事なのでトラックバックさせてもらいますね！！
あとで付け加えて紹介もさせてもらいます。(^^)
素晴らしいサイトで感動してます。
ところでこの作業をMT4で行う場合は二種類あるのですが、どのスタイルシートを修正すれば良いのでしょうか？
又、現在のどちらのスタイルシートにも#bannerの記載がありません。
どうぞ宜しくお願い致します。
☆yuuさん
yuuさん、お返事遅くなってしまってごめんなさい。
ん〜っ・・・。
情報ないんですね・・・。(^^;)
うちのサイトはまだMT4に移行していなく、3.3までの情報しか持っていないんですよ。
さっき、いろいろ探してみたのですが、MT4のスタイルシートに関する情報皆無ですね。（苦笑）
また、情報がわかり次第yuuさんのサイトにでも書き込みしに行きますね。