WordPressでは、テーマオプションといくつかのCSSを活用して、ブログレイアウトを好きなように飾ることができます。
インターネットを閲覧してみると、ブログ記事のレイアウトをテキストは狭く、画像は広く設定して見せるサイトがたまにあります。
WordPressでは、単純なCSSを使用して、上の図のように画像は広く、テキストは狭く表示されるように設定できます。
この記事では、 GeneratePress テーマに基づいてブログ投稿のレイアウトを上の図のように設定する方法を見てみましょう。 アストラテーマ など、ほとんどのテーマにこの方法を適用できます。
テキストは狭く、画像は広く表示するブログレイアウトの設定方法
1段レイアウトで調整したい場合 外観 » カスタマイズ または、テーマオプションでサイドバーが表示されないように設定することもできます。 （Avada などのいくつかのテーマ WordPressの標準慣行を無視し、独自のテーマオプションを提供することもあります。）
GeneratePress テーマは 外観 » カスタム » Layout » Sidebarsでサイドバーレイアウトを設定できます。 （WordPress バージョンに応じて韓国語版で「모양「は」ルックス「または」デザイン"などで表示されることがあります。現在の最新バージョン WordPress 6.6.2で 外観 メニュー 모양に翻訳されています。）
ブログ記事のサイドバーレイアウトは Single Post Sidebar Layoutで指定できます。通常は右サイドバーレイアウトが使用されます。ブログ記事のレイアウトを1段レアウトにするには Content (no sidebars)を選択します。
外観 » カスタム » Layout » Containerでコンテナ幅を指定できます。
コンテナの幅を1200pxに設定し、1段レイアウト（サイドバーなし）に設定すると、コンテンツの幅が1200pxになります。
テキストは狭く、画像は広く表示したい場合は、画像を除くすべての要素の幅をCSSを使用して縮小する方法を使用できます。たとえば、次のCSSコードを使用すると、画像を除くコンテンツの幅が700ピクセルに設定されます。
/* 이미지를 제외한 모든 요소의 최대 폭 값을 줄이기 */
.single .entry-content > *:not(.wp-block-image, img) {
max-width: 700px; /* 텍스트 너비 */
margin-left: auto;
margin-right: auto;
}上記のコード 外観 » カスタム » 追加 CSSに追加することができます。
画像の幅がコンテナの幅より小さく、中央揃えにならない場合は、次のCSSを使用してブログ投稿の本文に挿入されたすべての画像を中央揃えできます。
/* 모든 이미지를 가운데 정렬하기 */
.single .wp-block-image img {
display: block;
margin: 0 auto;
}実際のCSSコードはテーマによって少しずつ異なる場合があります。上記のコードを適用して、うまくいかない場合は、この記事のコメントで使用しているテーマを教えてください。
Newspaper など、一部のテーマは独自のCSSクラスを使用するため、実際のコードは上記とは大きく異なる場合があります。また、 エレメンプロのテーマビルダーを使用してシングルポストレイアウトを作成しても、上記のコードは機能しません。
GeneratePress テーマサイドバーレイアウトの上部にSidebar Layout設定はどこに適用されますか？
2番目はブログサイドバーレイアウト、3番目はブログポストのサイドバーレイアウトです。ページなどのサイドレイアウトが最初のようです。