今回の記事ではコクーンのトップページをカスタマイズする方法を解説します。
と言ってもプロでもないので、あしからず(笑)
コクーンのトップページをカスタマイズ
コクーンのトップページをカスタマイズする方法は(というか他のテーマでも)
大まかに分けると2種類です。
1つ目は、既存のトップページをウィジェットを使ってカスタマイズする。
2つ目は、固定ページでトップページを構築し、設定から編集した固定ページのトップページに指定する。
どっちが良いか？というと ここはお好きにどうぞ…の世界です。
ちなみにトップページというのは、ドメインで最初に出てくるページです。
トップページはこれ ⇒ https://saito-info.com/cocoon/
めっちゃ適当なもの埋め込んでますが構成とはこんな感じ。
綺麗なアイキャッチ画像やパーツを考えていれれば 綺麗になったりするかと思います。
トップページのカスタマイズ方法
一応今回は2カラムでの説明です。
コクーンのデフォルトのトップページをカスタマイズするのであれば 最初はここ。
デフォルト
何もウィジェットを入れてないと記事が新着順や更新順に並びます。
新着の順か更新の順なのかは、
同じくコクーン設定のインデックスで設定できます。
たとえば注目させたい記事が高い頻度であるなら、更新順にしておいて後で少し更新すれば上にでてくるようになります。
そういった使い方をしないなら新着順でも更新順でも同じです。
更新順でも前の記事を更新しなければ順番は新着順だからです。
トップページの表示件数はどこで設定するのか？
で、肝心のトップページの表示件数は、ワードプレスメニューから、
設定⇒ 表示設定で決めます。
では次にcocoon設定のインデックスに戻りましょう。
次は、タブ一覧です。
タブ一覧
どうなるか？というとこのようにデフォルトの新着記事とは違い、特定の記事表示をタブで分ける事ができます。
カテゴリ名でタブが分かれています。
こんな感じのイメージにできると思ってください。
カテゴリ数は合計3種類表示できます。
ただ他のカテゴリを表示したければ別途ウィジェットで、新着情報のウィジェットを使えば 他のカテゴリの最新情報も掲載可能。
カテゴリーごととは？
「新着記事」の下に、新着記事と同じ大きさのカードで「カテゴリーごとの記事一覧」が表示されます。
全てのカテゴリの記事が順番に表示されます。
新着記事は全体の新着順ですが 全体の新着に加えて、カテゴリ別にブロックが分かれると考えて下さい。
このように新着がトップにあってその下部にカテゴリごとに並んでいます。
※サンプル記事とかサンプル２とかサンプル３がカテゴリ名です＾＾
カテゴリ数に制限はないですが、同じく cocoon設定⇒インデックスの フロントページタイプの項目で表示カテゴリを指定できます。
ここに表示したくないカテゴリがあればチェックを外すだけです。
カテゴリごと2カラム
カテゴリごと2カラムは、新着記事の下部に カテゴリ単位で2カラムで表示されます。
これです↓
カテゴリごと３ラム
次は、3カラム最後のデザインです。
しかしカラムで3列の設定を行う場合にはさらに、フロントページタイプ の項目より少し下がった部分で3カラム用のカードタイプにする必要があります。
タイル型3カラムバージョン
縦型カード型バージョン
この2個の違いはあんまりよく分かりません！操作する必要ないと思います！
続いては、インデックスリストのウィジェットです。
cocoonのインデックスリストのウィジェット とは？
そこでサンプルサイトにあるラグビー画像の部分ですが ここには同じ画像を3か所入れています。
それぞれ同じ画像を挿入していますので、だいたいの位置は分かると思います。
サンプルサイトは画像を挿入していますが、だいたい記事に挿入できるコンテンツは、何でも挿入できます。
- CTAボックス
- Facebookボックス
- SNSフォローボタン
- おすすめカード
- テキスト（PC用）
- テキスト（モバイル用）
- ナビカード
- プロフィール
- ボックスメニュー
- ランキング
- 人気記事
- 広告
- 広告（PC用）
- 広告（モバイル用）
- 新着情報
- 新着記事
- 最近のコメント
- 目次
- 関連記事
- ビジュアルエディター
ざっとこんな感じでしょうか？
サンプルサイトのラグビー画像は、インデックスリストトップには、ランキングとビジュアルエディタを選んで画像を貼り付けて、インデックスリストミドルとインデックスリストボトムには、ビジュアルエディタのウィジェットに画像を貼り付けているだけです。
こんな形です＾＾
その結果として、このような感じになりました。
とくにスタイルシートなども触っていません。
※メインカラムの横幅のみ1000PXにしています。
一先ず コクーンのデフォルトでのトップページの定番の編集方法でした＾＾
僕のサンプルサイトは 綺麗とは言えませんが ちゃんと記事を入れたサイトだとコクーンでも有料テーマに適わないほど綺麗になります。
有料テーマでも、デザインありきなので、この辺りは同じです。
もちろん有料テーマを利用しても構いませんが無料のテーマを自分でカスタマイズしながら覚えて、勉強しながら構築すると愛着も沸いてモチベ―ションも保てるので良いかもですよ＾＾
(金だして購入したテーマも愛着が沸くのも事実ですが(笑))
では次は固定ページでトップページをデザインする方法です。
cocoonトップページカスタマイズ２ 固定ページで作成する方法
続いてもう一つは固定ページから作成する方法です。
どちらかと言えば上級者向けかもですがデザイン的には この方法よりも前述した方法で十分なのですが 簡単に説明をします。
簡単に作成したものがこちらです。
ウィジェットを使わずに固定ページの白紙の状態から作ります。
作成したページは、 このメインカラムから表示されます。
一応この場合は、ウィジェットではなく、ブログの投稿の時に挿入できるパーツが対象になるわけですが 殆どのデザインは先ほどのデフォルトのトップページのカスタマイズ方法で編集できます。
ウィジェットにもビジュアルエディタのウィジェットもありますので だいたい何でもできるのですが 細かく拘りたい人は固定ページで作成してみてください。
僕の場合は サンプルでこんな感じにしています。
新着記事や人気記事やカテゴリの選択などがメインになってくると思いますが、色々触ってみて下さい。＾
下書き保存しながら固定ページを編集して完成した後は、そのページを固定ページに設定します。
固定ページをトップページにする方法
作成した固定ページを公開したら、まずワードプレスのメニューの設定から表示設定に移動します。
このように、先ほど作成した固定ページを選ぶだけです。
これで完了です。
サンプルの固定ページをトップページにした状態です。
どちらがいいか？
というと僕のようにスキルのない人間から見ると デフォルトのまま編集が推薦ですかね＾＾；
この辺りは、デフォルトでできない事を 固定ページならできるかどうかを考えて必要に応じて固定ページでトップページを作ると良いと思います。
参考にしてください～👍
