新しいWordPressの公式テーマ「TwentyTwelve」
シンプルでかっこよくてしかもレスポンシブデザイン!
ということで、 今回はこの「TwentyTwelve」をカスタマイズして行きたいと思います。
まず初めに
ここで紹介する方法は素人の私が素人なりにいじったものなので、同じようにやってテーマが壊れてしまっても責任は取れません。自己責任でお願いします。またテーマをいじる際は必ずバックアップをとるようにして下さい。
また、本体のテーマを極力いじらずに見た目を変更することの出来る子テーマもオススメです。
というか、私は子テーマを使って書いています。直接コードを書いている人は異なる結果になるかもしれません。ごめんなさい。子テーマの人は結果の欄のコードをそのままコピペしていけば同じ結果になる、はず!
TwentyTwelveは子テーマをwp_enqueue_styleをつかって呼び出すべきなのですが、これを読んでいるレベルの人は気にしなくていいとおもいます。気になったらぐぐってみてください。
カスタマイズ1:ナビゲーションバーを動かす のカスタマイズ後
では実際にやってみましょう!
ヘッダー (header.php)を開き
シンプルでかっこよくてしかもレスポンシブデザイン!
ということで、 今回はこの「TwentyTwelve」をカスタマイズして行きたいと思います。
まず初めに
ここで紹介する方法は素人の私が素人なりにいじったものなので、同じようにやってテーマが壊れてしまっても責任は取れません。自己責任でお願いします。またテーマをいじる際は必ずバックアップをとるようにして下さい。
また、本体のテーマを極力いじらずに見た目を変更することの出来る子テーマもオススメです。
というか、私は子テーマを使って書いています。直接コードを書いている人は異なる結果になるかもしれません。ごめんなさい。子テーマの人は結果の欄のコードをそのままコピペしていけば同じ結果になる、はず!
TwentyTwelveは子テーマをwp_enqueue_styleをつかって呼び出すべきなのですが、これを読んでいるレベルの人は気にしなくていいとおもいます。気になったらぐぐってみてください。
カスタマイズ1:ナビゲーションバーを動かす のカスタマイズ後
では実際にやってみましょう!
ナビゲーションメニュー(メニューバー)の位置をタイトルの上に変更する
ヘッダー (header.php)を開き
ナビゲーションバー関係の部分を切り取り
<nav id="site-navigation" class="main-navigation" role="navigation">中略</nav><!-- #site-navigation -->
その上にあるヘッダータイトル関係の部分の上に持ってきます。
<hgroup>中略</hgroup>
.site-header {padding: 24px 0;padding: 1.714285714rem 0;}
ヘッダー部分の上余白を0へ
.site-header {padding: 0;}
.main-navigation {margin-top: 24px;margin-top: 1.714285714rem;text-align: center;}
ナビゲーションメニューの上の余白を0へ
.main-navigation {margin-top: 0px;text-align: center;}
.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {border-bottom: 1px solid #ededed;border-top: 1px solid #ededed;display: inline-block !important;text-align: left;width: 100%;}
topのボーダを0pxへ
.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {border-bottom: 1px solid #ededed;border-top: 0px;display: inline-block !important;text-align: left;width: 100%;
}
子テーマを使っている人は↑を無視して
.main-navigation ul.nav-menu{border-top:0px;}