無料WordPressテーマ「Simplicity」を3カラムでレスポンシブ対応する方法

ツール & ジェネレーター

管理人はブログやWebサイトを制作するときにWordPressを利用することが多いのですが、先日書いた記事「2016年版!個人がWordPressでブログやサイトを制作するときに検討したいSEOに強い無料テーマ5+2選」でも紹介した「Simplicity」というSEOに最適化された無料テーマはよく利用させてもらってる愛用テーマです。

このSimplicityというテーマは使い勝手が良いのでとても重宝するのですが一つだけ管理人的に困った点があります。それは「3カラムのテーマがない」ということです。いや細かく言うと「ない」わけではなくて「あるけどレスポンシブに対応していない」ということになのですが。

 

Simplicityを3カラムでレスポンシブ対応する方法

3カラムのデザインにするには「子テーマ」というものを活用するのですが、公式サイトから配布されている3カラムの子テーマはレスポンシブに対応していなくてしかもノーサポートなので、カスタマイズは自己責任で行うということになっています。ブログの内容によっては3カラムのデザインを使いたい&レスポンシブにも対応してほしい管理人としては少々困ってしまいました。

Simplicity子テーマに「3カラム子テーマ」を追加

 

そんなこんなで困ったときのGoogleさんでいろいろとググって調べてみたところ参考になりそうな記事を見つけました。

この記事ではSimplicityを3カラムにして尚且つレスポンシブ対応しているのですが、その方法は3カラムの子テーマを使わずに普通の子テーマをカスタマイズしてレスポンシブ対応するという少しばかりレベルが高いものになっています。

ちなみに管理人はこの方法を自分なりに解釈して試してみたのですが、知識不足なのか下手くそ?なのか結果的にはうまくいきませんでした。

 

そんなこんなでさらにGoogleさんに頼りつつググって調べてみたところ何とかなりそうな方法を見つけました。その方法はあるプラグインを使う方法です。

この「Any Mobile Theme Switcher」というプラグインはスマホやタブレットからWebサイトにアクセスしたときにPC用のテーマとは別のテーマを適用できるというものなのですが、今回はそれを少ーしだけ応用して活用してみました。

要するに、Simplicityの3カラムの子テーマはレスポンシブ対応されていませんが親テーマはレスポンシブ対応されているのでスマホやタブレットからアクセスがあると子テーマではなく親テーマを表示させる、という方法です。

 

Any Mobile Theme Switcherの管理画面で、

Any Mobile Theme Switcherの管理画面

↓↓↓

Any Mobile Theme Switcherの管理画面

という感じで設定します。これでスマホやタブレットからアクセスがあると子テーマ(3カラム・レスポンシブ非対応)ではなくて親テーマ(レスポンシブ対応)が表示されるようになります。

 

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

  • 作者: 中島真洋 ,ロクナナワークショップ
  • 出版社/メーカー: 技術評論社
  • 発売日: 2015/06/23
  • メディア: 大型本
 
WordPressデザインブック HTML5&CSS3準拠 (WordPress DESIGN BOOK)

WordPressデザインブック HTML5&CSS3準拠 (WordPress DESIGN BOOK)

  • 作者: エビスコム
  • 出版社/メーカー: ソシム
  • 発売日: 2015/09/11
  • メディア: 単行本
 

 

カラム数はどう選ぶ?

3カラムにすれば情報量は増えますが、必ずしも正解とは限りません。サイトの目的や読者の閲覧環境によって、向いているレイアウトは変わります。カスタマイズに踏み込む前に、本当に3カラムが必要かを一度考えておくと、後悔のない選択ができます。

  • 1カラム:本文に集中させたいブログや読み物向き。スマホ表示と相性が良い
  • 2カラム:本文+サイドバーの標準形。バランスが良く多くのサイトで使われる
  • 3カラム:サイドバーを左右に置き、メニューや広告など情報を多く見せたいときに有効

近年はスマホからの閲覧が中心です。3カラムはPCでは見やすくても、スマホでは結局1カラムに折りたたまれるため、レスポンシブ対応が前提になります。

カスタマイズ前に準備しておくこと

テーマのレイアウト変更は、表示崩れのリスクを伴います。プラグインを使う方法であっても、次の準備をしてから作業すると安心です。

  1. サイト全体(ファイルとデータベース)のバックアップを取る
  2. 親テーマは触らず、子テーマやプラグインで対応する
  3. 変更後はPC・スマホ・タブレットそれぞれで表示を確認する
  4. うまくいかないときに戻せるよう、変更箇所を記録しておく

プラグインで対応するときの注意点

テーマ切り替え系のプラグインは便利ですが、運用していくうえで気をつけたい点もあります。導入して終わりにせず、定期的な確認を習慣にしましょう。

  • 更新状況を確認する:長く更新されていないプラグインは、WordPress本体との相性問題が起きやすい
  • 表示確認を怠らない:実機のスマホ・タブレットで意図どおり切り替わるかを必ずチェックする
  • 表示速度への影響:プラグインを増やすほど読み込みは重くなりがち。必要なものだけにしぼる
  • SEOへの配慮:PC版とスマホ版で内容が大きくズレないようにする

こんな人に向いている方法

  • 3カラムの見た目は使いたいが、コードを深くいじるのは避けたい人
  • 子テーマのレスポンシブ化を試したが、うまくいかなかった人
  • スマホでは親テーマのレスポンシブ表示を活かしたい人

よくある質問

3カラムは今でもおすすめですか?

情報量を見せたいサイトには有効ですが、スマホ中心の今は1〜2カラムが無難な場面も増えています。レスポンシブ対応を前提に、本当に必要かを見極めて選びましょう。

プラグインを使う方法は安全ですか?

バックアップを取り、更新されているプラグインを選べば大きな問題は起きにくいです。ただし導入後は実機での表示確認を必ず行い、不具合がないかをチェックしてください。

子テーマの編集とプラグイン、どちらがいいですか?

コードに自信があれば子テーマのカスタマイズが柔軟です。手早く確実に済ませたい場合は、テーマ切り替えプラグインを使う方法が現実的な選択肢になります。

まとめ

Simplicityで「3カラム+レスポンシブ」を実現するには、子テーマの本格カスタマイズか、テーマ切り替えプラグインの活用という二つの道があります。コードに踏み込むのが難しければ、スマホでは親テーマのレスポンシブ表示を活かすプラグイン方式が現実的です。いずれの方法でもバックアップと実機での表示確認を忘れずに、安全に理想のレイアウトを目指してください。

関連記事

この記事を投稿した人
おしブロ管理人

Web発掘ブロガー。知る人ぞ知る、ちょっと面白くてちょっと便利なWebツール・サービス・レトロデジタルを"発掘"して紹介しています。大手が扱わないニッチな隙間を掘って、「これ面白い!」「やってみたい!」をお届け。

おしブロ管理人をフォローする
ツール & ジェネレーター