Cocoonでトップページをサイト型+ブログ型の融合デザインにする！

「トップページに新着記事がズラッと並ぶのに飽きた」「いわゆるホームページみたいなトップページにしたい」という方へ。この記事では「Cocoon」を使っていわゆる「ブログ型」から「サイト型」へトップページを一新し、さらに「サイト型」と「ブログ型」を融合したデザイン例をお伝えします。

目次(クリックでジャンプ)

ブログ型からサイト型へ

普通「ブログ」といえばトップページでは新着記事一覧が表示されます。

「ブログ」型のトップページ

一方、カテゴリー等を選択できるようにした「サイト型」トップページがこちらです。2019年7月21日時点での一応完成形。

「サイト」型のトップページ

「サイト型」の方が記事の分類(カテゴリー・タグ)構造と見た目のデザインが近いので、ユーザー目線で目的の記事にたどり着きやすいという利点があります。

では順を追ってサイト型に変更していきましょう。

トップページ設定の変更

固定ページを作る

まず仮でよいのでトップに表示される予定の固定ページを作っておきます。

ホームページ表示の設定を変更

次に「設定」「表示設定」から「ホームページの表示」を「固定ページ」に変更し、表示したいページを選択します。

固定ページが一つもないと、この変更自体が出てきませんので注意して下さい。(私はそれで1時間以上ハマって発狂していましたｗ)

表示要素の調整

サイトのトップを表示するとこのようになります。

通常の固定記事と同様に、タイトル、日付、SNSシェアボタン、SNSフォローボタンが表示されています。これらが邪魔な場合は子テーマのCSSに記述を追加します。

先程の4つのアイテムのクラスはそれぞれ「.home.page .entry-title」「.home.page .date-tags」「.home.page .sns-share」「.home.page .sns-follow」なので、消したいアイテムに「display:none;」を指定します。

例えばSNS関係の2つの表示を消したい場合は、このように記述すると…
.home.page .sns-share,.home.page .sns-follow
{display:none;}

こうなります。

さらに、以下のように記述すると…
.home.page .entry-title,.home.page .date-tags
{display:none;}

こうなります。

空っぽのページができあがったので、ここから必要な要素を付け足していきましょう。

最低限のナビゲーションを入れる

タイトルと本文

個人的にはタイトルと日付があったほうが落ち着くので、タイトル日付を表示させ、トップページらしいタイトルにして本文もそれらしくします。

カテゴリーへのリンク

さらに、読者に読んでほしいカテゴリーページやタグページへのリンクをおきます。
これらのリンクはトップにあるナビメニューと同じものですが、モバイルではナビが表示されないので、その代わりのつもりです。

モバイルでの表示を確かめます

ユーザーを目的のカテゴリ・タグに誘導する最低限のナビゲーションができました。上記画像の場合、「おすすめ記事・特集」というのはカテゴリーを横断したタグページになっています。(カテゴリ分けを最小限にとどめてタグを活用する実験をしています)

時間がない場合は、これでも十分でしょうね。

リンクをボタンにする

実用上は十分だと思いますが、簡素で見栄えがしないので、これらのリンクを大型のボタンにしてみましょう

ボタンの作り方

このボタンは、リンクのタイトルと説明を<div>~</div>で囲んだボックスに入れて、ボックス全体をクリックできるようにしたものです。

詳しくは「ボタンの作り方」を見て下さい

ボタンの並べ方

横長で無色透明な親ボックスを3段に並べ、その中にカテゴリーを表示する子ボックスを配置する。

親要素のボックスには「display:flex; justify-content: space-around;」を記述し、子要素のボックス(ボタン:「ctg-box2」)には「flex: auto;」を記述

するとボタンを2つ配置しようが3つ配置しようがぎっしり詰まって横に並んでくれる！(便利で泣きそう)