2006年03月14日
メニューのカスタマイズ
当ブログのトップページで使っているメニューのカスタマイズの紹介です。
こんな感じのメニューです。
まず,メニューの背景に使う画像を,こちらの記事で紹介したような物の中から選んでアップロードしておきます。
メニュー・見出しの背景画像 素材集 ブログカスタマイズ
■cssにこのような記述を加えます。
■トップページのhtmlの任意の場所に,このような記述を加えます。
これを保存してcssとトップページを再構築します。
そうすると,このようなメニューができます。
ちなみに背景を変えるとこんな感じになります。
フォントサイズなど各設定を変更すると,お好みのスタイルにカスタマイズできます。
だいたいこんな感じです。
興味のある方は,十分に注意してカスタマイズして下さいね。^^
まず,メニューの背景に使う画像を,こちらの記事で紹介したような物の中から選んでアップロードしておきます。
メニュー・見出しの背景画像 素材集 ブログカスタマイズ
■cssにこのような記述を加えます。
■トップページのhtmlの任意の場所に,このような記述を加えます。
これを保存してcssとトップページを再構築します。
そうすると,このようなメニューができます。
ちなみに背景を変えるとこんな感じになります。
フォントサイズなど各設定を変更すると,お好みのスタイルにカスタマイズできます。
だいたいこんな感じです。
興味のある方は,十分に注意してカスタマイズして下さいね。^^
トラックバックURL
コメント一覧
1. Posted by 「絶対セミリタイア」 yama 2006年03月14日 11:22
こんにちは。
cssこれだけいじれるなんてスゴイ
ですね!
自分は怖くてあまり手を出せません(^_^;
以前バックアップを取り忘れたので
えらいことになりましたよ!
応援クリック。
cssこれだけいじれるなんてスゴイ
ですね!
自分は怖くてあまり手を出せません(^_^;
以前バックアップを取り忘れたので
えらいことになりましたよ!
応援クリック。
2. Posted by ひでまろ 2006年03月14日 11:36
yamaさん どうもです〜
1年くらいやってると,だいたいわかってきます。^^
危険が伴うので注意ですが,挑戦も必要です。ヾ ^_^
1年くらいやってると,だいたいわかってきます。^^
危険が伴うので注意ですが,挑戦も必要です。ヾ ^_^
3. Posted by バック 2006年03月14日 15:01
ひでまろさんがサイト変えてからパッと目を引いたのがメニューの綺麗さでした。
いやーこの記事もひでまろさんらしく丁寧にやさしく書かれていますよね。ご苦労様です^^
いやーこの記事もひでまろさんらしく丁寧にやさしく書かれていますよね。ご苦労様です^^
4. Posted by meg【主婦なブログ。アフィリエイトでおうちママ】 2006年03月14日 15:45
ひでまろさん こんにちは^^
みんなでスーパー主婦になろう のmegです。
ちょうど、メニューを作ろうかなと思っているところで、この記事はうれしい!!!
今日は、リンクの変更のお願いにあがりましたm(_ _)m
手のあいたときなどに変更してくださると有難いと思います。
<タイトル>主婦なブログ。アフィリエイトでおうちママ
<URL>http://blog.livedoor.jp/meg_winny76/
URLは同じです。
では、どうぞよろしくお願いしますm(_ _)m
みんなでスーパー主婦になろう のmegです。
ちょうど、メニューを作ろうかなと思っているところで、この記事はうれしい!!!
今日は、リンクの変更のお願いにあがりましたm(_ _)m
手のあいたときなどに変更してくださると有難いと思います。
<タイトル>主婦なブログ。アフィリエイトでおうちママ
<URL>http://blog.livedoor.jp/meg_winny76/
URLは同じです。
では、どうぞよろしくお願いしますm(_ _)m
5. Posted by 笑顔整体の院長 2006年03月14日 16:06
ビルダーとかソフトつかったら簡単ですね^^
それにしてもMTいじってますが、
アップすると表示されません(泣)
なにがちがうのやら。。。
まだ勉強のよちがありますね。。。
それにしてもMTいじってますが、
アップすると表示されません(泣)
なにがちがうのやら。。。
まだ勉強のよちがありますね。。。
6. Posted by ひでまろ 2006年03月14日 19:03
バックさん どうもです〜
ウレシいですねぇ。^^
しょっちゅうイジれば覚えていくんですけど,すぐ忘れたりします。ヾ ^_^
ウレシいですねぇ。^^
しょっちゅうイジれば覚えていくんですけど,すぐ忘れたりします。ヾ ^_^
7. Posted by ひでまろ 2006年03月14日 19:07
megさん どうもです〜
了解です!
すぐに変更しておきますね。ヾ ^_^
了解です!
すぐに変更しておきますね。ヾ ^_^
8. Posted by ひでまろ 2006年03月14日 19:10
笑顔整体の院長さん どうもです〜
ビルダーだとテーブルタグ使っちゃうでしょ?
ダメなんです,使いたくないんです。
違いましたっけ?汗
MT苦戦してるみたいですね。
アップされないのは記事のことかしら...ヾ ^_^
ビルダーだとテーブルタグ使っちゃうでしょ?
ダメなんです,使いたくないんです。
違いましたっけ?汗
MT苦戦してるみたいですね。
アップされないのは記事のことかしら...ヾ ^_^
9. Posted by Gan 2006年03月14日 22:29
ひでまろさん、こんにちは。
なるほどですね〜。
とっても勉強になります!
私も挑戦せねば!です。
ありがとうございましたー。
なるほどですね〜。
とっても勉強になります!
私も挑戦せねば!です。
ありがとうございましたー。
10. Posted by ねお 2006年03月14日 23:16
ひでまろさんこんばんわ^^アフィリエイトビギナーのねおです。私は今週からCSSにチャレンジしています、難しいです・・・。この前の素材集をHPで使わせていただければと思います。現在HPをリニューアルしています。今回はドラゴンボール風のアフィリエイト入門サイトに変更中(なんだそれ)っす。「アフィリエイト+ブログ」よりも「アフィリエイト」1語のBIGキーワードに寄せるつもりです。完成したら報告にきます。その後、感想いただけたら幸いです。
11. Posted by rui 2006年03月15日 01:56
やっぱりビルダーじゃダメですか??
検索エンジン好みじゃないんですよね??
後、リンクの変更お願いできますか?
<URL>http://blog.livedoor.jp/requestmail1/
から
<URL>http://www.kudankita1.com/
<名前>アフィリエイト初心者を脱出したキッカケはこれだった
から
<名前>ブログでアフィリエイト道
に変更できますか?
お忙しいところ申し訳ございませんが
よろしくお願いします。
検索エンジン好みじゃないんですよね??
後、リンクの変更お願いできますか?
<URL>http://blog.livedoor.jp/requestmail1/
から
<URL>http://www.kudankita1.com/
<名前>アフィリエイト初心者を脱出したキッカケはこれだった
から
<名前>ブログでアフィリエイト道
に変更できますか?
お忙しいところ申し訳ございませんが
よろしくお願いします。
12. Posted by ひでまろ 2006年03月15日 08:50
Ganさん どうもです〜
cssを勉強するとSEOにも非常に役に立ちますので,ボチボチ覚えると良いと思います。
Ganさんなら楽勝でしょう。ヾ ^_^
cssを勉強するとSEOにも非常に役に立ちますので,ボチボチ覚えると良いと思います。
Ganさんなら楽勝でしょう。ヾ ^_^
13. Posted by ひでまろ 2006年03月15日 08:53
ねおさん どうもです〜
なんでも使ってください。^^
ドラゴンボール風のサイト!興味津々です。
「アフィリエイト」で勝負するとは男の中の男ですね?(^_^;
報告楽しみにしてますので頑張って下さい。ヾ ^_^
なんでも使ってください。^^
ドラゴンボール風のサイト!興味津々です。
「アフィリエイト」で勝負するとは男の中の男ですね?(^_^;
報告楽しみにしてますので頑張って下さい。ヾ ^_^
14. Posted by ひでまろ 2006年03月15日 09:00
ruiさん どうもです〜
ホームページビルダーだけに頼っているとタグがグチャグチャになります。
それを理解して修正できれば問題ありません。
なのでなるべく勉強した方が良いのですよね。^^
リンクの変更了解です!ヾ ^_^
ホームページビルダーだけに頼っているとタグがグチャグチャになります。
それを理解して修正できれば問題ありません。
なのでなるべく勉強した方が良いのですよね。^^
リンクの変更了解です!ヾ ^_^
18. Posted by シュウ 2006年07月12日 19:01
私のライブドアブログのCSS内で
Ctrl+Fを使って下記の部分を検索したんですが見つからないですが・・・。
.topmenu{
width:100%;
background:#fff;
margin:0px 0px 10px 0px;
text-align:left;
border:1px solid #c0c0c0;(←外枠の色を指定 これは消して^^)
}
.topmunutitle{
width:100%;
color:#000;
font-size:13px;
font-weight:bold;
line-height:200%;
padding:0px 0px 0px 5px;
background-image: url("あなたがアップロードした画像のURL");
すいません。変更があったということはないでしょうか?
Ctrl+Fを使って下記の部分を検索したんですが見つからないですが・・・。
.topmenu{
width:100%;
background:#fff;
margin:0px 0px 10px 0px;
text-align:left;
border:1px solid #c0c0c0;(←外枠の色を指定 これは消して^^)
}
.topmunutitle{
width:100%;
color:#000;
font-size:13px;
font-weight:bold;
line-height:200%;
padding:0px 0px 0px 5px;
background-image: url("あなたがアップロードした画像のURL");
すいません。変更があったということはないでしょうか?
19. Posted by blackcoffee 2008年08月02日 16:40
これですね!
詳しく書いてあるので
勉強になります。
ありがとうございます。
詳しく書いてあるので
勉強になります。
ありがとうございます。