creatersnest50

【WordPress】簡単!今あるサイトをスマホ対応にする方法


こんにちは!
今回は、今あるサイトをスマホ対応にする方法をご紹介します。
スマートフォンの普及により、スマートフォンからのアクセスがPCからのアクセスよりも多いことがあります。
機会損失をしないためにも、スマホ対応にさせておくことをオススメします。

 

プラグインWPTouch MobilePluginとは

スマホ対応させる方法はいくつかありますが、簡単にWordPressをスマートフォン対応させる方法はプラグインを利用することです。

ここでは、プラグインWPtouch Mobile Pluginについて説明します。
WPtouchは、読者がモバイル端末だった場合、自動でモバイル対応デザインを表示してくれるプラグインです。

 

インストール方法

管理画面「プラグイン」⇒「新規追加」⇒『WPtouch Mobile Plugin』で検索

WPtouch01

 

「いますぐインストール」でインストールしてください。

インストール後、有効化します。

 

WPtouch02
「WPtouch Mobile Plugin」プラグインを有効化すると、メニューバーに「WPtouch」が追加されます。
プラグインを有効化するだけでも、基本的な設定はできています。
これでスマホ対応できましたが、いくつか設定しておきたいことを次項以降で説明します。

 

 

日本語対応化

次に日本語対応化していきます。
デフォルトですと英語表記のままになっています。
これを日本語化するとどこで何を設定するかわかりやすくなりますので、日本語設定に変更することをおすすめします。

 

ダッシュボード⇒WPtouch⇒Core Settingsをクリックします。

 

基本設定が行える画面が開きます。
「General」タブ ⇒ 「Regionalization」の『日本語』を選択します。

 

wptouch03

Save changesボタンをクリックして保存します。

 

一覧表示記事数とアイキャッチの設定

「WPtouch」 ⇒ 「テーマ設定」 ⇒ 「一般」をクリックします。

wptouch04

 

ここでは、
①投稿リストの投稿数を設定できます。
②サムネイル画像の表示設定です。
「特集画像を投稿」か「カスタムフィールド投稿」を選択します。
③記事の表示設定です。
・投稿カテゴリーとタグ表示
・投稿日表示
・投稿著者を表示
・投稿のコメントバブルを表示
・ヘッダーで検索表示
をそれぞれ有無を選択できます。

 

スライダーの無効化

デフォルトの設定では、ヘッダー部分に記事タイトルを切り替えることのできる『スライダー』が表示されています。
大変便利な機能であります。

しかし、画面に大きく表示されるので、利用したくない場合は、

「WPtouch」 ⇒ 「テーマ設定」 ⇒ 「一般」⇒『機能スライダー』の『機能スライダーを有効にする』のところのチェックを外します。

 

wptouch06

 

『変更を保存』をクリックして保存します。

 

サイトのデザイン設定

「WPtouch」 ⇒ 「テーマ設定」⇒ 「ブランド設定」タブをクリックします。

 

wptouch05

ここでは、ビジアル的部分を設定します。
例えば、

・「テーマカラー」では、「テーマ背景」「ヘッダー&メニュー」「リンク」「投稿/ページヘッダー」
の各々のカラーを設定できます。
変更したい場合は丸い色のついた部分をクリックして、
「Desktopテーマカラー」 をクリックして好きな色を選ぶことができます。
また、「パレット」をクリックして更に細かい色から選ぶこともできます。

 

・「サイトロゴ」では、ご自身でデザインしたサイトに合ったロゴをアップして表示させることができます。

 

他にも詳細に設定することもできますが、今回は基本的な設定方法を説明しました。

 

まとめ

いかがでしょうか。
サイトを構築した後に、スマホの対応していなかったいう方には「WPtouch Mobile Plugin」は大変オススメです。
難しい作業を必要とせずに、スマホ対応できるのが魅力的ではないでしょうか。
スマホ対応をあせて、あなた様のサイトへ更なる訪問があるよう祈っております。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【WordPress】カテゴリ設定でブログをテーマごとに整理しよう!