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

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

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

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

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

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

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

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

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

lin

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

プロモーション

Cocoonは何でもでかい!

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

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

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

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

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

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

SWELLのページタイトル

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

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

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

話がそれました。

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

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

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

オススメの理由は、以下のページをチェックしてください。

Cocoonのコンテンツ幅を修正

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

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

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

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

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

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

Cocoon設定→「カラム」

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

Cocoonのカラム設定

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

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

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

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

オススメの理由は、以下のページをチェックしてください。

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」のデザインが大ざっぱだと感じたら、コンテンツ幅を変更してみましょう。

プロモーション

戦略的WEBサイト構築方法

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

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

コメントを残す

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

3 × three =

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

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