ヘッダー(バナー)に画像を設定する
ご要望がありましたので、
上部ヘッダー(ブログタイトルが表示されている所)に画像を表示する方法をご紹介します。
3.31-jaの初期状態のもので説明します。
スタイルシートで設定するのが一番便利だと思います。
まず、初期画面はこんな感じです。
クリックで大きい画面
スタイルシートの中から、バナーのデザインを決めているところを探します。
#banner {
width: 710px; /* necessary for ie win */
background: #a3b8cc;
}
ここで、横幅が710pxと設定されていますのでそれと同じか、小さい画像を用意します。
この画像を入れてみます。(画像は小さくしています)
#banner {
width: 710px; /* necessary for ie win */
background: #a3b8cc;
background-image: url(http://www.***/***/banner.gif);
background-repeat: no-repeat;
background-position: left top;
}
赤文字の部分を追加します。
background-image: url(http://www.***/***/banner.gif)
で画像のURLを指定します。 http～は、画像を置いてあるURLを入れてください。
background-image: url(/***/banner.gif)
というようにスタイルシートの位置から見た画像のある場所を入れることもできます。
スタイルシートを保存、再構築すると
クリックで大きい画面
バナー画像が表示されました！
さらに色々設定する事ができます。
たとえばこの画像を、
上記方法で表示すると、こうなります。
クリックで大きい画面
background-repeat: ** を変更する事で、画像の表示方法を変える事ができます。
background-repeat: no-repeat; 画像を繰り返さない。上の画像になります。
background-repeat: repeat-x; 横方向のみ繰り返す。
background-repeat: repeat-y; 縦方向のみ繰り返す。
background-repeat: repeat; 敷き詰める。*設定しなければこれになります。
background-position: ○○ △△; を変更する事で画像の位置を変える事ができます。
○○の位置に、横方向の位置を入力します。
left（左端）、center（中央）、right（右端）、 50%というような割合でもできます。
△△は、縦方向の設定です。
top（上端）、center（中央）、bottom（下端）、 50%というような割合でもできます。
例えば、中央の下端にする場合、
background-position: center bottom;
このようになります。
上手く利用すれば小さい画像で済みますので、
色々試してみてください。
このカスタマイズはスタイルシートを使うものなので、
どのバージョンでも、MT以外でも使えます。
3.33-ja
Template by
ありがとうございます！！[ハート]
分かりやすい解説をみて、なんとか変更できました！！
で・・・、実は3.31のオリジナルテンプレートを使って、カテゴリーを開いた時の一番上に表示されるタイトルの「＊＊＊＊アーカイブ」っていうところの文字の大きさや色を変えるのはどうやるんですか？
他にも背景の色や文字の色・大きさなんかを変更するのもわからなくって、？？？です。
こんなことは初歩的すぎて聞くのも恥ずかしいのですが、よろしくお願いします。[うっとり]
初心者丸出しでごめんなさい・・・。[ゲッソリ]
コメント時刻: 2006年07月21日 16:49
>わかめさん
バナー成功されたようでよかったです[♪]
このブログは正式サポートサイトではありませんので、
HTMLやスタイルシートなどの基本的な質問すべてに答えていくことはできません。
ごめんなさい。[涙]
わかめさんのブログをより良いサイトにするためにも、
まずは一通りHTMLとスタイルシートの基本を覚えた方がいいかもしれません。
「とほほのＷＷＷ入門」さんがすごくオススメです。
こちら→http://www.tohoho-web.com/
ある程度理解する事で、他のカスタマイズもやりやすくなるはずです。
「＊＊＊＊アーカイブ」の大きさを変える一番手っ取り早い方法は、
その文字が＜h2＞で囲まれていますので、＜h3＞、＜h4＞などにするか
＜div＞にしてしまう事で文字を小さくする事ができます。
スタイルシートで＜h2＞の文字の大きさを指定する事もできますが、
他の所まで変わってしまうのでやめた方がいいかも[ビックリ]です
コメント時刻: 2006年07月21日 18:29
ごめんなさ～い。[ゲッソリ]
MTを使っている人って優秀な人が多いのか、解説サイトはたくさんあるのに基本的なことを説明しているところってない様な気がするので・・・。
あんまり基本的だから、必要ないからかもしれませんが。[涙]
お勧めのサイトで勉強してみますね！
ありがとうございます！！[ハート×２]
コメント時刻: 2006年07月22日 08:52
>わかめさん
HTMLやスタイルシートはMTのカスタマイズとはまた別物ですので
解説している人がいないのだと思います。
私も何も分からない状態からサイト作りをはじめて
「とほほのＷＷＷ入門」さんなどで勉強しまくって少しずつ覚えていきました。
実は今でも「とほほのＷＷＷ入門」さんを利用しまくっています[！]
やっぱり、HTMLなどを専門で書いてくださっているので
分かりやすいし、探しやすいし、詳しいです。
私もまだまだ勉強中です。
一緒にがんばりましょ～！[テレ]
コメント時刻: 2006年07月22日 09:57
わたしも、ヘッダーに画像を貼り付けたくて、
あれこれ書物も読んだのですが、、、
最初にこちらのサイトを発見できたら！と思いました。
とても助かりました。ありがとうございます。[ニコッ]
コメント時刻: 2006年10月22日 22:25
≫とだかせいちさん
お役に立てましたようで嬉しいです[ポッ]
同じ要領で、ヘッダー以外にもスタイルシートで画像設定できますので
色々お試しください～。
コメント時刻: 2006年10月23日 16:49