TCD「Opinion」ヘッダー固定化＆グローバルメニューのカスタマイズ
TCD Opinionテーマのカスタマイズですが、今回はヘッダーの固定化と、それに伴うグローバルメニューのデザイン変更を説明します。
ワードプレステーマTCD
WordPressテーマ「Opinion」(tcd018) – ワードプレステーマTCD
膨大なコンテンツでも収録可能な大手ニュースサイトクラスの本格派デザイン大手のニュースサイトや新聞系のオンラインメディアのような本当に大きな情報サイトにも対応可能...
Optionテーマを使っていた時のトップページは下記です。
記事の内容（もくじ）
ヘッダー固定化
タブで色分け（管理画面でカテゴリー毎に設定）できるテーマですが、あえて単色とし、更に下へスクロールしても上部にタイトルやグローバルメニューが残るようしました。
固定化のための編集
肝心なのは、#header_wrap（style_pc.css）の position:fixed; z-index:999; width:100%; です。
#global_menu を #header_wrap 内に移動する必要があります。
OPTIONテーマ内のheader.phpをテキストエディタで開いて、ソースコード（6行あたり）の位置を確認してください。
</div><!-- END #header -->
</div><!-- END #header_wrap -->の下にあります。それを上記2行の上に移動してください。
でも、そのままですとデザインが崩れるので、float解除のコードを差し込みました。
▼ 下記のようにします！
<!-- global menu -->
<p class="clearfix"></p>
<?php if (has_nav_menu('global-menu')) { ?>
<div id="global_menu" class="clearfix">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'global-menu' , 'container' => '' ) ); ?>
</div>
<?php }; ?>
</div><!-- END #header -->
</div><!-- END #header_wrap -->
▼ float解除については、こちらがわかりやすいかも？
CSS初心者のためのfloatの理解とclearfixの使い方
なお、header_wrap の中に何を含めるかで height などは違ってきますので、その辺は固定ヘッダーに取り込む要素で適宜変更してください。
バレンシア・スペイン留学の場合は広告スペースが不要ですし、記事が長めなのでヘッダーを薄く押さえました。
また、box-shadow:0 5px 3px -3px #ccc; でシャドウをつけて、ヘッダーの固定感？をはっきりさせました。
#header_wrap { height: 141px; position:fixed; z-index:999; width:100%; box-shadow:0 5px 3px -3px #ccc; background:#f9f9f9;}
#header { width:1150px; height:132px; margin:0 auto; position:relative; }
#contents { width:1150px; margin:0 auto 20px; padding: 160px 0 0 0; }グローバルメニュー
グローバルメニューを固定ヘッダーに取り込んだので、width:1150px に変更。メニューをたくさん置けて嬉しい！（右サイドバーは、マイナスマージンを0にしヘッダー下に配置）
#global_menu { height:41px; width:1150px; margin:100px auto 0 auto; }
#global_menu > ul { height:36px; width:1150px; border-bottom:5px solid #ddd; margin:0 -30px 0 0; position:relative; }「jscript.js」ファイルでメニューの幅調整
var aWidth = 955/n_size;
$("#global_menu > ul > li").css("width",(aWidth-5)+"px");▼▼▼
var aWidth = 1151/n_size;
$("#global_menu > ul > li").css("width",(aWidth-1)+"px");こうすると、最後のメニューのみ独立した感じにできる！
バレンシア・スペイン留学も「お問い合せ」を目立たせるために1つ別モノ扱い風にしています。
var aWidth = 1153/n_size;
$("#global_menu > ul > li").css("width",(aWidth-3)+"px");
ドロップダウンメニューの幅
長めのメニューも1行で見せたいというので…。
#global_menu ul ul { display:none; width:200px; position:absolute; top:36px; left:0px; margin:0; padding:0; z-index:9; }
ヘッダー部分のカスタマイズ方法は以上です。
要所のみの説明（ソースも重要な部分だけ）なので、参考程度にしてください。
TCDの無料テーマ