新しいWordPressの公式テーマ「TwentyTwelve」
シンプルでかっこよくてしかもレスポンシブデザイン!
ということで、 今回はこの「TwentyTwelve」をカスタマイズして行きたいと思います。

まず初めに

 ここで紹介する方法は素人の私が素人なりにいじったものなので、同じようにやってテーマが壊れてしまっても責任は取れません。自己責任でお願いします。またテーマをいじる際は必ずバックアップをとるようにして下さい。
 また、本体のテーマを極力いじらずに見た目を変更することの出来る子テーマもオススメです。
というか、私は子テーマを使って書いています。直接コードを書いている人は異なる結果になるかもしれません。ごめんなさい。子テーマの人は結果の欄のコードをそのままコピペしていけば同じ結果になる、はず!
 TwentyTwelveは子テーマをwp_enqueue_styleをつかって呼び出すべきなのですが、これを読んでいるレベルの人は気にしなくていいとおもいます。気になったらぐぐってみてください。


カスタマイズ1:ナビゲーションバーを動かす のカスタマイズ後
20130227153241
では実際にやってみましょう!




 ナビゲーションメニュー(メニューバー)の位置をタイトルの上に変更する 

ヘッダー (header.php)を開き
ナビゲーションバー関係の部分を切り取り
<nav id="site-navigation" class="main-navigation" role="navigation">
   中略
</nav><!-- #site-navigation -->
その上にあるヘッダータイトル関係の部分の上に持ってきます。
<hgroup>
   中略
</hgroup>

するとタイトルとナビゲーションメニューが入れ替わります。

 20130227150556

なんだかナビゲーションメニューの上がスカスカですね。詰めましょう。 

style.css を開いて
.site-header {
padding: 24px 0;
padding: 1.714285714rem 0;
}
ヘッダー部分の上余白を0へ
.site-header {
padding: 0;
}
書き換えます。

20130227151642

おぉー、近づきました。でももっとくっつけます。
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}
ナビゲーションメニューの上の余白を0へ
.main-navigation {
margin-top: 0px;
text-align: center;
}
20130227152416

を、くっつきました。でも、上にうっすらとのこる灰色のボーダーが気になります。
.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;
}
だけを追加して下さい。後からもう一度 inline-blockを指定してしまうと、画面幅が狭くなった時の表示が崩れます。

20130227153241


 微妙すぎてわからないのですが、消えました。消えたはずです!


では今回はこの辺で。 


スポンサードリンク--------------------------