ビジネス向けWEBサイトをつくる

Cocoonのコンテンツ幅を変更する

本ページはプロモーションが含まれています

前回記事の「ブログのコンテンツ幅を考える」は、実は「Cocoon」のコンテンツ幅の変更に関連します。

「Cocoon」の初期設定のコンテンツ幅は800pxでサイドバーは336pxです。

サイドバーは「ラージレクタングル」バナーを掲載するための幅です。

しかし、コンテンツ幅はもう少し検討した方がよいでしょう。

なぜなら、「Cocoon」は大変大味なデザイン性を持っているので、コンテンツ幅が800pxもあると、シンプルデザインにすると大きすぎるのです。

このページでは「標準バナー」とデザイン的な見方で「Cocoon」のコンテンツ幅を決めていきましょう。

lin

このページはデザイン的な視点ですすめていきます。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Cocoonは何でもでかい!

ノーマルな「Cocoon」はパーツや空間がかなり大きいと感じます。

そのため、シンプルなデザインを追求すると、空間がスカスカになってデザイン的には、もたなくなります。

最近のブログテーマでは、コンテンツ幅がどんどん広くなっていく傾向があるので、「Cocoon」のデフォルト設定:800pxは珍しいものではありません。

しかし、コンテンツ幅:812pxの「SWELL」などの人気テーマより、ダサく見えてしまいます。

「SWELL」は各パーツがきちっと組まれているので、空間が広くてもしまって見えます。

以下がSWELLのタイトル部です。

SWELLのページタイトル

タイトル部だけでも、しっかりと見えます。

更新日の文字組とタイトルの黒が効いています。

各パーツをきちんと文字組みすることが、シンプルなデザインの基本です。

話がそれました。

「Cocoon」には気の利いた文字組はありませんので、全体の印象で整えていくしかありません。

そこで、大きなコンテンツ幅を修正せざるをえなくなります。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Cocoonのコンテンツ幅を修正

では、「Cocoon」のコンテンツ幅を考えていきましょう。

「Cocoon」のデフォルトのサイドバーは「ラージレクタングル」バナーの横幅に設定されています。

せっかくなので、コンテンツ幅も標準バナーを基準にしてみましょう。

STORK19 」はコンテンツ幅に「リーダーボード」バナーの728pxを採用しています。

「Cocoon」でも、これを採用してみます。

デフォルトの800pxより小さいですし、アフィリエイトバナーにも対応できるので一石二丁です。

Cocoon設定→「カラム」

「Cocoon」のコンテンツ幅の設定は「カラム」で行います。

Cocoonのカラム設定

コンテンツ幅を変更するとアーカイブのアイキャッチの大きさが崩れてしまいます。

Cocoonのアーカイブサムネイル

これを修正するにはプラグインが必要です。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Regenerate Thumbnailsでサムネイルを再作成する

「Regenerate Thumbnails」はサムネイルを再作成してくれます。

「管理画面」→「ツール」→「Regenerate Thumbnails」をクリックすると、以下のような画面が表示されます。

Regenerate Thumbnailsの警告

プラグイン「EWWW Image Optimizer」がインストールされている場合、「↑」で示したメッセージが表示されます。

メッセージに従えば「Regenerate Thumbnails」の処理が速く終わります。

従わなくても、時間がかかるだけです。

Regenerate Thumbnailsの起動画面

「添付ファイルすべてからサムネイルを再作成」をクリックします。

Regenerate Thumbnailsのプログレス

あとは終了を待つだけです。

結果

「Regenerate Thumbnails」が終了するとサムネイルの縦横比がそろいました。

「Cocoon」のコンテンツ幅の変更が見た目に、どのような変化をもたらしたでしょうか?

変更前

Cocoonの変更前アーカイブ表示
Cocoonの変更前投稿ページ

変更後

Cocoonの変更後アーカイブ表示
Cocoonの変更後投稿ページ

このように変更することで、タイトルロゴやヘッダーのリンクボタン等とのバランスが良くなります。

実は、タイトルロゴの大きさやヘッダーのリンク項目の数等によって、コンテンツの見え方は変わってきます。

必ず、コンテンツ幅を変更した方が良いというわけではありません。

ただし、「Cocoon」のデザインが大ざっぱだと感じたら、コンテンツ幅を変更してみましょう。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

three + 10 =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。