bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ２カラムを切り替える

今回は、１ドメイン・１サイトで『トップページやコーポレート部分は１カラムボックス３列表示』『ブログ部分は通常の２カラム表示』みたいなレイアウトを切り替えてみたいと思います。使用したのは『ワードプレスの、bootstrapベースのテーマ』です。１ドメイン１サイトで、レイアウト切り替えが可能でした。さっそくやり方をみていきましょう。

■bootstrapのcolクラスとは？

bootstrapは、Webサイトの開発によく使われるCSSのフレームワークで、ボックスを配置するようなレイアウトなども、クセさえ知ってればカンタンに制御できます（デメリットとして、コードが長くなりますが）。

特に、横列が12の約数になる形でボックスを配置でき、スマホアクセス時には縦に並ぶ『colクラスを使ったレイアウト』はよく使われます。 詳しくは省きますが、図のように『横の合計が12』になるようにすると、きれいに並びます（12を越えたものは改行されるようです、17とかは試してませんけど笑）。もちろん『８と４』『６と３と３』みたいな分割もできます。

■今回の技術を使って、どんなことができる？

今回やろうとしているのは、ワードプレスのサイトで 『１カラム・途中に３列ボックス』と『通常のブログ用２カラム』を、（同じドメイン内だけど）ページに応じて切り替えます。

１カラムでヒーローヘッダーを使った派手なページと、２カラムで情報に特化したブログページみたいなのができそうです。

■ワードプレスで１カラム３列ボックスと、通常ブログ２カラムを切り替える方法

■まずは設計を理解する

ワードプレスの場合、使ったテーマが『bootstrapベースになってるか』をチェックします（テーマファイル内にbootstrap.cssなどのファイルがある）。この場合、『8:4』『9:3』みたいな形で、２カラムになってることが多い気がします。

bootstrapのCSSが使われている場合は、colクラスで4:4:4みたいにして、１カラム３列ボックスレイアウトを入れることが可能です（もちろん、colクラスを使わない均等三列表示の方法はあります）。最近管理人が使ったWPテーマだと『Sidney』や『rootstrap』などが、bootstrapのCSSを使っていたようでした。

■３列ボックス用の記事をcolクラスを使って作り、どのページ（例えば記事ページ・フロント）に適応させるか決める

とりあえず今回は『１カラム３列ボックスを、トップページに入れる』というかたちですすめます。 個別記事内に、colクラスで4:4:4にして、その個別記事をトップページに指定しました。トップページだけにするか、固定ページ全部にするかも、先に決めておくとラクです（phpをカスタマイズする場所もこれで決定するから）。

ちなみに、３列になるcolを囲んでいる、『div class=”row”』が列で、containerで囲んで中央配置しています。『div class=”container”』はbootstrapのルール上必要なんですが、この記事内に無い理由は『div class=”container content-wrapper”』が、『header.php』内にあったからです。

■php条件分岐を使って、トップページ部分のサイドバー読みこみを非表示にする

そのままだと、ワードプレスの仕様上、サイドバーを出力する『sidebar.php』があります。そこで、条件分岐phpタグを使用して、この部分を非表示にします。管理人の場合では、『sidebar.php全部』に『<?php if(!is_front_page()) : ?><?php endif ?>』でくくる感じに。（！をつけた場合は、論理演算子の否定になります。トップページで表示しない。）

トップページだけ１ページ別レイアウトにする場合は、上記の表示でよいかもしれません。しかし、１カラム部分が複数あって、ブログ記事は２カラム・固定ページは１カラムにする場合は『page.php』で非表示にする『<?php if(!is_page()) : ?>』みたいに書くとよいでしょう。これは、ページ構成によってかわります。

ちなみに・・・ Sydneyテーマには、テーマカスタマイザー内に『１カラム表示』があるけど、全体に適応されるので、１カラム２カラム切り替えには向かないかもしれません。

■（必要な場合）container・またはそれを囲む要素のMax-widthを指定する

場合によっては、横幅が広いPCディスプレイなどで見た場合、３列ボックスが横に思いっきり広がってしまって、ということがあるかもしれません。ヘッダーに対して記事部分だけガッツリ広がってると、読みにくい＆見栄え的にも微妙かと思います。そういう場合は『bootstrapのcolを囲むcontainer』や、それを囲む要素にCSSで『max-width』を指定しました。

ヘッダーが最大1060pxの場合は、この部分にも『max-width:1060px』とやると、幅が揃いつつも、デバイスによる変動も対応できます。また、２カラム用のMax-width狭めになっていないか・中央配置が揃ってるか（margin:autoなど）も確認します。

■あとがき・まとめ

• bootstrapベースの場合は、デフォが２カラムでも、colクラスを使って１カラム３列レイアウトができる
• 適応させたいページにあわせて、phpで条件分岐させる
• 横幅が気になるときは、『Max-width』中央配置が揃ってるかは『margin:auto』がきいてるかなどもチェック

まとめるとこんな感じかと思います。１サイト内でページに応じてレイアウトを切り替えるのは、やや難易度が高いかもしれませんが、『コーポレートサイトやサービス・お店サイト』と『情報・ブログ・オウンドメディアサイト』を1サイトでできます。 つまり、２サイト作らなくても一元管理できますので、興味がある方は、ぜひ検討してみてください。