wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

   

こんにちは、管理人@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カラムで情報に特化したブログページみたいなのができそうです。

■ワードプレスで1カラム3列ボックスと、通常ブログ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をカスタマイズする場所もこれで決定するから)。

ちなみに、3列になる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 ?>』でくくる感じに。(!をつけた場合は、論理演算子の否定になります。トップページで表示しない。

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

ちなみに・・・

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サイト作らなくても一元管理できますので、興味がある方は、ぜひ検討してみてください。



【カテゴリ】 - webサイト制作 【タグ】 - , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

fc2ブログでSSL対応開始!設定方法や注意点をチェック!

今回は、管理人も使っている大手ブログサービス(fc2)で、ブログ本体もSSL暗号化接続が可能になったのでやってみます。 社会的信用はいまいちだけど(fc2動画の …

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

今回は、googleカレンダーとメールフォームで、予約受付ページを作ってみます(うまくいくかは微妙です)。 画像はfreeimages.comさんからお借りしま …

ワードプレスサイトを、プラグインでサクッとSSL化する方法

今回は、セキュリティの観点からも重要なサイトSSL(暗号化接続)を、ワードプレスを使って、サクッと導入します。 twitterでも話題になったhttpページ(S …

スマホページ高速表示のための、CSS圧縮方法まとめ

今回は、読み込み速度を速くしてwebページ(特にスマホ版)を高速表示するために、CSSをエディットしてみます。 絵はぱくたそさんからお借りしました。なぜCSSの …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき、困ったことがあったので、対処方法を紹介します。 ワードプレスのファイル構成やCSSの学 …

ワードプレスCSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック

今回は、ワードプレスのサイト制作をするとき、ひっかかりそうなポイントについてです。 最近ワードプレスサイト制作のお仕事をしていたんですけど、たまに、CSSなどを …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpressの仕組みねたで記事にできそうなポイントがあったのでお伝えします。 アクションフックだっ …

サイト制作お仕事事例~WPで仮想通貨投資情報サイトを(justiceクリプトカレンシーズ・AID LLCさま)

今回は、お仕事で対応したWebサイトの事例があって、お取引先さまより『ぜひ紹介してくれ』といわれたので、ご紹介いたします。 AID LLCさまよりご依頼いただい …

【サイト高速表示】ワードプレステーマ・stinger(5)のCSS軽量化!どれくらい小さくなる?

今回は、前回やったCSS縮小続きで、『書き方変えたり、いらない部分カット』で、ワードプレステーマ・stingerのCSSサイズを縮小します。 画像はfreeim …

このサイトでPVを15倍(月間1480pv→22500pv・1年半の間)にした、seo・スマホ・記事話題の対策

今回は、いろいろエディットやチューニングをしていたら、アクセスが増えてPVが上がってしまったこのサイトの状況についてお話いたします。 googleアナリティクス …