MENU

TCD Opinionテーマ ヘッダーを固定化&グローバルメニューのカスタマイズ

2019 6/25

TCD Opinionテーマのカスタマイズですが、今回はヘッダーの固定化と、それに伴うグローバルメニューのデザイン変更を説明します。

WordPressテーマ「Opinion (tcd018)」デモサイト
カスタマイズした「バレンシア・スペイン留学」サイト

目次

ヘッダー固定化

タブで色分け(管理画面でカテゴリー毎に設定)できるテーマですが、あえて単色とし、更に下へスクロールしても上部にタイトルやグローバルメニューが残るようしました。

固定化のための編集

肝心なのは、#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>  ← float解除(私の場合)
 <?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 &gt; 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 &gt; ul &gt; li").css("width",(aWidth-5)+"px");

▼▼▼

var aWidth = 1151/n_size;
$("#global_menu &gt; ul &gt; li").css("width",(aWidth-1)+"px");

▼ こうすると、最後のメニューのみ独立した感じにできる!
バレンシア・スペイン留学も「お問い合せ」を目立たせるために1つ別モノ扱い風にしています。

var aWidth = 1153/n_size;
$("#global_menu &gt; ul &gt; 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「Opinion」の大幅カスタマイズ

目次
目次
閉じる