WordPressの無料テーマ、コクーンのサイドバーを消してワンカラムで運用する方法を考えてみた。
管理画面のCocoon設定ではコンテンツ幅を830pxまでしか下げることができない。しかしスタイルシートをカスタムすれば、最小限のコードで1カラムの幅を任意に設定できることがわかった。
Cocoonフォーラムで提案されている方法が参考になった。しかしスマホのAMP表示に弊害が出たのでコードを追記。ついでにwidthではなくpaddingをいじるやり方も考えてみた。
コクーンのサイドバーを取ってコンテンツの幅を調整すれば、見た目がすっきりした1カラムでブログを運用可能。さらにカスタムすれば、noteと似た感じのシンプルなウェブサイトも実現できる。
（2020年1月23日更新）
ワンカラム化CSSコード
まず「Coccon設定＞全体設定＞サイドバーの表示状態＝全てのページで非表示」に変更してサイドバーを消す。
するとメインカラムがサイドバーの分だけ広くなるので、以下の方法で任意の幅に調整する。今回は例として、コンテンツ幅デフォルトの800pxに戻すように設定している。
下の2つの方法は、どちらもCocoon設定のカラム幅は初期状態のままいじる必要がない。スタイルシートだけ編集すれば済む。
【方法1】widthで調整
まず紹介するのはメインカラムとパンくずリストの親要素にあたる、wrapクラスの幅を調整する方法。
これはCocoonフォーラムで、開発者のわいひらさんがご提案されていた。
「ワンカラムの場合の全体幅を指定したい | 要望 | Cocoon フォーラム」
そのまま適用するとスマホ画面が横にはみ出てしまったので、画面幅480px以下の場合にキャンセルする処理を追加した。widthの指定はautoでも100%でも変わらない。
Cocoon子テーマのstyle.cssに以下のコードを追記する。
/*PC用*/
.no-sidebar .wrap {
width: 860px;
}
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
padding-left: 30px;
padding-right: 30px;
}
/*480px以下*/
@media screen and (max-width: 480px){
.no-sidebar .wrap {
width: auto;
}
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
padding-left: 1em;
padding-right: 1em;
}
}画面幅480px以下のモバイル用と、その下のパソコン用で処理を分けている。
.wrapの幅が860pxなのは、後からCocoonデフォルトの左右余白が30px（合計60px）が引かれるため。スマホ版では「パンくずリスト」を本文左端に寄せるため、同じ余白で上書きしている。
もしパンくずリスト自体を有効化していない場合、bloadcrumb関連のコードは必要ない。以下同じ。
AMP用スタイルシート
続いてAMPを有効化している場合は、amp.cssに以下のコードを追記。
.no-sidebar .wrap {
width: auto;
}
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
padding-left: 1em;
padding-right: 1em;
}冗長だがAMP側でもwidth指定のキャンセルが必要になる。
【方法2】paddingで調整
mainクラスのパディングを調整して、任意のテキスト幅に見せる方法も考えてみた。
style.cssに以下のコードを追記。
/*PC用*/
.main{
padding-left: 227px;
padding-right: 227px;
}
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
padding-left: 227px;
padding-right: 227px;
}
/*480px以下*/
@media screen and (max-width: 480px){
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
padding-left: 1em;
padding-right: 1em;
}
}パディング227pxというのはコクーンの初期設定値から逆算されたマジックナンバー。もし800pxとは異なる幅に設定したければ、左右パディングの数値を加減すれば調整できる。
AMP用スタイルシート
widthの場合と同様に、AMP有効化の際はamp.cssにも以下を追記。
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
padding-left: 1em;
padding-right: 1em;
}AMP用にパディングをリセットしないと、スマホ画面が横に広がってはみ出てしまう。style.cssのスマホ部分と同じコードだが、AMP用のスタイルシートにも指定しないと思い通りに反映されなかった。
これで本文を納めるメインカラムのコンテンツ幅と、任意の位置にセットした「パンくずリスト」の幅がどちらも800pxになる。スマホ画面用に設定されているパンくずリスト両端の余白（1em）は保持している。
普通に考えると、親要素のwidthを指定するやり方の方が自然かもしれない。
なおどちらの方法でも、Cocoon設定＞カラムでメインコンテンツの幅や余白をカスタムすると表示がずれる。CSSで直接制御するならCocoon設定の方はいじらない方が混乱が少ない。
以下は試行錯誤の過程をメモしたもの。
コクーンのサイト幅計算式
Cocoonマニュアルの「カラム幅変更」を参照すると、コンテンツ全体の幅は以下の計算式で決められている。
全体の幅＝コンテンツ幅+（コンテンツ余白幅×2）+（コンテンツ枠線幅×2）+カラム間の幅+サイドバー幅+（サイドバー余白幅×2）+（サイドバー枠線幅×2）
以下のカラム設定デフォルト値を代入してみると、
- メインカラムのコンテンツ幅：800px
- メインカラムのコンテンツ余白幅：29px
- メインカラムのコンテンツ枠線幅：1px
- サイドバー幅：336px
- サイドバー余白幅：19px
- サイドバー枠線幅：1px
- カラム間の幅：20px
800+(29×2)+(1×2)+20+336+(19×2)+(1×2)=1,256px
となり、ブラウザ上での実測値と一致する。
CSSへの反映を確認
WordPress管理画面「Cocoon設定＞カラム」で設定した数値は、各パーツのスタイルシートに反映される。
たとえばメインコンテンツを納めるmainブロックの場合、デフォルトでは幅860px、左右パディングが余白29+枠線1＝30pxにセットされる。
ブロックの幅から余白を引くと、
860-(30×2)=800px
となり、メインカラムのコンテンツ幅初期値と一致する。
サイドバー非表示で1カラム実現
ここでサイトを1カラム化するため、「Coccon設定＞全体設定＞サイドバーの表示状態＝全てのページで非表示」にセットしてみる。
こうすればサイドバーにウィジェットを残したままでも、手っ取り早く1カラムにできる。
すると気づくのは、サイドバーが消えた分だけメインカラムが横に広がってしまうことだ。メインのコンテンツ幅＝800pxという設定値は無効になり、サイト全体の幅1,256pxまで拡大される。
これはこれで読みやすいかもしれないが、テキスト主体のブログとしてはやや広すぎる。
また今までワードプレスの「メディア設定＞画像サイズ＞大サイズ＞幅の上限」をCocoonデフォルトの800pxに設定していた。ワンカラムにしても幅800pxを保てば、これら「大サイズ」設定のが画像がテキスト幅いっぱいまで広がってくれる。
そこでサイドバー非表示にしても、メインカラム＝サイト全体の幅を初期設定800pxに保つ方法を考えてみたい。
設定上の1カラム最小幅は810px
「Cocoon設定＞カラム」で設定できる幅や余白には、それぞれ以下の最小値が決められている
- メインカラムのコンテンツ幅：600px
- メインカラムのコンテンツ余白幅：10px
- メインカラムのコンテンツ枠線幅：0px
- サイドバー幅：200px
- サイドバー余白幅：5px
- サイドバー枠線幅：0px
- カラム間の幅：0px
これより小さい値は管理画面のフォームから入力することができない。最小値を上記の計算式にあてはめると、サイト全体の幅は以下のようになる。
600+(10×2)+(0x2)+0+200+(5×2)+(0x2)=830px
ここからmainブロックの左右パディング各10pxを除いた値は810px。これが1カラム化した場合にCocoon設定「のみ」で実現できる最低幅だ。
1カラム幅800pxの実現方法
もしこれよりメインカラムの幅を狭めたい場合は、スタイルシートを上書きするしかない。
Cocoon設定では詰めきれなかった残り10pxは、CSSにコードを追加することで削減できる。やり方としては以下の2通り。
- mainブロック自体の幅を狭める
- mainブロックの余白を詰める
divタグ自体のwidthを制御するか、デフォルトで設けられているpaddingを広げるか。ややトリッキーだが案外後者の方が無難かもしれない。
①.wrapのwidth設定
以下のCocoonフォーラムの議論を参照させていただいた。
「ワンカラムの場合の全体幅を指定したい | 要望 | Cocoon フォーラム」
ソースコードを確認すると、サイドバーを非表示にしたことによりbodyタグに.no-sidebarというクラスが追加されている。そして.mainクラスによるwidth設定が打ち消されて100%になっている。
具体的な幅を設定しているのは、div#content-inにかかる.wrapというクラス。ここをCSSで以下のように上書きすれば、mainの幅が820pxになる。
.wrap {
width: 810px;
}初期設定のパディングを引けば、見た目上のサイト全体幅を800pxぴったりにできる。
.no-sidebarはサイドバーを非表示設定したときのみ出現するクラスなので、これと.wrapのセレクタを組み合わせれば汎用性を維持できる。
上記コードはサイドバーを復活させた場合に無効化される。そのため1カラムをやめてデフォルトの2カラムに戻したとしても、メインカラムやサイト全体幅に影響を及ぼすことがない。
そもそも.wrapの幅を設定しておけば、Cocoon設定のカラム関連は一切いじる必要がなかった。コンテンツ幅や余白などは初期値のままでも、CSSで設定した値が優先的にセットされる。
するとコクーンのメインカラム余白がデフォルト30pxのままなら、
.no-sidebar .wrap { width: /* 目標幅＋60 */px; }と指定すればちょうどよい幅に収まる。800pxにしたければ860pxを指定すればよい。
スマホ用にwidthをキャンセル
ただし問題がひとつ残っていた。
.no-sidebar .wrap{…}の記述をスタイルシートに追記すると、モバイル端末にもこれが適用されてしまう。
本来300～400dpしか幅がないスマホ画面に800pxの横幅を指定すると、中身が収まらず途中で切れてしまう。そしてブラウザに横スクロールのバーが出現。
これはまずい。
スマホ表示画面（右側が切れている）
試行錯誤した結果、max-width: 480px対象の部分に、以下のコードを追記すれば解決できるとわかった。
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く
.no-sidebar .wrap {
width: auto;
}
}パソコン用に指定したdivのwidthを、autoまたは100%に指定してキャンセルすればよい。邪道かもしれないが、!importantを付けて優先順位を上げないとうまく適用されなかった。
→画面幅480px以下のメディアクエリをPC用のコードより下に書けば問題なかった。
【注意】AMP用にコードの修正が必要
これで一件落着かと思いきや、もうひとつ重大な問題があることに気づいた。
Cocoon設定でAMPを有効化している場合、上記CSS設定のうちスマホ用のwidthキャンセルが効かないようだ。
GoogleにキャッシュされたAMPページを見ると、またしてもサイトの横幅が切れてしまっている。
スマホAMPページ表示画面（右側が切れている）
やや冗長だが、AMP用のamp.cssにも以下のコードを追記する必要があった。
.no-sidebar .wrap {
width: auto;
}AMPでは横スクロールバーが表示されないので、画面が切れていると文章が読めずアウト。事前に表示を確認しておいてよかった。
②.mainのpadding設定
もうひとつの方法は.mainクラスにもともと設定されている余白を広げること。
デフォルトで左右10pxになっている数値を5pxずつ広げて15pxに設定すればよい。Cocoon設定で810pxまで減らせた内寸が、さらに狭まって800pxになる。
.main {
padding-left: 15px;
padding-right: 15px;
}ブラウザ上、Chromeのデベロッパー・ツールでも確認できた。
コクーンのテーマを1カラム化する際に、管理画面から設定できる幅の最小値は810px。これより狭くしたい場合は、CSSをカスタムして任意のサイト幅を実現できる。
そもそもCSSにコードを書けばCocoon設定のカラム指定は必要ないとわかったので、メインもサイドバーも余白・枠線などデフォルトのままでOK。
以下のように左右227pxと広めにパディング指定すれば、計算によりコンテンツ内寸が800pxに収まる。
.main {
padding-left: 227px;
padding-right: 227px;
}このやり方でテキストの幅は自由に指定できる。
パンくずリストの位置ずれ対策
パディング調整でも任意幅の1カラムは実現できたかと思った。
しかしパソコン画面で見ると、記事タイトルの上にある「パンくずリスト」の位置がおかしい。画面左端まで寄ってしまっている。
コクーンの「パンくずリスト」はメインコンテンツの外に配置される。もし表示をオンにしているなら、.mainとは別に設定が必要になる。
結局パンくずリストを制御する.breadcrumbクラスにも、パディング227pxを設定してスマホ側でキャンセルする必要があった。
スマホ/AMPページでは左右に1emの余白をとらないと、パンくずリストが本文より左に寄ってしまう。
Cocoon設定において、パンくずリストの配置は以下4種類のオプションが用意されている。
クラスのセレクタは適用している1種類だけ記述すれば問題ない。「メインカラム手前」なら.breadcrumb.sbp-main-beforeだけで済む。
エディターを幅広にする小ネタ
以上で自分のPC/Androidスマホ環境では、AMPページも含めてベストなコンテンツ幅に設定できた。
Cocoon設定よりスタイルシートの値が優先適用されるとわかったことで、記事の執筆作業を効率化する小技を思いついた。
Cocoon設定＞エディター＞エディター共通設定＞エディタースタイル＝「エディターにテーマスタイルを反映させる」を選んでいる場合、WordPressの記事編集はメインカラムの幅と一致する。
ここであえてメインカラム設定＞コンテンツ幅に最大値1,600pxなど入れれば、ウェブサイトの見た目は変えずに編集画面だけワイドにできる。ブログの幅は.wrapのwidthで指定されたまま影響を受けない。
フルHDクラスのディスプレイでフルスクリーン表示すれば、思い切り画面を広く使って執筆に集中できる。
ワードプレスに備わっている「集中執筆モード」と併用すれば効果は抜群。4Kモニターでは下のキャプチャ画像のように広々使えてしまう。
今まで680pxや800px幅の編集画面で、ちまちま記事を書いていたのが馬鹿らしく思えるほど。解像度の高いディスプレイを持っている人なら、ぜひ試してみてほしい。
ウェブサイトの適切な幅とは
最近はレスポンシブで幅広なサイトが増えている。しかし文章メインのブログで幅1,000pxを超えるようなサイトはあまり見かけない。
コクーンがメインカラムの幅を800pxに設定しているのは、それなりに理由があるのだろう。前テーマのSimplicityは幅680pxだったが、ここ数年のトレンドからするとやや狭く感じてしまう。
ウェブサイトの適切な幅は、その時代のモニター解像度と連動しているように思う。
XGA（1,024×768）やSXGA（1,280×1,024）が主流だった1990年代であれば、ホームページの幅が640px程度でも十分ワイドに感じられた。
2020年になってフルHD（1,920×1,080）や4K（3,840×2,160）が当たり前になってくると、20年前につくられたウェブサイトの幅はもう狭すぎて文章が読みにくい。
サイトデザインの中でも「幅の狭さ」というのは、特に時代を感じさせる要素だ。
文章幅が広すぎると目が疲れる
その一方で、かたくなに狭いコンテンツ幅を維持するウェブサイトもある。
たとえばnoteの本文幅を測ると内寸はたった620pxしかない。その代り本文以外にサイドバーなど余計な要素がないので、文字が読みにくいというわけでもない。
Cocoonのサイドバー非表示にした幅は1,256pxとnoteの2倍以上。情報が圧縮されているように見えて、目の水平移動距離が増えるので文字を追うのが疲れる。
幅広サイトは眼球運動・エクササイズには効果がありそうだ。しかしテンポよく長文を読みこなしていくには、適度に狭めたテキスト幅の方が楽に感じる。
スマホとパソコン画面の整合性
本記事の考察はすべてパソコン画面に関するもの。スマホ画面の解像度はまだ幅300～400dpが主流なので、意識せずともコクーンなら1カラムで表示される。
ブログ記事を書いていて悩ましいのは、文章の改行頻度をPCとスマホのどちらに合わせるかという点だ。
スマホ向けには1～2文で改行した方が、適度に余白を空けて読みやすくできる。しかし幅800pxもあるパソコン画面でそれを見ると、行間がスカスカで中身の薄い文章に見えてしまう。
Googleアナリティクスの統計を見れば、今ではパソコンよりスマホやタブレットでブログを読んでくれる人の方が多い。
するとスマホ向けを意識して、改行や見出しを多めに入れた方がベターでないかと思う。
ほかの流行っているブログやウェブサービスを観察すると、たいてい1行で改行してさらに途中に空行も挟むようなテクニックが見受けられる。
ビジネス文書や論文のように3～4行も続けて段落を構成すると、スマホでは圧倒的な文字の固まりに見えてしまう。内容以前に堅苦しくて不親切な印象を受けてしまう。
noteの幅が狭い原因を推測
そう考えるとnoteがあえて、620pxという狭いコンテンツ幅をキープしている理由もわかる気がする。
パソコン上でもスマホ画面を意識して作文できるということだ。
見た目がそのままスマホと同じというわけではないが、文章を数行続けると明らかに詰め込みすぎ、と自分で気づける。
WordPressでブログを書いていても、最終的にスマホでどう見えるかチェックするのは必須の作業。Chromeのデベロッパー・ツールなど使えば、パソコン上でスマホ画面をシミュレーションすることもできる。
noteでは編集環境とスマホ画面のルックスをなるべく揃えることで、執筆者がスマホでプレビューする手間を省いているように思われる。
これは同時に「スマホを見る感覚でPCサイトも見てほしい」というコンセプトではないだろうか。
デバイス間で見た目の差をなくして、シームレスなユーザー・エクスペリエンスを提供したいのかもしれない。
noteもどきの1カラムCocoon
いろいろ考えるとCocoonのメインカラムも初期値の800pxにこだわらず、Simplicity時代の680px、もしくはnote並みの620pxまで下げてもいいのかもしれない。
サイドバーに比べてメインカラムが狭すぎると、文章を読んでいる際に圧迫感を覚える。しかしサイドバー非表示のワンカラムなら、noteライクなシンプルデザインをWordPressでも実現できる。
見出しやテキストのスタイルシートまでそのままパクれば、WordPress＆Cocoonでnoteそっくりのブログを作ることも不可能ではない。
noteよりWordPressを使う理由
「そこまでnoteが好きならnoteで記事を書けばいいのでは」という気がしないでもない。
ワードプレスの方が設定の自由度は大きいが、カスタム沼にはまると執筆時間を奪われてしまう。また記事を有料販売できる可能性があるのもnoteのメリットだ。
しかしnoteで独自ドメインを使うには、月額50,000円もするnote proに申し込む必要がある。
これは以前使っていた「はてなブログPro（月額600円～）」と比べて高すぎる。はてなもプロ契約すれば、独自ドメインが使えるのが売りだった。
2017年にnoteで独自ドメインのベータ版公募が出たときは興味をもったが、結局高額なproサービスとしてリリースされてしまった。もはや市井の個人ブロガーが手を出せる金額ではない。
「独自ドメインで見た目がnote風なサイトを運営したい」
無料テーマのコクーンをワンカラム化して飾りをそぎ落とせば、お金をかけずに外観だけnoteの真似をすることはできる。
