2019/05/28こんにちは、管理人@SS_mshpです。今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラムボックス3列表示』『ブログ部分は通常の2カラム表示』みたいなレイアウトを切り替えてみたいと思います。使用したのは『ワードプレスの、bootstrapベースのテーマ』です。1ドメイン1サイトで、レイアウト切り替えが可能でした。やり方をみていきましょう。■bootstrapのcolクラスとは?bootstrapは、Webサイトの開発によく使われるCSSのフレームワークで、ボックスを配置するようなレイアウトなども、クセさえ知ってればカンタンに制御できます(デメリットとして、コードが長くなりますが)。横列が12の約数になる形でボックスを配置でき、スマホアクセス時には縦に並ぶ『colクラスを使ったレイアウト』はよく使われます。詳しくは省きますが、図のように『横の合計が12』になるようにすると、きれいに並びます(12を越えたものは改行されるようです、17とかは試してませんけど笑)。『8と4』『6と3と3』みたいな分割もできます。■今回の技術を使って、どんなことができる?今回やろうとしているのは、ワードプレスのサイトで『1カラム・途中に3列ボックス』と『通常のブログ用2カラム』を、(同じドメイン内だけど)ページに応じて切り替えます。1カラムでヒーローヘッダーを使った派手なページと、2カラムで情報に特化したブログページみたいなのができそうです。■まずは設計を理解するワードプレスの場合、使ったテーマが『bootstrapベースになってるか』をチェックします(テーマファイル内にbootstrap.cssなどのファイルがある)。この場合、『8:4』『9:3』みたいな形で、2カラムになってることが多い気がします。bootstrapのCSSが使われている場合は、colクラスで4:4:4みたいにして、1カラム3列ボックスレイアウトを入れることが可能です(もちろん、colクラスを使わない均等三列表示の方法はあります)。最近管理人が使ったWPテーマだと『Sidney』や『rootstrap』などが、bootstrapのCSSを使っていたようでした。■3列ボックス用の記事をcolクラスを使って作り、どのページ(例えば記事ページ・フロント)に適応させるか決めるとりあえず今回は『1カラム3列ボックスを、トップページに入れる』というかたちですすめます。個別記事内に、colクラスで4:4:4にして、その個別記事をトップページに指定しました。トップページだけにするか、固定ページ全部にするかも、先に決めておくとラクです(phpをカスタマイズする場所もこれで決定するから)。class=”row”』が列で、containerで囲んで中央配置しています。content-wrapper”』が、『header.php』内にあったからです。■php条件分岐を使って、トップページ部分のサイドバー読みこみを非表示にするそのままだと、ワードプレスの仕様上、サイドバーを出力する『sidebar.php』があります。そこで、条件分岐phpタグを使用して、この部分を非表示にします。?>』でくくる感じに。(!をつけた場合は、論理演算子の否定になります。トップページで表示しない。)トップページだけ1ページ別レイアウトにする場合は、上記の表示でよいかもしれません。?>』みたいに書くとよいでしょう。これは、ページ構成によってかわります。ちなみに・・・Sydneyテーマには、テーマカスタマイザー内に『1カラム表示』があるけど、全体に適応されるので、1カラム2カラム切り替えには向かないかもしれません。■(必要な場合)container・またはそれを囲む要素のMax-widthを指定する場合によっては、横幅が広いPCディスプレイなどで見た場合、3列ボックスが横に思いっきり広がってしまって、ということがあるかもしれません。ヘッダーに対して記事部分だけガッツリ広がってると、読みにくい&見栄え的にも微妙かと思います。いう場合は『bootstrapのcolを囲むcontainer』や、それを囲む要素にCSSで『max-width』を指定しました。ヘッダーが最大1060pxの場合は、この部分にも『max-width:1060px』とやると、幅が揃いつつも、デバイスによる変動も対応できます。2カラム用のMax-width狭めになっていないか・中央配置が揃ってるか(margin:autoなど)も確認します。■あとがき・まとめbootstrapベースの場合は、デフォが2カラムでも、colクラスを使って1カラム3列レイアウトができる適応させたいページにあわせて、phpで条件分岐させる横幅が気になるときは、『Max-width』中央配置が揃ってるかは『margin:auto』がきいてるかなどもチェックまとめるとこんな感じかと思います。1サイト内でページに応じてレイアウトを切り替えるのは、やや難易度が高いかもしれませんが、『コーポレートサイトやサービス・お店サイト』と『情報・ブログ・オウンドメディアサイト』を1サイトでできます。2サイト作らなくても一元管理できますので、興味がある方は、ぜひ検討してみてください。wpサイト制作受付サイトへ*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。...【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る今回は、フレームワークを使ったサイト制作を行ってみます。今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。...【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。検索:このサイト管理人についてこのコラムと『アトリエss』サイトを運営しております、管理人の五十嵐と申します。活動地域は東北の仙台市です。