Page 3 of 5 CSS コンテナのマークアップ編
先ずは header-wrapper から crosscol-wrapper について…
デザインの基本設定を…
Sepia Memories on YouTube
…のようにヘッダーに融合させるのか…
(画像クリックで拡大)それとも…大き目な画像で 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 です…
Sepia Memories on YouTube
…では…下記の様になります…
/* 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 で実装中ですので…
ココログのサイトは削除しました…
比較検討してください…
尚どちらのサイトも「border-bottom」は JavaScript で動的に生成していますが…
長くなるのでここでは解説いたしません…
後日…「Design」カテゴリーで記事にします…
次項はタブメニューの CSS マークアップです…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿