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日　/　[最終更新日] 2019年12月10日　カテゴリー：WordPress講座

この記事を書いた人

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

この記事が気に入ったら
いいね！をお願いします

Follow @popodesign

最新情報をお届けします

同じカテゴリーの記事

All In One WP SecurityでERROR: Access from-と表示されてログインできないときの修正方法
All In One WP Securityはセキュリティの高いWordPressのプラグインのひとつですが、セキュリティが強すぎて自分が締め出されてしまい、ログインできなくなってしまうこともよくあります。その時に修正し… [続きを読む]
WordPressをサーバーにインストールする（ロリポップ！）
まずは、ロリポップ！の管理画面にログインします。（1）サーバー申し込み時の「アカウント」を入力（2）「ドメイン」を選択（3）パスワードを入力「ログイン」をクリック。ロリポップ！の管理画面の左側、「… [続きを読む]
WordPressの【現在メンテナンス中のため、しばらくの間ご利用いただけません】の復旧方法
WordPressサイトのシステムやプラグインを更新中に、うっかり管理画面の他のページを触ってしまうと、このようなエラーが出てしまうことがあります。そのままにしておいても、待てど暮らせど変化がないので。初めて見た方… [続きを読む]
WordPressのどのphpファイルを読み込んでいるか確認できるプラグイン【What The File】
WEBサイトをカスタマイズしていると、このファイルはどこのphpファイル？？？という疑問が出ることは、特に他人様が作ったサイトをカスタマイズする時に出てくると思いますが、現在表示しているページがどのphpファイルかを教… [続きを読む]