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の記載がありません。
どうぞ宜しくお願い致します。
突然ですが、コミュニケーションサイトを運営しております。
p-netbanking と申します。当サイトでは、
「人気ブログをランキング」を重要なテーマとし、
ブロガーの方々の、コミュニケーションの場を提供すると同時に、
どなたでも無料で参加でき、よりエンターテイメントに、
気軽に立ち寄れるサイトを目指し、日々、努力をしています。
貴ブログ様のご登録の御願いにコメント欄を
お借りしてご案内をいたしました。
是非とも、貴ブログのご登録、及び、
ランキング参加を御願いできれば幸いです。
こちらのサイトです。
http://www.p-netbanking.jp
検索バー横にブログ登録フォームがあります。
また、検索サイト・ランキングサイト等より訪問しております。
重複してご案内になりましたらお詫び申し上げます。
なお、全く興味のない方は、削除してください。
失礼いたします。
Every one knows that life seems to be high priced, nevertheless different people need money for various issues and not every one earns enough cash. Therefore to receive fast personal loans or bank loan should be a right way out.
What a great rsoeucre this text is.
szIWtC xumbrlmmeqks