モバイルバージョンを編集する

WordPress サイトはレスポンシブデザインを採用しています。別途編集するモバイルバージョンは用意されていません。このガイドでは、ブロック設定と CSS を使用してモバイル端末でのコンテンツの表示方法をカスタマイズする方法について説明します。

ナビゲーションブロックには、モバイルメニューボタン (「 ハンバーガー」アイコンとも呼ばれます) の設定が用意されています。モバイルメニューをカスタマイズするには:

1. サイトのダッシュボードから「外観」→「エディター」に移動します。
2. ナビゲーションメニューを含む「テンプレート」または「テンプレートパーツ」を選択します。
3. 「リストビュー」を開き、「ナビゲーションブロックを選択します。
4. ブロック設定サイドバーで、「設定」アイコン (歯車アイコン) をクリックします。

5. 「表示」セクションで次を行います:
   • 「アイコンボタンを表示」を切り替えて、ハンバーガーアイコンを使用するか、「メニュー」テキストを表示します。
   • アイコンスタイル (2本線または3本線) を選択し、「オーバーレイメニュー」設定を使用してハンバーガーアイコンをいつ表示するかを選択します。

サイトのメニューのスタイル設定についてご確認ください。

一部のレイアウトブロックでは、コンテンツをモバイル画面で縦積みするかどうかを制御できます。デフォルトでは、WordPress は自動的に小さな画面にコンテンツを横並べし、読みやすさを保ちます

並べ方の動作を調整するには、次の手順を実行します。

1. サイトのダッシュボードから「外観」→「エディター」に移動します。
2. 調整するブロックを含むページまたはテンプレートを編集します。
3. 「リストビュー」を開き、ブロックを選択します。
4. ブロック設定で、 「 モバイルでは縦に並べる」をオンまたはオフに切り替えます。

「モバイルでは縦に並べる」設定のあるブロック:

• カラム
• メディアとテキスト
• 最新の Instagram 投稿

ボタンとメニューでは、すべてのコンテンツを1行に収めるのではなく、複数の行に折り返して表示する方が、モバイル端末で読みやすくなります。デフォルトでは、複数行に折り返す設定はオフになっています。

折り返しを有効にするには、次の手順を実行します。

1. サイトのダッシュボードから「外観」→「エディター」に移動します。
2. 調整するブロックを含むページまたはテンプレートを編集します。
3. 「リストビュー」を開き、ブロックを選択します。
4. ブロック設定で、「複数行に折り返す」をオンに切り替えます。

「複数行に折り返す」設定のあるブロック:

• ボタン
• 共有ボタン
• ナビゲーション
• ソーシャルアイコン
• コメント
• 縦積みと横並び

ピクセル (px) 単位のテキストサイズは、1つのサイズで固定されます。em または rem でサイズ設定されたテキストは、訪問者の設定と画面サイズに基づいて調整されるため、サイトがアクセスしやすくなり、さまざまな端末で読みやすくなります。

テキストをピクセルから相対的な単位に変更するには、次の手順を実行します。

1. サイズを変更するテキストのあるブロックをクリックします。
2. ブロック設定で、「タイポグラフィ」セクションを見つけます。
3. 「フォントサイズ」で、カスタムサイズアイコン (ドット付きの2つの水平線) をクリックします。
4. 「px」単位をクリックして「em」または「rem」に変更します。
5. 数値を入力し、必要に応じて調整します。

em または rem の選択:

• em — テキストはコンテナに対して相対的に拡大または縮小されます (キャプション、ラベル、特定のブロック内のテキストに適しています)
• rem — サイト全体でテキストの一貫性が保たれます (本文テキスト、見出し、ボタンに適しています)

また、個々のブロックを調整するのではなく、フォントサイズをサイト全体でカスタマイズすることもできます。

本ガイドのこのセクションは、WordPress.com プレミアムプラン、ビジネスプラン、コマースプランと従来の Pro プランをご利用のサイトを対象としています。無料プランまたはパーソナルプランのサイトでこの機能を利用するには、プランをアップグレードしてください。

CSS クラスを使用して、デスクトップまたはモバイル端末で特定のブロックを非表示にできます。これを設定するには次の手順を実行します。

1. 非表示にするブロックを含むページ、投稿、テンプレートを編集します。
2. ブロックをクリックするか、リストビューで選択して、ブロックを選択します。
3. ブロック設定で、「高度な設定」をクリックします。
4. 「追加 CSS クラス」 ボックスに、hide-desktop または hide-mobile と入力します。

5. サイトのカスタム CSS 設定に移動します。
   • ブロックテーマ: 「外観」→「エディター」→「スタイル」→「⋮」→「追加 CSS」
   • クラシックテーマ: 「外観」→「カスタマイズ」→「追加 CSS」
6. 次のコードを貼り付けて、「保存」をクリックします。

/* hide elements on mobile*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

サイトに CSS コードを1回追加します。その後、hide-mobileまたは hide-desktop のクラスを任意のブロックに追加でき、CSS がそのブロックを指定された端末で自動的に非表示にします。