【Cocoon】【コンテンツ幅設定手順解説】ブログ記事の幅が広すぎて読みにくかったので調整した。

当ブログでは無料ワードプレステーマ「Cocoon」を使って運営しているのですが、当初はデフォルトのコンテンツ幅で記事を書いていました。

コンテンツ幅というのは今あなたが読んでいる記事の幅のことです。

当初は記事幅が広すぎるせいで文字が横に間延びしてしまい、読む際に目の横移動が必然的に多くなっていました。

さすがにこれだと結構目が疲れてしまうので、どのくらいの幅だと最も目が疲れにくく読みやすいのか、どこで設定を変更するのかについて調べました。

今回はブログに最適な記事幅と余白の大きさ、無料ワードプレステーマ「Cocoon」における記事幅と余白の変更方法についてまとめていきます。

最適な記事幅と余白

ブログに最適な記事幅と余白は大体以下くらいであるとのこと。

当ブログは元々記事幅800pxで運営していました。この幅はCocoonにおけるデフォルトの記事幅です。どうやら元々広めに設定されていたようですね。

そのため、以下の記事幅と余白に変更しました。

・記事幅：720px
・余白：30px

・記事幅：680px
・余白：50px

これである程度記事が読みやすくなったかと思います(数値は自分好みで変更しています)。

Cocoonにおける記事幅と余白の変更方法

記事幅と余白を変更するには通常CSSの編集をしないといけないようですが、Cocoonでは最初から記事幅と余白の調整機能が搭載されていたため、それを使った方法についてまとめておきます。

「Cocoon設定」→「Cocoon設定」をクリック

黄色枠の「Cocoon設定」から赤枠の「Cocoon設定」をクリック

「カラム」タブに移動

赤丸で囲んだ「カラム」タブをクリック。

コンテンツ幅、コンテンツ余白幅を自分好みに変更

記事幅と余白を自由に変更できる箇所があるので自由にいじってください。

最適な記事幅は700px前後。余白は30~50pxあたりだと言われています。

当ブログではコンテンツ幅720px、余白30pxに設定しております。

当ブログではコンテンツ幅680px、余白50pxに設定しております。

最後に「変更をまとめて保存」をクリック

自分好みに設定できたら最後に一番下の「変更をまとめて保存」をクリックしてください。

これで無料ワードプレステーマ「Cocoon」におけるコンテンツ幅、余白の変更手順の解説は終了です。

自分にとって最も読みやすい幅と余白に調整してみてください。

最後まで読んでくださってありがとうございました。

P.S. Cocoonのコンテンツ幅設定手順を動画にしてみました

分かりやすいように手順を動画にもしてみました。