【WP】モバイル端末用にテーマを切り替えるプラグインのまとめ

wordpress-mobile-device-switche-index

先日のGoogleのウェブマスター向け公式ブログ「検索結果をもっとモバイルフレンドリーに」の記事にもあったように、モバイル端末によるウェブサイトの利用がシェアを伸ばしてきていることでウェブサイトのモバイル端末への最適化も重要な課題になってきていると思われます。

今回は、WordPressによってウェブサイトを構築している場合のモバイル端末へ対応に役立つプラグインをご紹介したいと思います。

WordPressにおけるモバイル端末への最適化

WordPressではデータベースに蓄積されているタイトルや本文などのデータが、デザインが施された「テーマ」に沿って成形され、ウェブサイトとして公開されるようになっています。

wordpress-mobile-device-switche

そのためモバイル端末に対応したい場合「テーマ」ファイルを切り替えることで対応することが可能です。今回、ご紹介するプラグインは主にアクセスされる端末によって「テーマ」ファイルを切り替えるためのプラグインになります。

Multi Device Switcher

「Multi Device Switcher」は国産のプラグインで、スマートフォン、タブレットなどの端末ごとに「テーマ」を設定することが出来るようになります。端末を判断するためのユーザーエージェントもカスタマイズすることができます。パソコン用、スマホ用と切り替えるスイッチを作ることも可能です。

multi-device-switcher

Any Mobile Theme Switcher

「Any Mobile Theme Switcher」も同様にスマートフォン、タブレットなどの端末ごとに「テーマ」を設定することが出来るようになります。パソコン用、スマホ用と切り替えるスイッチを作ることも可能です。

any-mobile-theme-switcher

Device Theme Switcher

「Device Theme Switcher」も同様にスマートフォン、タブレットなどの端末ごとに「テーマ」を設定することが出来るようになります。パソコン用、スマホ用と切り替えるスイッチを作ることも可能です。

device-theme-switcher

WPtouch Mobile Plugin

「WPtouch Mobile Plugin」はWordPressでスマートフォンの最適化というと定番といわれているプラグインです。上記の3つと異なりスマートフォン用のテーマが含まれている形で提供されています。テーマを切り替えてデザインを変える点では同じような仕組みで動いています。

WPtouch-mobile-plugin

関連記事

モバイル端末の画面サイズまとめ

WEBサイトを制作するときのサイズの基準になるのが画面の解像度です。 基本的には、ディスプレイサイズに合わせてデザインされるので、横幅が920px~1024pxあたりでレイアウトされるのが主流といえます。 最近では、スマートフォンやタブレットなどでWEBサイトを閲覧する機...続きを読む

2015.02.06HTMLコーディング

株式会社寺坂商店との業務提携のお知らせ

拝啓 時下ますますご清栄のこととお喜び申し上げます。 平素は格別のご高配を賜り、厚く御礼申し上げます。 さて、このたび当社は、株式会社寺坂商店(本社:静岡県藤枝市藤枝5-17-3、代表取締役:寺坂 祐紀)との間で、業務提携を行うことを決議いたしましたので、お知らせい...続きを読む

2022.07.22

【リリース】新サービス「プロモーションビデオ制作」

サービス内容に新しく「プロモーションビデオ制作」が加わりました。インターネット環境の高速化やスマートフォンの普及により多くの方が動画コンテンツを身近に楽しむようになりました。そして、動画コンテンツは、新しいマーケティングツールとして注目されています。 店舗のオープンやイベン...続きを読む

2020.02.16

【デザイン】バレンタインカードにぴったりなデザインワークスまとめ

今日は、バレンタインにちなんだカードのデザインワークスをまとめみました。ツールのキットやハウツーが掲載されており実際にカードを作るときの参考にもなります。 Hearts a Flutter ツールキットを組み合わせて制作されたカードです。ハートやリボンの組み合わせがか...続きを読む

2015.02.15インスピレーション

【CSS】counterを利用した自動ナンバリング

最近は、CSSというとCSS3にクローズアップされることが多いのですが、今回は、CSS2より追加された「counter(カウンタ)」の着目してみました。 CSSの「counter(カウンタ)」を使用すると連番などの自動ナンバリングの機能を実装することができます。 ...続きを読む

2015.02.09HTMLコーディング