2021.07.25WordPressの記事でCocoonをテーマに設定している場合で、パソコンではなく、スマホ等のモバイル機器で表示されるとどうなるかの、モバイルサイズでプレビューを確認してみたい時があります。ここでは、Cocoonを使用している時のモバイル表示のプレビュー方法をご紹介します。画面右上のメニュー確認プレビュー方法の説明の前に、画面右上のボタンの説明をしておきましょう。WordPressの編集画面の右上にプレビューボタンがあり、プルダウンメニューの中に「モバイル」があります。これを選択すればモバイルプレビューが表示されると勘違いしがちですが、実際はモバイルサイズの編集画面になるだけです。一応確認してみましょう。[プレビュー][モバイル]をクリックします。下図のように、編集画面がモバイルサイズになるだけですね。[デスクトップ]をクリックしていつもの編集画面に戻しておきましょう。プレビュー方法1まずは最も簡単なプレビュー方法です。いつものように[プレビュー][新しいタブでプレビュー]をクリックします。普通にPCでのプレビュー画面が表示されます。見てもモバイル機器の表示ではないですよね。プレビューが表示されたら、ウィンドウの操作で、ウインドウの端をドラッグ&ドロップしてウィンドウの横幅をめいっぱい縮めましょう。プレビューのレイアウトが自動的に変更されて、モバイル機器での表示になります。Cocoonの場合はデフォルトで画面下に、モバイル表示の時だけメニューバーが現れます。モバイル表示のメニューバーやサイドバーはCocoonの設定画面で設定ができます。設定方法は、この記事を引き続き読み進めれば説明しています。プレビュー方法22つ目のプレビュー方法はCocoonの設定画面でプレビューする方法です。最初に説明した方法でも良いのですが、ウィンドウの横幅が一定よりも狭くならないので、もっと狭くて実際のスマホに近い状態の確認にはこちらの方法が良いでしょう。WordPressサイドメニューの中の、[Cocoon設定][Cocoon設定]をクリックします。Cocoon設定画面が表示されます。たくさんのタブが表示されていますが、その中で[モバイル]タブをクリックします。モバイル設定画面が表示されます。下へスクロールしてみましょう。画面の右側に、モバイル表示のプレビューが表示されています。この便利な機能として、このプレビュー画面を実際に操作する事ができます。画面の左側には[モバイルメニュー]や[モバイルボタン]の設定項目があるので、いろいろ設定を変更して、最も使いやすい様にカスタマイズしましょう。Python・Cocoon・WordPress関連記事CocoonCocoonサイドバー文字サイズの変更Cocoonのサイドバーの文字サイズを変更してみましょう。標準では備わっていないので、CSSで指定します。AdSenseの審査用コードの貼り付け場所を紹介します。非常に便利なCocoonですが、使っていると、全体的にもう少し文字サイズを大きくしたい、もしくは小さくしたいと思うようになります。ここでは投稿や固定ページの文字の大きさを変更する方法をご紹介します。CSSでアーカイブ欄をカスタマイズCocoonは非常に便利なWordPressのテーマで、そのまま使用しても非常にお洒落ですっきりしたデザインに仕上がっています。これにさらに自分の個性を少しだけプラスするだけで、更にカッコイイサイトにすることができます。SEO、カスタムCSS、カスタムJavascriptを非表示にするCocoonで、SEO、カスタムCSS、カスタムJavascriptの設定欄を非表示にする。ブログ歴はごくわずか。Python・Cocoon・WordPress.メニューCocoonXcodeWordPressMacPythonお問い合わせホーム検索トップサイドバ。