TwentyTwentyのWordPressテーマの横幅を変更する・初心者も簡単！

WordPressのデフォルトテーマ、TwentyTwentyテーマはシンプルなデザインで使い勝手が良さそうなのですが、コンテンツの横幅がなぜか580pxと狭いので、CSSを追記して横幅を広くしてみることにしました。

今どきのサイトにしては、横幅が狭いので広くします。

コンテンツ横幅の変更

まずはWordPressの管理画面から「外観」→「カスタマイズ」をクリック。

カスタマイズ画面が開くので、「追加CSS」をクリック。

下記のタグをコピペしてCSSの記入欄に追記してください。
max-widthのところが横幅なので、数字を変更すれば横幅が変わります。
ここでは90remにしています。

---

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
     max-width: 90rem;
     width: calc(100% - 4rem);
 }

---

追記したら右上の「公開」ボタンを押せば完了です。
実際のブラウザを読み込み直せば横幅が変わります。

まとめ

横幅をやっぱり戻したい、という場合は追記したCSSをまるごと削除して、「公開」ボタンを押せば元に戻ります。
WordPressテーマの仕様はすぐ変わるのでこのタグも変更されるかも知れませんが、今のところはこれで使えます。ご参考までに。

[公開日] 2019年12月10日 / カテゴリー：WordPress

---

<< 次の記事｜トップ｜前の記事 >>

この記事を書いた人

ポポデザイン
西宮市在住のWEBクリエイター・グラフィックデザイナー・マーケター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
Facebook｜X｜Instagram

同じカテゴリーの記事

• 

  Twenty Seventeen（無料テーマ）でホームページを作る

  WordPressは「テーマ」と呼ばれるテンプレートでデザインを変更することができます。 無料のものから有料のものまであ [続きを読む]

• 

  Cocoonをコーポレートサイト型にする方法・トップページ

  WordPressのCocoonテーマをコーポレート型サイトとしてカスタマイズする方法をお話します。 Cocoonは標準 [続きを読む]

• 

  WordPressを多言語化する簡単プラグイン！GTranslateの使い方

  日本語だけでなく多言語化したホームページを作る場合、手動だと２つサイトを作らないといけないので時間も手間もかかります。 [続きを読む]

• 

  さくらの新サーバーに移行ツールで引っ越しました

  さくらインターネットで旧サーバーでも新しいサーバーへ移行できるようになったので、さっそく実際の案件でも試してみました。や [続きを読む]

---

最新の投稿

---

---

---

---

---