モバイルデバイスで投稿を確認すると、通常、コンテンツの左右に余白があります。左右の余白が広すぎる場合は、余白を調整することを検討できます。必要に応じて、余白を削除してコンテンツが全幅で表示されるようにすることもできます。この記事では WordPress 投稿でコンテンツの左右の余白を調整する方法を見てみましょう。
CSSを使用してモバイルデバイスでコンテンツの左右の余白を調整/削除する
モバイル端末で WordPress サイトにアクセスすると、通常、コンテンツの左右に余白があります。
余白が適していると見てほしいのですが、余白が大きいとコンテンツ幅が狭くてぎこちないことがあります。このような状況では WordPress ブログの投稿コンテンツの幅を調整することを検討できます。
まず、コンテンツの左右の余白（Padding）値を確認します。このブログにインストールされている GeneratePress テーマの場合、ブログ投稿でコンテンツの親要素に30pxのPadding値が適用されているようです。
次のCSSコード デザイン » カスタマイズ » 追加のCSSに追加すると、コンテンツの左右の余白が削除され、全幅で表示されます。
/* WordPress 게시글 콘텐츠 여백 조정하기 */
/* Removing Padding from Single Post Content in GeneratePress Theme */
@media (max-width: 767px) {
.single .entry-content {
margin-left: -30px;
margin-right: -30px;
width: calc(100% + 60px);
}
}@media（max-width：767px）{ //スタイル}はCSSメディアクエリで、デバイス解像度が767px以下のデバイスにのみスタイルが適用されます。 GeneratePress テーマのデバイス解像度分岐点について、次の記事を参照してください。 （テーマによって少しずつ異なるように設定される場合があります。）
上記のコードを適用すると、次のようにモバイルデバイスからコンテンツの左右の余白が削除されます。
このように左右の余白がなければ苦しくなるので、少し余白を追加できます。
@media (max-width: 767px) {
.single .entry-content {
margin-left: -15px;
margin-right: -15px;
width: calc(100% + 30px);
}
}数値を適切に変更してコンテンツマージンの変化を観察してください。
Astra(アストラ) などほとんどの WordPress テーマで上記のコードを適用できます。ただし、実際のコンテンツマージン値はテーマによって異なります。 Newspaper など、一部のテーマでは、entry-contentの代わりに他のクラスが使用されるため、確認してアプリケーションできます。
テキストはそのままにして画像のみ左右に拡大する
ちなみにテキストはそのままにして画像のみ左右余白を削除して全幅で表示したい場合は、次のようなコードでテストしてみてください。
/* Center the image within the wp-block-image class only on mobile devices */
/* 모바일 장치에서만 wp-block-image 클래스 내의 이미지를 가운데 정렬 */
@media (max-width: 767px) {
.entry-content .wp-block-image {
margin-right: -30px;
width: calc(100% + 60px);
position: relative;
left: 50%;
transform: translateX(-50%);
}
.entry-content .wp-block-image img {
max-width: 100%;
height: auto;
}
}margin の値は適切に調整します。左右の margin 値を調整すると、width 値も適切に変更する必要があります。 （width内の60pxは、左右の余白値を合計した値に置き換えます。）
CSSについて少し理解すれば、好きなようにコンテンツの幅を調整でき、文字サイズ、色、背景色などスタイルを自由に変更できます。
カスタムCSSは デザイン » カスタマイズ » 追加のCSSに追加したり、 チャイルドテーマ 内のスタイルシートファイル（style.css）に入力できます。私はチャイルドテーマ内のスタイルシートファイルに追加した方です。 （お知らせのカスタマイズにCSSコードを追加すると、ページのヘッダーセクションにコードが追加されます。通常の場合は問題になりませんが、追加するCSSコードが多い場合は望ましくない可能性があります。）
コメントを残す