Amazonプライム感謝祭 先行セール 10/17~
スポンサーリンク

ページにプロモーションが含まれる場合があります。

【簡単】Cocoon横幅の変更|サイドバーもOK|カラム設定

スポンサーリンク
初心者
初心者

WordPressブログで記事が表示される場所やサイドバー幅の広さって変更できる?

よしてっく
よしてっく

Cocoonテーマなら設定メニューが用意されています!

ブログの表示幅はある程度最適なサイズに初期設定されていますが、自分のこだわりでもう少し広げたり狭めたりしたいという人向けの解説です。

ここでは、WordPress(ワードプレス)Cocoonテーマで、ブログのメインコンテンツやサイドバーの横幅を変更する手順をご紹介します。

Cocoon(コクーン)では、サイトの色々なレイアウト変更を行うことが可能で、記事の表示スペースの横幅も手軽に変更することができます。

カラムの幅を変更できます

 

Cocoon設定:カラムの幅を変更する

setting
Designed by macrovector / Freepik

WordPress管理画面(ダッシュボード)のCocoon設定カラムをクリックします。

Cocoon設定のカラム

 

カラム幅設定:メインコンテンツ

カラム幅メインコンテンツ

 

メインカラム設定コンテンツ幅が記事本文が表示されるメインコンテンツの横幅です。

メインカラム設定

 

初期設定は800px、最小600px~最大1,600pxの範囲で1px単位で設定できます。

 

カラム幅設定:サイドバー

サイドバーの幅

 

サイドバー設定サイドバーの横幅が変更ができます。

サイドバー設定

初期設定は336px、最小200px~最大500pxの範囲で1px単位で設定できます。

 

✓その他のサイドバーカラム設定

・サイドバー余白幅
サイドバーコンテンツ両サイドの余白幅を設定します。
(最5px~最大40px)
・サイドバー枠線幅
サイドバーのボーダー幅を設定します。
(最小0px~最大10px)
・サイドバー枠線色
サイドバーのボーダー色を設定します。
未入力でデフォルトの透過色になります。

 

カラム幅設定:カラム間の余白

カラム間の余白

 

カラム間余白設定カラム間の幅が変更ができます。

カラム間の幅設定

メインコンテンツとサイドバーの間の幅(スキマ)を変更できます。
(最小0px~最大60px)

 

それぞれ変更したら一番下か上にある変更をまとめて保存をクリックしましょう。

Save changes together

実際のサイトレイアウトを確認しながら調整して下さい。

 

カラム幅を決めるコツ:他サイトを参考にする

PC作業中の3人

サイトのカラム幅はどのくらいがイイのか自分でイマイチ解らない場合は他のサイトを参考にしてみましょう。

他のブログを見て「これは見やすいな」と思ったらカラム幅を参考にしてみよう!

参考サイトと自分のサイトを交互に切り替えてみて、同じ幅になっているか確認しながら調整すると上手く真似することができます。

その際は、どちらも同じズーム倍率で比較しましょう。

関連記事 表示サイズを簡単に変更する方法【Google Chrome】

 

ちなみに当ブログの横幅は、メインカラム「728」px、サイドバー「336」pxになっています。

 

サイトの最適な横幅に関しては、下記の記事を参考にしました。

 

まとめ:横幅を最適にしてブログをレベルアップ

今回は、WordPressCocoon設定から、ブログの横幅を変更する手順をご紹介しました。

よしてっく
よしてっく

自分のブログで「記事の横幅がもう少しあったら」とか「もう少し狭くしたい」などの細かい希望もCocoonなら簡単に変更可能です!

ブログのレイアウトを最適化して、サイトのレベルアップに挑戦してみてください。

コメント

タイトルとURLをコピーしました