WordPressのモバイルテーマを、かちびと.netさんの「Shotoku(レスポンシブ対応テーマ)」に変更しました!

Shotoku title

こんにちは。IT業界に勤めていたとはいえ、PHPは全く扱ったことがないうしぎゅう(@ushigyu)です。

以前、WPtouch無しでモバイル用にWordpressテーマを切り替えられるプラグイン「WPtap Mobile Detector」を紹介しました。

このプラグインで今までは「Carrington Mobile」というネットで拾ってきたモバイル用テーマを使っていたのですが、デザインやカスタマイズのしにくさなどに若干の不満がありました。

そんなとき開催された、先日のGW一宮ブログ合宿。

これは今やるしかない、とモバイル用テーマを変更することに。

いろいろ試して辿り着いたのは、かちびと.netさんが公開しているレスポンシブWebデザイン対応のテーマ「Shotoku」でした。


レスポンシブWebデザイン「Shotoku」

そもそもレスポンシブWebデザインとは何でしょうか?

ざっくり言うと、「ブラウザやデバイスに合わせて勝手にいい感じに調整してくれるデザイン」

つまり、パソコン・スマートフォン、画面の大小に関わらず、1つのテーマで見た目をいい感じに調整してくれるということ。

わざわざ大小画面のパソコン用、モバイル用などにテーマを個別に用意しなくて済み、とても便利です。
(参考:レスポンシブwebデザインとは? – Tips*Blog


ですが私の場合、パソコン用テーマである「Blue Grace」はかなり気に入っていろいろと手を加えていますし、先日もリニューアルしてもらったばかり。

というわけで今回は、レスポンシブなテーマである「Shotoku」をあえてモバイル専用テーマとして使わせていただきました。

「Shotoku」をモバイル用テーマとして適用する手順

まずはかちびと.netさんの以下の記事にアクセスし、Wordpressテーマ「Shotoku」のzipファイルをダウンロードしましょう。

レスポンシブWebデザイン対応のHTML5製ギャラリーサイト用WordPressテーマ・Shotoku(β版)を公開しました – かちびと.net

ダウンロードが完了したら、自分のWordpressブログにテーマをアップロードします。

「外観」-「テーマ」の「テーマのインストール」から、先程ダウンロードしたzipファイルをそのままアップロード(インストール)しましょう。

【注意!】
このとき、「有効化」はしないように注意!「有効化」してしまうと、パソコン用テーマも含めてすべてShotokuに切り替わってしまいます。
モバイル用のみを切り替えたい今回の場合は、アップロードのみ。

Shotoku 3

テーマのインストールが無事完了したら、「テーマの管理」の画面にこのように「Shotoku」が表示されるはずです。

Shotoku 4

次にWordpressプラグイン「WPtap Mobile Detector」の設定ページにて、モバイル用デバイス(例えばiPhoneやAndroid)のテーマを「Shotoku」に切り替えます。

Shotoku 5

なお、デバイスごとにテーマを切り替えるWordpressプラグイン「WPtap Mobile Detector」については、以下の記事をどうぞ。

以上で完了です!

モバイル用サイトのビフォーアフター

では、切り替えてどうなったのか見てみましょう。

以前のモバイル用テーマ「Carrington Mobile」ではこんな感じ。

Shotoku 1

一応ちゃんと見えるのですが、横にムダな余白が空いていて画像やテキストがやや縮小されてしまっています。

また、トップページも・・・

Shotoku 2

横並びのWPtouchよりマシとはいえ、なんだか味気ない。それに一応出来上がっているデザインのため、知識の乏しい私にはカスタマイズがちょっと難しかった。

これを「Shotoku」に切り替えてどうなったか。

以下のスクリーンショットが切り替え後です。

Shotoku 6

以前のテーマより、より横幅を有効に使えているのがわかります。わかりますよね?

…これではわかりにくいと思うので、ビフォーアフターを横に並べてみます。

Shotoku 7

やや微妙な違いではありますが、画像もテキストも一回り大きく表示されているのがわかると思います。見やすくなっていい感じ。

CSS(スタイルシート)をいじらなくとも、最初から画像もテキストも横幅いっぱいにちょうどよく表示されるのがありがたいです。

トップページは、以下のようになりました。

Shotoku 8

実は上の画像はカスタマイズ後。
青背景に白テキストのブログタイトルは、いろいろ調べつつ自分でつくりました。

(ギャラリーテーマなので、トップページからの各記事はアイキャッチ画像のみで表示されます。ここにはテキストを入れたいと思っているのですが、まだやり方がわからないので勉強中…。)


以前のテーマと違い、「Shotoku」は基本的に必要最低限のファイルとコードしかないので、自分の好きなようにカスタマイズするのもとてもやりやすかったです。

作者であるかちびと.netの中の人も、『作りはシンプルなのでフレームワーク的にご利用下さい。』と書いている通り。

おかげで最近ではテーマをいじるのが楽しすぎて、記事を書くのが疎かになりそうなくらいです・・・。笑

あとがき

私の場合、モバイル用テーマとして「Shotoku」を使いましたが、もともとこのWordpressテーマはレスポンシブデザイン。
パソコンでもスマートフォンでもブログをいい感じに表示してくれます。

カスタマイズもしやすいシンプルなテーマなので、モバイル用としてはもちろん、これからWordpressをはじめる人が使うにもオススメです!

レスポンシブWebデザイン対応のHTML5製ギャラリーサイト用WordPressテーマ・Shotoku(β版)を公開しました – かちびと.net
iPhoneなどのスマートフォンに最適化されたWordpressテーマを、WPtouch無しで適用できるプラグイン「WPtap Mobile Detector」
これが本職Webデザイナーの力ッ…!ブログTOP画像を「frasm」の@shintarowfreshさんにリニューアルしてもらったよ!

この記事をシェアする!

ABOUTこの記事をかいた人

牛嶋 将太郎@ushigyu

牛嶋 将太郎@ushigyu

株式会社エコーズ代表取締役社長(と名乗ってみたくて会社をつくりました)。当ブログにておすすめの製品やお店、旅行先、ガジェットなどを気のむくままに、わかりやすさを心がけて紹介しています。 長崎出身で福岡市在住。東京で就職しましたが独立を機に学生時代を過ごした大好きな福岡に帰還。
⇒ まずはじめに読んでほしい「役立つ」「得する」「面白い」記事はこちら