wordpress(ワードプレス)のスマホ最適化!レスポンシブWebデザインでスマートフォン対応するテーマ・テンプレートエンジニアの転職情報サイト現役のjavaエンジニアが運営する転職情報サイトです。更新日:2022-10-16wordpress(ワードプレス)のスマホ最適化!レスポンシブWebデザインでスマートフォン対応するテーマ・テンプレートwordpress(ワードプレス)をスマートフォン(スマホ)対応させる方法は、大きく下記2つになります。※「レスポンシブWebデザイン」とは・・・1つのHTMLで、PCやスマートフォン・タブレットなど、様々なデザイスの表示を最適化するデザインになります(詳しくは、後述しています)スマートフォン(スマホ)の利用が当たり前となった昨今、Webサイトをスマホ用に最適化することは、いわば必須事項と言えます。Webサイトによっては、PCよりもスマートフォンからのアクセスが多いということもあるでしょう。当ブログも、「4割」ものアクセスがスマートフォンから来ています(下図)そこで、今回の記事では、レスポンシブWebデザイン対応の、おすすめテーマ・テンプレートと、スマホ最適化プラグインの紹介。wordpressの「レスポンシブWebデザイン」の作り方についても、順に解説していきます。以下、目次になります。当章では、レスポンシブWebデザインに対応した、日本語かつ無料のWordpressテーマ・テンプレートを、紹介していきます。スマートフォン(スマホ)利用が一般化した昨今、Wordpressでも、スマホ対応(レスポンシブWebデザイン)したテーマ・テンプレートが、増えてきています。スマホ対応していないほうが、今後は珍しくなっていくでしょう。~」は、Wordpressの公式テーマになります。公式で配布されているものなので、機能・セキュリティともに安心して使え、定期的にバージョンアップもおこなわれています。Tweleve)を利用しています。ネット上のソース(情報)も多いですし、最もオススメする「テーマ・テンプレート」です。eleven」から、レスポンシブWebデザインとなっています。ビジネス用途のホームページに最適化されたWordpressテーマ・テンプレートになります。通常、Wordpressは、ブログCMSなので、テーマも「ブログとしてのデザイン」がほとんどです。「BizVektor」は、ビジネス用途のホームページに最適化されているテーマで、利用者も非常に多いです。特徴としては、htmlやcssの知識が無くても、管理画面からの設定だけで簡単に「ビジネス向けホームページ」が作れる事です。レスポンシブWebデザインにも対応しています。公式ページには、デモサイトも触れるので、一度見てみると良いでしょう。「STINGER」は、SEOやアフィリエイトに特化した「テーマ・テンプレート」として、日本では非常に有名なモノで、ENJILOGというブログの運営者が作成したテーマ・テンプレートになります。スマホ対応もしています。利用者も非常に多く、ネット上の「ソース(情報)」も豊富に存在しているため、SEOやアフィリエイトをおこなう場合は、おすすめのテーマになります。SEO対策とは以上、レスポンシブWebデザインに対応した、おすすめのテーマ・テンプレートでした。これらの「テーマ・テンプレート」を利用すれば、何もしなくとも「スマホ対応」されています。「テーマ・テンプレート」を選定するさいは、「スマホ対応」の他にも、いくつかチェックすべき要件があります。その要件の説明や、それらを満たすオススメのテーマ・テンプレートについて、下記記事にてまとめているので、ぜひ見ておいてください。・WordPress(ワードプレス)テーマ・テンプレート(デザイン)の無料・日本語版でおすすめなモノと、作り方(作成手順)wordpressのスマートフォン(スマホ)対応を実現するプラグインWordPressのスマホ対応は、レスポンシブWebデザインのテーマ・テンプレートじゃなくても、プラグインを利用することで実現することができます。そこで当章では、スマホ対応におすすめのプラグインを紹介していきます。スマホ対応プラグインは、なんといっても「WPtouch」です。「WPtouch」は、Wordpressにデフォルトでインストールされているプラグインで、利用者も非常に多く、有名なプラグインになります。「MobilePress」などがありますが、正直「WPTouch」を使っておけば良いと思います。利用者が多いということは、それだけ信頼性が高いということですし、ネット上にも多数のソース(情報)があります。ソースが多いということは、何かしら困った事やカスタマイズしたい時などに、解決しやすい。これらの事から、プラグインにて「スマホ対応」するなら、「WPTouch」を推奨します。使い方についても簡単で、プラグインを有効化するだけで、基本的な設定はされ「スマホ対応」されます。詳しい使い方については、下記記事にてまとめているので、参考にしてください。MobilePlugin(Wordpressプラグイン)の使い方(設定)・カスタマイズと、Pro版の紹介wordpressレスポンシブWebデザインの作り方!PC・スマートフォン(スマホ)、それぞれのデザイン切り替え(振り分け)方法レスポンシブWebデザインとは・・・上述しているとおり、1つのHTMLで、PCやスマートフォン・タブレットなど、様々な端末の表示を最適化させるデザインのことです。「wordpressのレスポンシブWebデザインを実現する、日本語・無料のテーマ・テンプレート」でも紹介しているように、スマートフォン(スマホ)がこれだけ一般的に浸透した昨今では、スマホ対応されたテーマ・テンプレートがデフォルトになっています。レスポンシブWebデザインに対応していないWordpressのテーマ・テンプレートを利用している場合、自力で対応させなければなりません。そこで、当章では、wordpressのレスポンシブWebデザインの作り方について、おおまかにまとめてみました。レスポンシブWebデザインは、各端末によって表示画面を切り替え(振り分け)る際に、各端末のスクリーンサイズ(横幅)を見ています。「●●px」よりも大きい場合は、「1.css」を。「●●px」よりも小さい場合は、「2.css」を。いったように、スクリーンの横幅サイズ(単位:ピクセル)によって、読み込む「CSS」を切り替えているんですね。一般的な、切り替え(振り分け)の指標は、下記のようになっています。以上・・・PCなので、これら3つに最適化した「CSS」を用意しておく必要があるんですね。次に、作成したそれぞれの「CSS」を、利用しているテーマ・ディレクトリ配下に、FTPツール(FFFTPなど)でアップします。wordpress/wp-content/themes/twenty●●●/最後に、利用しているテーマ・テンプレートのファイルを編集して、アップしたCSSファイルを読み込みます。※編集ファイルは、「ヘッダーテンプレート:wordpress/wp-content/themes/twenty●●●/header.php」などが、良いでしょう。CSSファイルの読み込み処理は、下記のように、HTMLタグのlinkタグでおこなえます。href=”●●●.css”>以上です。まとめると、下記のような流れになります。表示画面・切り替え(振り分け)用の、各端末に最適化したCSSの準備(一般的には、PC用、スマホ用、タブレット用の3つ)準備したCSSを、テーマ・ディレクトリへアップするアップしたCSSファイルを読み込み処理を、テーマ・テンプレート・ファイルに記述する以上です。各端末に最適化したCSSの作成手順については、下記記事にて分かりやすく解説されているので、参考にしてください。コメントをキャンセルメールアドレスが公開されることはありません。~未経験者へのおすすめも。~未経験者についても。~求人情報の見方や注意点も。