WordPressのテーマ、Twentyfifteenは画面の左側に固定されたサイドバーの中にヘッダが格納されているため、メニューなどの画面遷移情報を左に集約し、右側のコンテンツを上下ギリギリまで表示させることができます。
またスペースも充分とられているので、ブログなど読み物に特化したサイトはとても見やすくなると思います。
しかし、サイドバーのコンテンツが最後まで来るとスクロールがピタッと止まる動作が好きになれず。
また自分のテーマでは、上部に木目メニューをつけるのを最初から決めていたのでサイドバーからヘッダを出したいし。
あと、サイドバーを右にして、スクロールバーを含めコントロールは右側に集約したい。
ということで、以下の点をカスタマイズすることにしました。
・サイドバー固定を止めてスクロール可能にする
・ヘッダをサイドバーから分離する
・サイドバーを右側に移動する
サイドバー固定を止めてスクロール可能にする
サイドバーのスクロールを制御するには、position:fixed を使います。
twentyfifteenのサイドバーのCSSはこれ。
|
1 2 3 4 5 6 7 |
.sidebar { float: left; margin-right: -100%; max-width: 413px; position: relative; width: 29.4118%; } |
・・・fixedがない 
functions.php で設定してるのかなと思いましたが、そのようなモノは確認できず。
こういった、ソースを探しても見つけられない場合は、いつもFirefoxの機能拡張Firebugを使います。
すると、
|
1 2 |
element.style div id="sidebar" class="sidebar" style="position: fixed; bottom: 0;" |
という設定が表示されました。
element.style というこことはJavaScriptで設定してるってことですね。
ありました。jsフォルダの中の function.js
そこに // Sidebar scrolling. という設定を発見。
まるっと削除してやったわ。 
ヘッダをサイドバーから分離する
一般的なテーマでは、ヘッダ情報は header.php に、サイドバー情報は sidebar.php に格納されています。
しかしTwentyfifteenはサイドバーの中にヘッダがあります。
ファイルを見ると、header.php の最後で sidebar.php を読み込んでいるので、header.php はヘッダでもあり、サイドバーでもあり、ということになります。
私が目指しているのは一体化しているメニュー情報とヘッダ情報を分離することなので、サイドバーのクラス secondary を sidebar から外します。
まずは header.php の最後
|
1 2 3 4 5 6 |
</header><!-- .site-header --> <?php get_sidebar(); ?> </div><!-- .sidebar --> <div id="content" class="site-content"> |
これを
|
1 2 3 4 5 6 |
</header><!-- .site-header --> </div> <!-- ここでsecondaryを閉じる --> <?php get_sidebar(); ?> </div><!-- .sidebar --> <div id="content" class="site-content"> |
と1行加えて、sidebar.phpの最後
|
1 2 3 |
<?php endif; ?> </div><!-- .secondary --> <?php endif; ?> |
これを
|
1 2 3 |
<?php endif; ?> <!-- .secondary --> <!-- すでに閉じているので削除 --> <?php endif; ?> |
に変更します。
そしてブレイクポイント「Desktop Small 955px」で class=”sidebar” の幅を100％にします。
twentyfifteenの
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.sidebar { float: left; margin-right: -100%; max-width: 413px; position: relative; width: 29.4118%; } .secondary { background-color: transparent; display: block; margin: 0; padding: 0; } |
これを以下に変更。サイドバーの役割が secondary に移動するため、一部設定を sidebar から secondary に移動します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.sidebar { margin: 0; position: relative; width: 100%; } .secondary { float:left; background: transparent; display: block; margin-right: -100%; padding: 0; max-width: 413px; position: relative; width: 29.4118%; left:-8%; <!-- ズレ調整 --> } |
恐ろしくズレるので、site-header と secondary をお好みの位置に変更します。
|
1 2 3 4 5 6 |
.site-header { background-color: transparent; border-bottom: 0; margin: 20% 0; <!-- sidebarの20％がページ全体の20％に変わっている --> padding: 0 20%; } |
「ヘッダのクラス名が sidebar 」というのもどうかと思いますが クラス名変更が面倒なのでやってません。
以上でヘッダの位置は変更できましたが、メニューはまだサイドバーにあります。
これを上部に移動したいところですが、自分の場合は「移動」せずに「複製」しました。
なぜかというと、移動のみだと画面の横幅が狭くなった際に表示されるトグルメニューからメニューが消えてしまうのです。
メニューもレスポンシブ対応にして表示するなら移動でもいいと思いますが、自分はトグルに格納することにしました。つまり、
ヘッダ（ sidebar ）のメニューはPCで表示、スマホで非表示
サイドバー（ secondary ）のメニューはPCで非表示、スマホで表示
これを実装する手順ですが、header.php のこの場所に
|
1 2 |
</div><!-- .site-branding --> </header><!-- .site-header --> |
sidebar.phpから複製したデータに新規クラス名を指定して組み込みました
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
</div><!-- .site-branding --> <?php if ( has_nav_menu( 'primary' ) ) : ?> <!-- 複製ここから --> <?php if ( has_nav_menu( 'primary' ) ) : ?> <nav id="site-navigation" class="head-navigation" role="navigation"> <!-- クラス名head-navigationを新設 --> <?php // Primary navigation menu. wp_nav_menu( array( 'menu_class' => 'nav-menu', 'theme_location' => 'primary', ) ); ?> </nav><!-- .main-navigation --> <?php endif; ?> <?php endif; ?> <!-- 複製ここまで --> </header><!-- .site-header --> |
style.cssでは新規クラス head-navigation に対し、モバイル幅で非表示に
|
1 2 3 |
.head-navigation { display: none; } |
Desktop Small 955pxのときに表示
|
1 2 3 |
.head-navigation { display: block; } |
逆にサイドバーのメニューは非表示に
|
1 2 3 |
.main-navigation { display: none; } |
とすると意図する表示になりました。
縦並びメニューを横並びにするなどのカスタマイズは通常通りです。
サイドバーを右側に移動する
CSS3だといろんなアイディアが出てくるんだなぁと感嘆した作業です。
まずサイドバーが表示されるのはブレイクポイント「Desktop Small 955px」からなので、このスタイルを変更していきます。
が、混乱するので前述のサイドバー分離をなかったことにして、まっさらのTwentyfifteenから始めます。
|
1 2 3 4 5 6 7 |
.sidebar { float: left; margin-right: -100%; max-width: 413px; position: relative; width: 29.4118%; } |
これを以下に変更するとサイドバーが右に移動します。
|
1 2 3 4 5 6 7 |
.sidebar { float: right; margin-left: -100%; max-width: 413px; position: relative; width: 29.4118%; } |
続いて site-content を左に移動。
|
1 2 3 4 5 6 |
.site-content { display: block; float: left; margin-left: 29.4118%; width: 70.5882%; } |
これを
|
1 2 3 4 5 6 |
.site-content { display: block; float: left; margin-left: 0%; width: 70.5882%; } |
とすると、画面に不思議な区切りが表示されます。 
薄い線がありますがFirebugで見ても content に border の設定はなし。
影かとも思ったけど box-shadow の設定もなし。
しょうがないのでstyle.cssにある border-left と border-right と box-shadow を片っ端から確認。
そして以下の設定を見つけました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@media screen and (min-width: 59.6875em) { body:before { background-color: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); content: ""; display: block; height: 100%; min-height: 100%; position: fixed; top: 0; left: 0; width: 29.4118%; z-index: 0; /* Fixes flashing bug with scrolling on Safari */ } |
body に :before のセレクタをつけて、body が始まる前に29.4118％の空き（= sidebar と同じ幅）があり、全体に影をつけています。
これは、モバイル幅のスタイルから画面が広がりサイドバーを表示する際に、content はそのまま移動させずに body 自体をずらして空きを作る、という趣旨だと思われます。
なんか body ＋セレクタっていろいろ応用できそうですね。
感心しつつも、自分のテーマではサイドバーを右にしたので折角の最新テクニックは影ともども削除しました。 
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@media screen and (min-width: 59.6875em) { body:before { background-color: #fff; content: ""; display: block; height: 100%; min-height: 100%; position: fixed; top: 0; left: 0; z-index: 0; /* Fixes flashing bug with scrolling on Safari */ } .site-content { display: block; float: left; margin-right: 29.4118%; width: 70.5882%; z-index: 99999; } |
その他の背景付けとかメニューは従来の方法でカスタマイズしました。