モバイル端末で WordPress サイトの左右の余白が広すぎるか狭すぎて調整する方法に関する質問 Naver カフェ などを通じて着実に登ってきており、この記事では GeneratePress テーマを使用しているサイトについて、モバイルデバイスでコンテンツの左右の余白を調整する方法を見てみましょう。他のテーマも同様の方法でアクセスできます。
WordPress GeneratePress テーマ：モバイルデバイスで左右のコンテンツマージンを調整する
GeneratePress テーマの場合、有料版では、Spacingモジュールを有効にすると、外部マージンと内部マージンを簡単に設定できます。
無料版を使用している場合は、CSSを使用してモバイルデバイスの左右の余白を調整できます。
Avada など、他のテーマを使用している場合でも同じようにアクセスできます。
- テーマオプションで余白設定オプションを指定すると、テーマオプションで変更
- 余白関連設定が提供されない場合は、CSSを使用して変更
GeneratePress 有料版（GP Premium）を使用している場合は、モバイルデバイスで左右の余白を設定する
ジェネレートプレステーマ有料版 GPプレミアムをインストールして有効にした場合は、「カスタマイズ」で余白を詳細に設定できます。
1 GP Premiumプラグインが有効になっている場合 WordPress 管理者ページ » 外観 » GeneratePressに移動し、 間隔 モジュールを有効にします。下図のように一番右のボタンが 非活性化しますと表示されている場合はアクティブです。
2 外観 » カスタム » Layout » Container ページに移動します。
下部の Content Padding (コンテンツパディング) セクションまでスクロールし、モバイルデバイスのアイコンをクリックします。その後、モバイルデバイスの内部余白（パディング）を設定できます。
3 希望の余白になるように コンテンツのパディングの 右派(右)と 左派（左）値を適宜調整してください。右側のプレビュー画面で余白を確認できます。 （しかし、一部の環境では、値を変更してもプレビュー画面に変化がない可能性があります。その場合は、変更後に実際のスマートフォンなどのモバイル機器で確認する必要があります。）
変更を保存してキャッシュを削除したら、モバイルデバイスで余白が適切かどうかを確認してください。
この方法を使用すると、サイト全体に対してモバイルデバイスでのコンテンツマージンが適用されます。投稿（ページ）やページなど、サイトの一部のマージンを調整したい場合は、以下のCSS方法を使用する必要があります。
GPテーマの無料版でモバイル端末の左右の余白を設定する
ジェネレートプレス無料版をご利用の場合は、CSSを使用して余白を調整できます。 基本的なCSSそれはそれほど難しくないし、学ぶのに時間がかかりません。 （参考として エレメンのようなページビルダーを使用する場合、CSSを知らなくてもかなりの設定をすることができますが、CSSを少し知ればより簡単に活用できます。）
GPフリー版をお使いの場合 外観 » カスタム » 追加 CSSに次のコードを追加して、モバイルデバイスのコンテンツ領域の左右の余白を変更できます。 チャイルドテーマを作成し、チャイルドテーマ内のスタイルシートファイル（style.css）に入力することもできます。
/* GP 테마: 모바일 기기에서 좌우 여백 조정하기 */
/* GeneratePress Theme: Adjusting Left and Right Margins on Mobile Devices */
@media (max-width: 768px) {
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header {
padding: 20px !important;
}
}上記のカスタムCSSコードは、解像度が768ピクセル未満のデバイスにのみロードされます。 CSSメディアクエリを使用して、デバイスの解像度に応じて異なるスタイルを指定できます。
CSSを少し知っている場合は、ブログ記事、カテゴリ、タグページなど、アーカイブページなど、特定のページにのみ適用されるように設定できます。
私はモバイルデバイスでポストを除くすべてのページに対して左右の余白を25pxに設定し、ポスト（投稿）には35pxを指定しました。 😄
コメントを残す