TwentyTwentyのWordPressテーマの横幅を変更する・初心者も簡単!
![TwentyTwenty](https://popo-design.net/wp/wp-content/uploads/2019/11/20site.jpg)
WordPressのデフォルトテーマ、TwentyTwentyテーマはシンプルなデザインで使い勝手が良さそうなのですが、コンテンツの横幅がなぜか580pxと狭いので、CSSを追記して横幅を広くしてみることにしました。
![](https://popo-design.net/wp/wp-content/uploads/2019/11/20site1.jpg)
今どきのサイトにしては、横幅が狭いので広くします。
![横幅を広くします](https://popo-design.net/wp/wp-content/uploads/2019/11/20site3.jpg)
コンテンツ横幅の変更
まずはWordPressの管理画面から「外観」→「カスタマイズ」をクリック。
![外観からカスタマイズをクリック](https://popo-design.net/wp/wp-content/uploads/2019/11/20site4.jpg)
カスタマイズ画面が開くので、「追加CSS」をクリック。
![追加CSSをクリック](https://popo-design.net/wp/wp-content/uploads/2019/11/20site5.jpg)
下記のタグをコピペして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);
}
![タグを追記します](https://popo-design.net/wp/wp-content/uploads/2019/11/20site6.jpg)
追記したら右上の「公開」ボタンを押せば完了です。
実際のブラウザを読み込み直せば横幅が変わります。
![](https://popo-design.net/wp/wp-content/uploads/2019/11/20site7.jpg)
まとめ
横幅をやっぱり戻したい、という場合は追記したCSSをまるごと削除して、「公開」ボタンを押せば元に戻ります。
WordPressテーマの仕様はすぐ変わるのでこのタグも変更されるかも知れませんが、今のところはこれで使えます。ご参考までに。
[公開日] 2019年12月10日 / カテゴリー:WordPress
同じカテゴリーの記事
-
WordPressの自動更新機能を案件で使用したことについて
WordPress5.5から標準機能でシステムとプラグイン、テーマの自動更新ができるようになったので、昨年頃から実際の制 [続きを読む]
-
WordPressの[…]を【続きを読む】に表示・抜粋文字数を変更する方法
PHPのバージョンを上げたら、投稿の抜粋を表示するPHPタグで下記のようなエラーが出ました。 Warning: Unde [続きを読む]
-
WordPressメールフォームで「スパム送信の可能性があります」表示の修正方法
WordPressでメールフォームプラグインを設置して、送信テストをしていると「スパム送信の可能性があります」と表示され [続きを読む]
-
WordPressはテーマカスタマイズかオリジナルテーマ制作かの判断基準
WordPressがグーテンベルクのブロックエディターというものになってから、ホームページの制作は誰でも簡単に作れるよう [続きを読む]
最新の投稿
2024年07月16日
2024年07月16日
2024年07月10日
2024年06月25日
2024年06月03日
カテゴリー
アーカイブ
![HTML無料テンプレートダウンロードサイト](https://popo-design.net/wp/wp-content/themes/popodesign/img/temp-banner.png)
![LINEスタンプ販売中](https://popo-design.net/wp/wp-content/themes/popodesign/img/line-banner.webp)
![Kindle電子書籍](https://popo-design.net/wp/wp-content/uploads/2022/07/kindle-banner.webp)