おしい県でWebに携わって働く人のブログ

基本的にはIT&Web界隈に関する役に立ちそうなことをまとめていきます。

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

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

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

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

 

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

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

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

wp-simplicity.com

 

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

thk.kanzae.net

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

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

 

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

ja.wordpress.org

この「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デザイナー養成講座)

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

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