【Cocoonカスタマイズ】記事を読みやすくする余白デザイン。

コクーン Wordpressカスタマイズ

Cocoonのブログと有料テーマを使って書かれたブログを読み比べると、

どどすけ
どどすけ

なんかCocoonの方が読みにくいな…

と思うことが昔ありました。

 

ですが記事の読みやすさというのは、ほんとに簡単な工夫をちょっと入れるだけで劇的に改善されます。

 

初心者向けの記事になりますが、意外とこの点について書かれているブログが少なかったので、知らなかった…という人はぜひ導入してみてください。

 

今回紹介するものはびっくりするぐらい簡単なコードですし、コピペするだけで完了するので1分くらいでブログの見た目が改善されますよ。

 

Cocoonって何?という方は、初心者におすすめのWordPress最強無料テーマ”Cocoon”。

を先に読んでみてください。

 

スポンサーリンク

記事が読みにくくなるのは余白の無さが原因!?

疲れている人

読みにくい記事の特徴の一つとして、

『文字がびっしり詰まっていて疲れやすい』というものがあります。

 

余白が詰まっていると画面上にテキストがぎっしり配置されてしまい、

無意識のうちに非常に疲れてしまうんです。

 

想像してみてください。

もし、立ち読みで何となく開いた本が、国語辞典並みにギッシリ文章が詰まっている文章だったら…

そっ閉じしてしまいますよね(笑)

 

さらに記事幅に関していうと、

ブログ記事はテキストを読んでもらうことがメインとなるため、目線が右へ左へジグザグに動いてしまうようです。

 

この時、文章が横に広く書かれていると目線が大きくストロークするため、余計に疲れてしまうという原理なんですね。

 

このように「余白を設計する」というのは地味ですが、パッと見た時の見やすさというのは読み手にとって重要な部分なんです。

 

どどすけ
どどすけ

このブログも「疲れているサラリーマンでもふわっと読めるサイト」を目指しています。

 

スポンサーリンク

余白をデザインするカスタマイズ

では早速コードを紹介しますね。

なお、「Cocoon設定」→「メイン」で記事幅の変更もできるのですが、今回は以下に紹介するCSSに書き込むやり方がお勧め。(理由は後述します)

 

「外観」→「テーマの編集」→style.cssと進んで、シート内にコピペすれば完了です。

 

コピペする場所はstyle.css内ならどこでも構いませんが、他のカスタマイズ文を書いた場合はその文章を崩さないようにだけ注意してくださいね。

 

(画像は例です。→の部分は文と文の間になってるので、挿入可能ということです)

 

内部で出てくる数字はお好みに合わせて編集してみてください。

注意:必ず子テーマで編集しましょう。

 

記事の幅をデザインする

◎コード例

◎ちょこっと解説

このコードは、

・記事内のコンテンツ幅を、全体幅に対して92%にする

・余白を上下側0px、左右側を自動(均等振り分け)にする

という指令を意味しています。

設定すると以下のようになります。

折りたたむ

 

記事幅を%指定しているのが肝で、Cocoon設定による幅指定はpxでの指定となるんです。

 

どどすけ
どどすけ

・・・何か問題なの???

と思いますよね(笑)

 

%指定にしている理由はスマートフォンの機種によって、表示される幅が違うから!

 

iPhone Xとかの大型スマホのレイアウトに合わせてpx指定してしまうと、

小さなスマホで見たときに横幅がはみ出してしまうんです。

 

一方で、%で指定しておくとこういったデメリットは無くなります。

 

ただし余白が大きすぎると今度は一行あたりの文量が減ってしまうので要注意。

 

当サイトでは92%としていますが、90~95%くらいが割と見やすいかなと思います。

ここはお好みで。

 

記事の行間をデザインする

 

◎コード例

◎ちょこっと解説

このコードでは、

・記事内の段落について、段落ー段落間の幅を2.3文字分に設定する

・行高さを1.6文字分に設定する

という指令をしています。

 

文字だけでは非常に分かりにくいので、画像で解説すると以下のようになります。

css説明用

上の図から分かるように、命令を加えてあげることで縦方向の余白がコントロールされ、見やすさがぐっと上がります。

 

また、2行目のem、3行目の単位無しは親文字に対して何倍にするかを表すもの。

当サイトのフォントサイズが15pxなので、

行高さ:15×1.6=24px

段落間:15×2.3=34.5px

となります。

この数値もお好みでカスタマイズしてください。

 

スポンサーリンク

まとめ

Cocoonは非常に優れた無料テーマで、大体のことが「Cocoon設定」から出来てしまいます。

 

でも、細部を設定するにはやはりCSSを触る必要があります。

何より見た目を司るcssファイルについて理解しながら設定すると、ブログ書くのがさらに楽しくなりますよ。

 

このブログで少しずつカスタマイズ公開していきますので、気に入ったものがあれば手間をかけずにカスタムしてみてくださいね。

 

◎最強の無料WordPressテーマ”Cocoon”についてはこちら→

初心者におすすめのWordPress最強無料テーマ”Cocoon”。

◎SNSの有効活用法はこちらから→

副業ブログとTwitter。失敗から学んだSNSの上手な使い方。

◎あなたのブログはどのジャンル?→

【RPG風】あなたの目指すブログはどのタイプ?初心者にとって重要なブログの方向性。

ブログランキング・にほんブログ村へ
にほんブログ村

 

コメント