Bloggerでドロップダウン(2階層目)とフライアウト(3階層目)付きの自作タブ ナビゲーションを実現する方法…page3

• Prev
• 1
• 2
• 3
• 4
• 5
• Next

Page 3 of 5 CSS コンテナのマークアップ編

先ずは header-wrapper から crosscol-wrapper について…

デザインの基本設定を… 当サイトのようにヘッダーに融合させるのか…
(画像クリックで拡大)

それとも…大き目な画像で crosscol-wrapper の領域一杯を使うのかを決めます…

後者の場合は以下の基本設定は必要ありません…

1ページ目の下準備ガジェットを表示させながら…

上記画像を参考に…ご自身のサイトに合わせて調整してください…

「デザイン」「HTMLの編集」で CSS に以下を記述します…

/* header-wrapper
-------------------------------------------------- */
#header-wrapper{background:#222;width:770px;margin:0 auto;border-top:1px solid #4d4845;border-right:2px solid #c0c0c0;border-left:1px solid #4d4845;-moz-border-radius:6px 6px 0 0;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;-goog-ms-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;}
/* crosscol-wrapper
-------------------------------------------------- */
#crosscol-wrapper{background:#222;width:770px;margin:0 auto;border-right:2px solid #c0c0c0;border-left:1px solid #4d4845;-moz-border-radius:0 0 6px 6px;-webkit-border-bottom-left-radius:6px;-webkit-border-bottom-right-radius:6px;-goog-ms-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;overflow:hidden;}
/* header
-------------------------------------------------- */
#header{background:#111 url(鉛筆画像のURL) no-repeat 220px 96px;margin:0 10px;height:115px;border-right:2px solid #c0c0c0;border-bottom:2px solid #c0c0c0;border-left:1px solid #4d4845;text-align:left;-moz-border-radius:0 0 6px 6px;-webkit-border-bottom-left-radius:6px;-webkit-border-bottom-right-radius:6px;-goog-ms-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;}
#header-inner{position:absolute;top:90px;left:145px;}
#header h1{margin:0;padding:5px 0 .25em 1em;line-height:1.2;text-transform:none;color:#f15b55;font-size:14px;font-weight:bold;font-style:italic;}
h1 a:link,
h1 a:visited{color:#4169e1;text-decoration:none;}
h1 a:hover{color:#8ac75a;}
#header .description{margin:0;padding:0 2em 2em;max-width:700px;text-transform:none;letter-spacing:.1em;line-height:1.1;color:#c0c0c0;font-size:10px;font-weight:normal;font-style:italic;}

「プレビュー」で確認しながら納得のスタイルになったら…

1ページ目の下準備での「#container1」の CSS は…

「Home」でのコンテナとして使いますので…

ご自身の「Home」のテーマカラーに「#F15B55」部分を変更してください…

カテゴリー別に必要な数だけ「#container2」「#container3」……

コンテナを追加します…

タブメニューの１階層目以外のページ用に「#container0」も追加します…

全てのページで同じタブメニューでイイや…

ってな方は「#container0」だけで OK です…

当サイトでは…下記の様になります…

/* Container
-------------------------------------------------- */
#container0{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #C0C0C0 solid;}
#container1{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #F15B55 solid;}
#container2{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #1E90FF solid;}
#container3{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #7777FF solid;}
#container4{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #2E8B57 solid;}
#container5{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #4169E1 solid;}
#container6{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #8AC75A solid;}
#container7{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #008080 solid;}
#container8{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #20B2AA solid;}
#container9{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #BDB76B solid;}

コンテナ毎にガジェットが必要になりますので…

「全てのページで同じタブメニュー」は…

Time goes by...INFINITY で実装中ですので…

比較検討してください…
Cocolog は閉鎖しました…

尚どちらのサイトも「border-bottom」は JavaScript で動的に生成していますが…

長くなるのでここでは解説いたしません…

後日…「Design」カテゴリーで記事にします…

次項はタブメニューの CSS マークアップです…

• Prev
• 1
• 2
• 3
• 4
• 5
• Next

Blogger Tips Current-Label : Blogger Template Customize