スマートフォンでも見られるように

字幕

あなたが選んだテーマが最初からスマートフォンに対応していることもありますがそうでない場合Wordpress で予め用意されているスマートフォン用のテンプレートを使うことができます。基本的にこの様にテーマをプレビューする時にこの様に、三つのデバイスでクリックをして見てこの様に、横スクロールが出ていなければ問題ないスマートフォンに対応したウェブサイトになっています。しかし、古いものや自分で作ったものなどはモバイルに対応していないケースもありますよね。例えば、この様に横スクロールが出てしまいサイトの全体が見れないケースです。こういった時にもWordpress で予め用意されているスマートフォンのテンプレートを使うことでスマートフォンでも快適に見られるようになります。今、私が設定したテーマはこの様なものです。こうですね。ウインドウを狭めて見たりしても全部を見ることはできません。では、早速 Wordpress で設定してみましょう。ダッシュボードの一番左のメニューから「外観」の一番下「モバイル」をクリックします。そうすると「モバイルテーマを有効化」とありますので「はい」を選択して「更新」を押します。 そうすると何か項目が増えたことがわかります。まずは、本当にモバイルテーマが有効になったのかを見てみましょう。ブログを開いてリロードしてみましょう。特に変わりませんね。これは PC の見た目だから変わらないんですね。では、スマートフォンの場合はどうなるかを確認してみましょう。「Safari」＞「環境設定...」をクリックし一番右の「詳細」これをクリックします。そうすると、一番下に「メニューバーに"開発"メニューを表示」とありますのでチェックを入れてください。そうすると、メニューバーに「開発」が追加されました。ここをクリックして「ユーザエージェント」＞「iPhone」を選びます。そうすると、見た目は変わりましたね。これがモバイル用の Wordpress のテンプレートになります。この様に、例えばスマートフォンの様な横幅の少ないものでもちゃんと表示されていますね。このデザインを細かく変更することも可能です。モバイルの設定で先ほど増えた項目で具体的な設定をすることもできます。「フロントページに常にブログ投稿を表示」に「はい」をするとここでブログの投稿がトップページに表示される様になります。「ホーム＆アーカイブページに投稿の前文ではなく抜粋を表示」とするとトップページや記事の一覧が見れるページで全文を表示せず、一部だけになります。 これを入れておくとスマートフォンなど画面の小さい時全文を表示してしまって記事の一覧だけみたいというユーザにも答えられます。後は、「フロント＆アーカイブページにアイキャッチ画像を表示」画像を表示するか否かの設定ですね。これも、お使いのブログの画像の幅などによります。もし、結構大きいものとかを表示してゴチャゴチャするのが嫌だなと思ったら「いいえ」のままで結構です。後はここですね。ヘッダーのテキストの色を変えることができる様です。「モバイルテーマデフォルトの黒を使用」というのがあるので「はい」をクリックします。これはもしお使いのテーマでいろんな設定がある場合文字が見え辛くなることもあります。そういったときはそれを無効化してWordpress が用意した通常のテーマを使うようにしますかと聞いているんですね。これらに「はい」「いいえ」それぞれを選択して「更新」を押せば設定されます。先ほどの見た目の通りですね。これが設定後の画面です。この様に、スマートフォン版の見た目も用意できるのでもし、あなたが使っているテーマがスマートフォンに対応してなくてもWordpress の方で用意してくれたものを使うことで見易いウェブサイトを作ることができます。 このレッスンではスマートフォン用のモバイルテーマの設定の方法を紹介しました。