新しいLinkRingを作るとき、最初に迷ったのがWordPressテーマでした。
有料テーマも候補にしましたが、今回は無料のCocoonを選びました。実際にトップページを作り込んでみると、WordPress標準ブロックとCocoonの機能、それに少しのCSSで、想像していたよりかなり自由に作れました。
この記事では「Cocoonにはこんな機能があります」という網羅的な説明ではなく、LinkRingのトップページを実際にどう組んだかを残しておきます。
最初に「雑記ブログらしさ」を残すと決めた
トップページを作る前に決めたのは、きれいな商品比較サイトにはしないことでした。
LinkRingは、買ったもの、家のこと、本や映画、家族で出かけた場所、仕事で考えたことを一つの場所に置くブログです。テーマを一つに絞るより、初めて来た人に「こういう雑記ブログなんだ」とすぐ分かる方が大事でした。
そこでトップに置いた言葉が、
「買ったもの、読んだもの、行ったところ。」
です。
カテゴリーも細かくしすぎず、「買ったもの」「暮らし」「読んだ・観た」「出かけた」「仕事・考えたこと」の5つにしました。
固定ページをホームにして、1カラムで作った
トップページは、投稿一覧をそのまま表示するのではなく「Home」という固定ページを作って、それをホームページに指定しました。
WordPressには固定ページをホームページにする標準機能があります。Cocoon側では固定ページごとに1カラム表示へ変更できるので、LinkRingではトップだけサイドバーを外し、横幅を広く使っています。
WordPress公式：Create a static front page
Cocoon公式：投稿・固定ページを1カラム表示する方法
記事ページにはサイドバーがあってもいいのですが、トップページは「入口」なので、情報を左右に散らしすぎない方が見やすいと感じました。
トップページは、大きく6つのブロックに分けた
いまのトップページは、ざっくり次の順番です。
- LinkRingが何のブログかを伝えるヒーロー部分
- おすすめの記事
- 新着記事＋プロフィール／カテゴリー
- 5カテゴリーそれぞれの記事一覧
- 各カテゴリーへのボタン
- 「LinkRingについて」
最初から全部を一気に作ったわけではありません。まず骨組みをWordPressのカラムブロックで作り、カードを置き、最後に余白や文字サイズをCSSで調整しました。
おすすめ記事はnew_listのordered_postsが使いやすかった
最初はCocoonのナビカードを使って、おすすめ記事を3枚並べようとしました。
ナビカードは好きなリンクをカードにできるので便利です。ただ、今回ほしかったのは「アイキャッチ、タイトル、本文の抜粋、日付」がそろった記事カードでした。
Cocoonの navi_list には snippet オプションがなく、説明文を使う方法はあります。一方、new_list には本文の抜粋を表示する snippet と、好きな投稿IDを好きな順に並べる ordered_posts があります。
そこで最終的には、こんな形にしました。
これなら「おすすめ3記事」も、新着記事も、カテゴリー別記事も同じ系統の見た目で揃えやすいです。
Cocoon公式：新着記事一覧を表示するショートコード
Cocoon公式：ordered_postsの使い方
CSSは「全部作り直す」のではなく、足りないところだけ
Cocoonを選んだのに、HTMLもCSSも全部自作してしまったらテーマを使う意味が薄くなります。
なのでLinkRingでは、レイアウトそのものはWordPressとCocoonに任せ、CSSは次のような部分だけに使っています。
- トップのタイトルの文字サイズと改行
- おすすめ記事をPCで3列にする
- カテゴリー記事を2列にする
- 見出し間の余白
- カテゴリー名の小さな英字ラベル
- スマホで1列に戻す
- ヘッダーのキャッチフレーズ位置
CSSはCocoon Child側に置いています。WordPress公式も、テーマファイルを直接変えるとアップデートで変更が失われるため、独自カスタマイズには子テーマを検討するよう案内しています。
いちばんハマったのは、青い縦線の3pxだった
トップ右側の「このブログについて」には、左に細い青線を置いています。
ただ、この線と文章の間を少し空けたくて padding-left を指定しても、なぜかまったく動きませんでした。
原因は、別のCSSで指定していたより強いセレクターでした。親のカラムに対する padding: 0 !important; が勝っていて、あとから書いたクラスの余白が効いていませんでした。
最終的には右カラムをより具体的なセレクターで指定し、青線自体は疑似要素で描画する形にしました。
見た目としてはたった数ピクセルの違いなのですが、こういうところを詰め始めると一番時間が溶けます。
「Home」はグローバルメニューに置かなかった
メニューも少し迷いました。
最終的にはグローバルメニューを5カテゴリーだけにして、Homeは入れていません。ロゴを押せばトップへ戻れますし、メニューは「次にどの記事を読むか」のために使いたかったからです。
同じ理由で、カテゴリーを10個、20個と増やすこともしませんでした。昔の記事を整理しているとカテゴリーは細かくしたくなりますが、今は5つくらいの方が自分でも迷いません。
Cocoonで十分だった、というのが今の感想
有料テーマの方が、最初から整ったデザインを作りやすい部分はあると思います。
でもLinkRingの場合、Cocoonの1カラム固定ページ、ショートコード、WordPress標準のカラムやボタン、子テーマCSSを組み合わせれば、作りたかったトップページにはかなり近づけました。
むしろ途中からは「テーマの機能が足りない」というより、「どの記事をトップに出すか」「文章をどう見せるか」の方が大事になりました。
これからブログを作り直すなら、最初から見た目を100点にしようとせず、まず記事を書ける状態まで持っていく。そのくらいでちょうどいい気がしています。
WordPressを作り直した全体の流れは、こちらにもまとめています。
