WordPressの記事でCocoonをテーマに設定している場合で、パソコンではなく、スマホ等のモバイル機器で表示されるとどうなるかの、モバイルサイズでプレビューを確認してみたい時があります。ここでは、Cocoonを使用している時のモバイル表示のプレビュー方法をご紹介します。
モバイル表示をプレビュー
画面右上のメニュー確認
プレビュー方法の説明の前に、画面右上のボタンの説明をしておきましょう。
WordPressの編集画面の右上にプレビューボタンがあり、プルダウンメニューの中に「モバイル」があります。これを選択すればモバイルプレビューが表示されると勘違いしがちですが、実際はモバイルサイズの編集画面になるだけです。一応確認してみましょう。[プレビュー][モバイル]をクリックします。
下図のように、編集画面がモバイルサイズになるだけですね。[デスクトップ]をクリックしていつもの編集画面に戻しておきましょう。
プレビュー方法１
まずは最も簡単なプレビュー方法です。いつものように[プレビュー][新しいタブでプレビュー]をクリックします。当然、普通にPCでのプレビュー画面が表示されます。どう見てもモバイル機器の表示ではないですよね。
プレビューが表示されたら、ウィンドウの操作で、ウインドウの端をドラッグ＆ドロップしてウィンドウの横幅をめいっぱい縮めましょう。プレビューのレイアウトが自動的に変更されて、モバイル機器での表示になります。Cocoonの場合はデフォルトで画面下に、モバイル表示の時だけメニューバーが現れます。
モバイル表示のメニューバーやサイドバーはCocoonの設定画面で設定ができます。設定方法は、この記事を引き続き読み進めれば説明しています。
プレビュー方法２
２つ目のプレビュー方法はCocoonの設定画面でプレビューする方法です。最初に説明した方法でも良いのですが、ウィンドウの横幅が一定よりも狭くならないので、もっと狭くて実際のスマホに近い状態の確認にはこちらの方法が良いでしょう。
WordPressサイドメニューの中の、[Cocoon設定][Cocoon設定]をクリックします。
Cocoon設定画面が表示されます。たくさんのタブが表示されていますが、その中で[モバイル]タブをクリックします。
モバイル設定画面が表示されます。ちょっと下へスクロールしてみましょう。
画面の右側に、モバイル表示のプレビューが表示されています。この便利な機能として、このプレビュー画面を実際に操作する事ができます。
画面の左側には[モバイルメニュー]や[モバイルボタン]の設定項目があるので、いろいろ設定を変更して、最も使いやすい様にカスタマイズしましょう。
