【cocoon】ブログのインデックスページのレイアウトをカスタマイズ

ブログデザイン

本日の記事は、ちょっと備忘録的な位置づけの内容となっている。忘れないうちに記事にしておかないと、「どうやったっけ」なんてことになるからね。

さて、このブログ、ワールドプレスを使っていて、レイアウトは無料テーマとして提供されているcocoonを使わせてもらっている。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

自由度が広くて使い勝手がいいテーマなので、迷ったらとりあえずコレでいいと思う。それくらい出来のいいテーマだ。

ただ、初期状態だとだんだん物足りなくなるのも事実で、特にデザイン面では色々と手を入れたくなる。

そんな訳で本日はインデックスページのカスタマイズについて紹介していく。

スポンサーリンク
カテゴリ別人気記事
<カテゴリ別人気記事>
スポンサーリンク

狙いに合わせて変更しよう

インデックスページのレイアウト

で、一番多くの人が目にするであろうトップページに、このブログではインデックスページを採用している。cocoonではデフォルトでトップページがインデックスページとなるので、最初はみんなその設定なんじゃないかな。

こんなページだね。

何も手を入れない状態だと、インデックスページには新着記事が何本か並ぶ形になるんだけれど、それで見やすいか?という点に関して、最近疑問を持つようになってきた。

このブログでアクセスが多いのはインデックスページで間違いないのだが、最新の記事だからといってよく読まれるというわけではない。何故なら、検索した目的の記事に直接飛ぶ人が多いからだ。

人気記事のトップ5には左にあるような記事が並んでいる。

一応、30日間でのアクセス数が多いい順番で並んでいるのだが、残念なことにこの順位はほとんど入れ替わらない。

一時期は、ニュース関係の記事も並んでいたのだけれど、ニュースの人気は一過性であることが多い。

そんなわけで、ブログの記事の内容から考えて、新着記事だけでは不親切だろうという結論に至った。

で、どうしたかというと、こんなレイアウトを追加。

カテゴリ別で記事が表示されるようにしたのである。尤も、人気記事の順番にはなっていないので、このあたりはまだ弄る余地はあると思う。要はトップページから、カテゴリ別の人気記事にアクセスできるようにした方が、親切だろと、そう考えたわけだ。

変更方法

この手の変更は、cocoonであれば難しい事をしなくても出来てしまう。

管理画面から「cocoon設定」>「インデックス」と選ぶと、フロントページタイプを選ぶことができる。ここで「デフォルト」になっている一覧から、「カテゴリごと」を選んであげればOKだ。

コチラの記事で、グローバルナビの話を書いたのだけれども、実はインデックスのレイアウトを弄るだけでも似たような事ができるのだ。

……とまあ、こんな感じでCocoonでは色々とインデックスページを弄る機能があるのだけれど、似たような表示を別の機能を使って表示することもできる。

インデックスページと記事ページ

グローバルナビとカテゴリー別の表示

似て非なる話ではあるのだが、先ずはグローバルナビについて。

グローバルナビというのは、タイトルの下に設けてある赤枠の中に入っているコレだ。ボタンを押すとカテゴリー毎の新着記事を表示してくれる。

例えば「キッチンアイテム」を選ぶと、このようになる。

カテゴリー別の新着順に並ぶような表示になるので、分かりやすいと思う。

ところが似たような機能にインデックスページのレイアウトのところを触っても似たような事になる。

インデックスページの表示がこんな感じになるのだ。

これは、「cocoon設定」>「インデックス」と進んで、フロントページタイプで「タブ一覧」を選んだ結果である。カテゴリーを選択できるようになるので、例えば「家電製品」を選ぶとこうなる。

……これって、グローバルナビと同じ様な機能だよね。更新順に並ぶし。

もちろん、これは「好きな方を選べばOK」と言うことになるのだけれど、インデックスページから記事に飛ぶとグローバルナビの方は残るのだけれども、表示形式はあくまでもインデックスページだけのものなので表示されなくなるので要注意だ。

記事ページの表示を弄る

さて、そもそもインデックスページを触りたかったのは、人気記事をお知らせしたかったからである。しかし、今のところ更新順にしかならないので、じゃあどうしたか?というと、記事ページの方で表示することにした。

これは「外観」>「ウィジェット」と進んで、「投稿本文上」「投稿本文中」「投稿本文下」の何れかにウィジェットを追加することで実現ができる。

僕は、投稿本文中を選び、「テキスト」と「人気記事」を追加している。するとこんな感じになる。

「テキスト」の中には「カテゴリ別人気記事」というタイトルを書き、「人気記事」は30日間で人気のあるトップ3の記事を表示できるようにした。これで、人気記事に誘導もできるわけだ。

「投稿本文中」を選ぶと、「目次」の上に配置されるようだ。

ユーザーフレンドリーになるのか?

えー、正直自己満足です、ハイ。

もちろん、カテゴリー別の人気記事を表示できる様にしたことで、見て頂ける期待度は高まったワケなんだけど、じゃあ、効果が得られるかというとコレがよく分からない。更にそれがユーザーフレンドリーになるかというと、さっぱりである。

まあ、今後分析をしていくことで、「効果があったか」は調べていきたいと思う。

ただ、この様に色々と表示が選べるのが「cocoon」の良いところだね。

コメント

タイトルとURLをコピーしました