【記事の幅】を変える方法（カラム幅）Cocoon

WordPressにテーマのCocoonをインストールすると、最初からほとんどの準備が整っているので、カスタマイズなんて必要ない状態で記事を書き始めることができてしまいます。

ところが、ある程度慣れてくると、ジワジワと気になることが出てきます。

そんな中のひとつ。「なんか、記事の幅が広すぎない？」という感覚。

今回の記事では、ブログ記事の『幅』について考察してみようと思います。(^^)/~~~~

Cocoonの画面構成

Cocoonの場合、基本的には２カラムで画面が構成されています。（変更可能）

カラムは、記事を表示するメイン部分を「コンテンツ」、メニューなどを表示する右サイドを「サイドバー」と呼んで区別します。

カラムの幅は［Cocoon設定］→［カラム］の画面で変更することが可能です。

カラムの設定

設定できる内容は次の図のようになっています。

「A」～「G」までの７か所の値を指定することができます。

これらを合計すると、全体の幅になります。

ヘッダーに自作の画像を使用する場合に、横幅をどのくらいのサイズで作ったら良いか悩みましたが、この「全体の幅」を基準にするとわかりやすいですね。

メインカラム

記事が表示される領域の設定です。

コンテンツの幅、余白幅、枠線の幅が設定できます。（下図、A～Cの部分）

枠線の色は、指定しなければデフォルトの「透過色」になり、画面上では見えません。ですが、枠線幅を「0」に変更していなれば、左右に「1px」ずつ存在しています。（サイドバーの枠線も同じです。）

サイドバー

サイドバーの設定をします。

サイドバーの幅、余白幅、枠線の幅が設定できます。（下図、D～Fの部分）

余白

メインカラムとサイドバーの間隔を決めます。（下図、ピンク＝Ｇの部分）

最適な幅とは？

さて、設定する方法がわかっても、結局「最適な幅って何ピクセル？」というのが一番の悩みどころになると思います。

私も色々と悩んで、参考のために様々なサイトを見て回りましたが、必ずしも決まったサイズはなく、それぞれが、それぞれのポリシー？のもと、サイズを決めてるように感じました。

文字の多い文章中心のサイトなら、なるべく目を左右に動かさずに済む幅が親切だろうし、図解を多用する場合は横幅に余裕が欲しいですよね。

選んだ文字サイズによっても、最適幅は違ってくるでしょう。

それで、一番いいのは「お気に入りのサイトを見つける」ことです。

感覚的に「あ、このサイトは読みやすいな」とか、「居心地がいいな」という、視覚的な好印象を与えてくれるサイトを見つけてしまうことです。

次に、そのサイトの構成を参考にします。

「どうやって？」という方は、まずは『デベロッパーツール』を覚えましょう。

デベロッパーツール

デベロッパーツールは、開発者用の検証ツールです。ブラウザソフトに付属している無料ツールで、開いたサイトの構成などを検証することができます。

開発者用と聞くと尻込みしがちですが、使い始めてみると、なかなか便利なツールです。

デベロッパーツールを使えるようになると、今まで不思議に思っていたことが色々とわかるようになります。例えば、

Edgeのデベロッパーツールになりますが、概要と使い方を学べます

ただ、デベロッパーツールを使うとなると、基本的なCSSの知識も必要になります。

感覚をつかもう

設定したコンテンツ幅と、実際の表示状況を、視覚的にわかりやすいよう図にしてみました。

「見出し」と「本文」は、コンテンツ幅いっぱいに広がります。

ブラウザに表示されるときは［余白＋コンテンツ］＝［メインカラム］の背景色になり、色分けを取っ払った上の右図のような感じで表示されます。

メインカラムとサイドバーの背景色を変える

Cocoonでは、サイト全体の背景色は［Cocoon設定］→［全体］タブで設定できます。

ところが、メインカラムとサイドバーの色を設定する場所が見当たりません。

選んだスキンによって、背景色の設定タイプは2つに分かれています。

ひとつは、サイト全体が同じ背景色になっているタイプ。（下図の左側）

もうひとつは、メインカラムとサイドバーが「白」などの別色に設定されていて、境界がわかりやすいタイプです。（下図の右側）

いま、アナタのサイトはどちらでしょうか？

もしもメインカラムとサイドバーの色を変更したい場合は、CSSで対応します。

メインカラムとサイドバーを「白」にする

以下のコードを［追加CSS］に追加します。

白背景にしたい場合は、白のカラーコード#FFFを指定します。

.main, 
.sidebar {
  background-color: #FFF; /*任意のカラーコードに変更*/
}

「白」以外の色を指定する場合は、以下のサイトが参考になります。

メインカラムとサイドバーを「透明化」する

今見えている色を透明にして、背景色と同化したい場合は、透明のtransparentを指定します。

.main, 
.sidebar {
  background-color: transparent; /*透明化*/
}

最後に…

カラムの幅設定についてみてきましたが、実は、このサイトではコンテンツ幅を800pxのまま利用しています。パソコン関連の備忘録として、手順がわかりやすいように図を多用しているため、横幅を優先することにしました。

ただ「見出し2」に続く文章が1～2文字分のインデントが効いたように見せたかったので、コンテンツの余白幅を多めにとって、「見出し2」にCSSのネガティブマージンを指定しています。

ネガティブマージンと言うのは、余白指定にマイナス値を指定することです。

図にすると みたいな感じになります。

マイナス指定した値分が、コンテンツ幅の外側に向かって伸びる仕組みです。

.article h2{
  margin-left: -1em;
  margin-right: -1em;
}

WordPressもCocoonも、HTMLやCSSの知識がなくてもサイトが作れることが「売り」のひとつですが、こんな感じで、CSSを使えば色々とカスタマイズができるので、興味のある方は、CSSの勉強に進んでみることもお勧めですよ。