前回記事の「ブログのコンテンツ幅を考える」は、実は「Cocoon」のコンテンツ幅の変更に関連します。
「Cocoon」の初期設定のコンテンツ幅は800pxでサイドバーは336pxです。
サイドバーは「ラージレクタングル」バナーを掲載するための幅です。
しかし、コンテンツ幅はもう少し検討した方がよいでしょう。
なぜなら、「Cocoon」は大変大味なデザイン性を持っているので、コンテンツ幅が800pxもあると、シンプルデザインにすると大きすぎるのです。
このページでは「標準バナー」とデザイン的な見方で「Cocoon」のコンテンツ幅を決めていきましょう。
【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る
ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。
ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。
もくじ
Cocoonは何でもでかい！
ノーマルな「Cocoon」はパーツや空間がかなり大きいと感じます。
そのため、シンプルなデザインを追求すると、空間がスカスカになってデザイン的には、もたなくなります。
最近のブログテーマでは、コンテンツ幅がどんどん広くなっていく傾向があるので、「Cocoon」のデフォルト設定：800pxは珍しいものではありません。
しかし、コンテンツ幅：812pxの「SWELL」などの人気テーマより、ダサく見えてしまいます。
「SWELL」は各パーツがきちっと組まれているので、空間が広くてもしまって見えます。
以下がSWELLのタイトル部です。
タイトル部だけでも、しっかりと見えます。
更新日の文字組とタイトルの黒が効いています。
各パーツをきちんと文字組みすることが、シンプルなデザインの基本です。
話がそれました。
「Cocoon」には気の利いた文字組はありませんので、全体の印象で整えていくしかありません。
そこで、大きなコンテンツ幅を修正せざるをえなくなります。
【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る
レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定（絵文字読み込み・コード最適化）他、機能多数。
ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。
Cocoonのコンテンツ幅を修正
では、「Cocoon」のコンテンツ幅を考えていきましょう。
「Cocoon」のデフォルトのサイドバーは「ラージレクタングル」バナーの横幅に設定されています。
せっかくなので、コンテンツ幅も標準バナーを基準にしてみましょう。
「STORK19
」はコンテンツ幅に「リーダーボード」バナーの728pxを採用しています。
「Cocoon」でも、これを採用してみます。
デフォルトの800pxより小さいですし、アフィリエイトバナーにも対応できるので一石二丁です。
Cocoon設定→「カラム」
「Cocoon」のコンテンツ幅の設定は「カラム」で行います。
コンテンツ幅を変更するとアーカイブのアイキャッチの大きさが崩れてしまいます。
これを修正するにはプラグインが必要です。
【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る
ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。
ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。
Regenerate Thumbnailsでサムネイルを再作成する
「Regenerate Thumbnails」はサムネイルを再作成してくれます。
「管理画面」→「ツール」→「Regenerate Thumbnails」をクリックすると、以下のような画面が表示されます。
プラグイン「EWWW Image Optimizer」がインストールされている場合、「↑」で示したメッセージが表示されます。
メッセージに従えば「Regenerate Thumbnails」の処理が速く終わります。
従わなくても、時間がかかるだけです。
「添付ファイルすべてからサムネイルを再作成」をクリックします。
あとは終了を待つだけです。
結果
「Regenerate Thumbnails」が終了するとサムネイルの縦横比がそろいました。
「Cocoon」のコンテンツ幅の変更が見た目に、どのような変化をもたらしたでしょうか？
変更前
変更後
このように変更することで、タイトルロゴやヘッダーのリンクボタン等とのバランスが良くなります。
実は、タイトルロゴの大きさやヘッダーのリンク項目の数等によって、コンテンツの見え方は変わってきます。
必ず、コンテンツ幅を変更した方が良いというわけではありません。
ただし、「Cocoon」のデザインが大ざっぱだと感じたら、コンテンツ幅を変更してみましょう。
【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る
ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。
ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。
プロモーション
」
が安心です。初心者にも簡単インストールできます！
このページはデザイン的な視点ですすめていきます。