バナーを画像に NO.10
今の状態ではぜんぜんおしゃれじゃないですね。そろそろスタイルシートで見た目を良くしていきましょう♪この見本のように、タイトルバナーを画像にしたいと思います。
変更前の状態
【画像を用意する】
まず背景になる画像を用意します。幅は780px。高さは任意でかまいません。
ちなみに私が用意したのは、写真素材を配布されているミントBlueさんからお借りしたものです。
とてもきれいな写真素材がたくさんあり、ブログのタイトルバナー用の素材も配布されています。
もし、使われるときは規約をよく読んでからお願いしますね。
画像の文字入れのしかたは番外編でご紹介します。
【画像をアップロードする】
用意した画像をアップロードします。
画像のアップロードの方法がわからない方はコチラ
【スタイルシートを修正する】
画像を表示させるようにスタイルシートを修正していきます。
現在のバナー関連のスタイルシートは下記のようになっています。
#banner {
position: relative;
width: 780px;
background: #a3b8cc;
}
#banner a {
color: #ffffff;
text-decoration: none;
}
#banner a:hover {
color: #ffffff;
}
これを次のように修正します。
/*バナー関連*/
#banner {
background-image:url('画像のURL');
background-repeat: no-repeat;
text-align: left;
padding:0px;
height: 150px;
}
#banner-img {
display:block;
/*== ブロックレベル表示 ==*/
}
#banner a {
color: #FFFFFF;
}
#banner h1 {
display:none;
}
#banner h2 {
display:none;
}
変更後はこうなりました
どうですか？タイトルバナーを変えただけで雰囲気が変わったでしょ(*^^)
« スタイルシートもダイエット！ NO.9 |
トップページ
| メインページのエントリーフッターの投稿者と日時とパーマリンクを削除する NO.11 »
トラックバック
MobavleTypeカスタマイズ：バナーを画像に！ from ぼすぱんBlog ★ 毎日BB ・ウクレレ・雑貨気分
ブログのタイトルも変更して、心機一転、バナーも写真画像にしてみました。 画像の元...
トラックバック日時: 2006年08月05日
コメント
はじめまして♪
こちらの記事を参考にさせていただいて、私もタイトルバナーを写真にしてみました。ありがとうございます。ＴＢさせてもらいます。
sacopandaさん こんにちわ♪
コメントありがとうございます。
お役に立てて嬉しいです(#^-^)
はじめましてYUさん！
とてもいい感じのサイトですね！
私もバナーに写真を表示させたいのですが
うまく行きません画像はどのフォルダにアップ
ロードすれば良いのでしょうか？
それと画像のURLとはhttp://から始まるアドレスのことですか？
本当に初心者なので愛の手をさしのべて下さい。
宜しくお願いしますｍ（－－）ｍ
知花さん こんにちわ(*^-^)
CSSを拝見しましたが、バナー背景に指定している画像のURLに画像がアップロードされていないようです。
私の場合ですが、下記のように作業しています。
MTの管理画面メニューのファイルのアップロードをクリックすると、ファイルのアップロード用のポップアップ画面が出ます。ここで「ファイル」に自分のPCにある画像を指定します。
「アップロードパスを設定」をクリックして「images」と記入します。これはブログのアドレスの下に「images」というディレクトリを作って、この中に画像ファイルをアップロードする、という意味です。画像関係をアップロードするときは「imgaes」の中に入れておくと整理されていいと思います。
「アップロード」ボタンをクリックして画像がアップロードできたら、あとはアップロード用のポップアップウインドウは閉じてしまってOKです。
スタイルシートのバナー背景を指定するところで、アップロードした画像のURLを記述します。
上のやり方だとアップロードURLは
ブログのURL/images/○○○.jpg
のようになります。
また何かありましたら、どうぞ～♪
YUさん助けて下さい。。。。
せっかく教えてもらったのに・・・・
やはり何度やってもバナーに写真が表示出来ません、
教えどうりにimagesフォルダに写真を入れてurl(http://nobuyuki.boy.jp/blog/images/p1010224.jpg)指定をやたのですが、色々やって又初期化して最初からやってみたのですが、出来ませんでした、ヘルプミ～～～（＞＜）
知花さん こんにちわ。
ブラウザで画像のアドレスにアクセスしてもエラーになるので、画像のアップロードがうまくいかなかったのかも。
FTPソフトでサーバーに接続して、
下のアドレスの場所に画像ファイルがあるか確認してみてください。
もし無かったら、そのままFTPソフトを利用して画像をアップロードしてみてくださいね。
http://nobuyuki.boy.jp/blog/images/p1010224.jpg
できるまで応援します。ファイトｐ(*^-^*)ｑ
YUさんこんばんわ！
ありがたいです、とても心強いです！
早速FTPソフトでアクセスして見ました、p1010224.jpg有りました。
この後はどうした方が良いでしょうか？
宜しくお願いしますｍ（＞＜）ｍ
知花さん こんにちわ。
昨日はコメントにお返事できなくてごめんなさい。
昨日コメントいただいたあとでヘッダー画像のアドレスにアクセスしてみたら
画像が表示されなかったのですが、サーバーにはアップしてあるということなので
なんでかな～と調べていたところです。
先ほどブログにアクセスしたら表示されなかったのですが
ブログを削除されたのですか？
YUさんこんにちわ！
いえいえこちらこそ、いつまでも出来なくてすいません（－－；）ブログは削除してないですよ。
すいません今日も朝からやっていて色々やりすぎて
分からなくなっていたので、初期化とかやっていました
、その時にアクセスしたかも？
画像の方はホームページビルダーであげてみましたがこれでもいいんでしょうか？
確認宜しくお願いしますｍ（＞＜）ｍ
知花さんへ
画像アップロードされてましたねv(^ー゜)
後はスタイルシートで指定すればOKだと思います。
作業する手順とベストかなぁと思うのは、
今の状態のテンプレートをデフォルトに戻して最初からやってみたほうがいいような気がします。
このテンプレートは活かしておきたいのであれば
テンプレートのソースをテキストエディタ（メモ帳など）に保存しておけばOKです。
いかがでしょうか(*^-^)
やった～（＾＾）/
yuさんありがとうございました！！
やっと出来ましたありがとうございます、
なぜできなかったのか不思議です？
本当に感謝感謝です！！
これかれもお手数かける時があるとおもいますが
宜しくお願いします。
本当にありがとうございましたｍ（__)m
できました～！！
YUさん出来ましたよ！
色々ありがとうございました。
ｍ（__)m
感謝感謝です！
知花さん 良かったです！
おめでとう(*^-^)
えっと、でもブログが表示されませんが、カスタマイズ中なのかな？
また時間を置いて遊びに行きますね☆
いつもお世話になりますyuさん（^^)/
今日も初歩的な質問ですいません、バナー部分の左側に白い立線を消したいのですがどうすればよいでしょうか？？
忙しいと思いますが宜しくお願いしますｍ（__)ｍ
YUさんいつもお世話になっています（＾＾）/
またまた初歩的な質問ですいません↓
バナーの左側に白い縦線が出でてなかなか消すことが出来ませんどうすれば消せるでしょうか？
忙しいと思いますが宜しくお願いしますｍ（＞＜）ｍ
知花さん こんにちわ(*^-^)
とてもかっこいいサイトですね！
白いすじですが、バナー画像を拝見したら
画像にグレーの枠があるようです。
この枠の部分がすじとして見えているんだと思います。
ロゴの背景部分をすべて真っ黒にしてみてくださいｐ(*^-^*)ｑ
YUさんできました！ありがとうございますｍ（＾＾）ｍ
ひと目で原因がわかるのは凄いです。
デザインも褒めてもらって恐縮ですありがとうございます！
デザインなのですがナビゲーションバーをボックスにして色
をつけたいのですがどうプログラムするのか分からずこちらも
悩んでいますどうか良きアドバイス宜しくお願いします☆
画像も添付してみますうまくいくか？
知花さん こんにちわ☆
バナーの件解決して良かったです♪
ナビゲーションバーの件ですが、
今、自宅を離れていてすぐには詳しくお返事できません。ごめんなさい（＞＜）
来週はじめには戻る予定です。
こちらの記事が関連があるかと思いますので、
参考にしてみてください。
５ページあるので「次へ」で次のページを開いて見ていってくださいね。
Allabout ナビゲーションバーをCSSで装飾
YUさん早速の返事ありがとうございます☆
いつもいつもお忙しい中本当にありがとうございます
ｍ（＿＿）ｍ
今回も素敵なアドバイスをもらったのでしばらく奮闘して
みます！
良い連絡待っていて下さいね（＾＾）/
