Cocoonでブログを開設したけど、この後何をすればいいのか分からない人向けに、実際にやった流れを最初にまとめた。
先ずは、始める時には、というお話。
① 初期設定
→ ブログ構築の準備をしよう｜ゼロから始めるブログ構築
② 何を書くか
→ ここは概念的な話になって、別記事にはまとめていないのだけれど。簡単に言うと、自分が得意な分野を重点的に書くと良いと思う。少なくとも30記事くらいは書ける分野が望ましく、書くのに苦にならない内容が良いよ。
③ トラブル対処
→ 商品取得エラーが出まくる事態に
→ ブログ引っ越し後、アクセスが回復しなかった理由
続いて、このページではインデックスページに現れる記事のタイトルに関して、カスタマイズする方法を紹介する。
このブログ、Word Pressを使っていてレイアウトは無料テーマとして提供されているcocoonを利用させて貰っている。
自由度が広くて使い勝手がいいテーマなので、迷ったらとりあえずコレでいいと思う。それくらい出来のいいテーマだ。
ただ、初期状態だとだんだん物足りなくなるのも事実で、特にデザイン面では色々と手を入れたくなる。
最初に手を付けるのはトップページとなるインデックスページのカスタマイズだ。
注：2026年4月に大きく修正をしています。
狙いに合わせて変更しよう
インデックスページのレイアウト
で、一番多くの人が目にするであろうトップページに、このブログではインデックスページを採用している。cocoonではデフォルトでトップページがインデックスページとなるので、最初はみんなその設定なんじゃないかな。
こんなページだね。
何も手を入れない状態だと、インデックスページには新着記事が何本か並ぶ形になるんだけれど、それで見やすいか？という点はやや疑問だ。
記事を何本か書くと、そのうちにヒットする記事、そうではない記事と別れてくる。2021年2月の次点ではこんな感じだった。
今？2026年4月現在ではこんな感じかな。
過去1年間に限るとこんな感じではあるが、実は、全期間にするとそれほど大きな変化はない。
いずれにせよ、最初にアクセスした時に「よく読まれている記事」が目に入ってくることは大切で、新着順に記事が並んでいるだけでは満足してくれない可能性もある。
で、どうしたかというと、こんなレイアウトを追加。
このレイアウトを今は採用していないのだが、カテゴリー別にしておくことは悪くはないと思う。トップページから、カテゴリ別の人気記事にアクセスできるような設計である。
変更方法
この手の変更は、cocoonであれば難しい事をしなくても出来てしまう。
管理画面から「cocoon設定」＞「インデックス」と選ぶと、フロントページタイプを選ぶことができる。ここで「デフォルト」になっている一覧から、「カテゴリごと」を選んであげればOKだ。
インデックスページと記事ページ
グローバルナビとカテゴリー別の表示
似て非なる話ではあるのだが、先ずはグローバルナビについて。
グローバルナビというのは、タイトルの下に設けてある赤枠の中に入っているコレだ。ボタンを押すとカテゴリー毎の新着記事を表示してくれる。
クドいようだが、2026年現在はデザイン変更がなされているが、そちらの話は別で語っている。
ただ、分かり易さでいうと2021年の時点の記事の方が優れているので、そちらの説明を続ける。
例えば「キッチンアイテム」を選ぶと、このようになる。
カテゴリー別の新着順に並ぶような表示になるので、分かりやすいと思う。
ところが似たような機能にインデックスページのレイアウトのところを触っても似たような事になる。
インデックスページの表示がこんな感じになるのだ。
これは、「cocoon設定」＞「インデックス」と進んで、フロントページタイプで「タブ一覧」を選んだ結果である。カテゴリーを選択できるようになるので、例えば「家電製品」を選ぶとこうなる。
……これって、グローバルナビと同じ様な機能だよね。更新順に並ぶし。
もちろん、これは「好きな方を選べばOK」と言うことになるのだけれど、インデックスページから記事に飛ぶとグローバルナビの方は残るのだけれども、表示形式はあくまでもインデックスページだけのものなので表示されなくなるので要注意だ。
記事ページの表示を弄る
さて、そもそもインデックスページを触りたかったのは、人気記事をお知らせしたかったからである。しかし、今のところ更新順にしかならないので、じゃあどうしたか？というと、記事ページの方で表示することにした。
これは「外観」＞「ウィジェット」と進んで、「投稿本文上」「投稿本文中」「投稿本文下」の何れかにウィジェットを追加することで実現ができる。
僕は、投稿本文中を選び、「テキスト」と「人気記事」を追加している。するとこんな感じになる。
「テキスト」の中には「カテゴリ別人気記事」というタイトルを書き、「人気記事」は30日間で人気のあるトップ３の記事を表示できるようにした。これで、人気記事に誘導もできるわけだ。
「投稿本文中」を選ぶと、「目次」の上に配置されるようだ。
これが使い易いかは、サイトによるとしかいえないので、分析をしながら調整を加えていくべきなんだろうと思う。
インデックスページのタイトルを変更する
基本スタイルはシンプル
続いて、基本スタイルについて紹介しておこう。
基本的には太字でタイトルを示し、それに続いて細かい文字で内容を冒頭の文字から規定文字数抜いて表示している。見て頂くと分かるのだけれども、実にシンプルだ。
シンプルなのは見易いが
ただ、シンプルなことは良いのだが、バランスが少々悪い感じがする。
赤枠に番号を振ってあるが、１番はサムネイル、２番はタイトル、３番は記事の内容というスタイルになっている。
ここで、上のカードの高さと下のカードの高さが違う事にお気づきだろうか？実はこれ、サムネイルに使う画像の高さによって変化してしまうのだ。
タイトルのデザインを変更しよう
さて、画像の高さに関しては揃えてしまえば問題解決するのだが、タイトルのデザインの方はCSSを触って変更していく必要がある。
タイトルのデザインについては、様々なサイトが丁寧に解説してくれているので、ここで改めて説明するのもどうかと思う。参考にしたサイトを紹介しよう。
このサイトから、以下のようなデザインを選ぶ事にした。
このサイトではCSSのテンプレートまで紹介されていて至れり尽くせりなのだけれど、そのまま使う事はできない。
何処が問題かというと、紹介されているコードは、＜h2＞ラベルに定義する格好になっているのだが、インデックスページでは＜h2＞を使っていない。
じゃあ何なのか？というと、「.entry-card-title{}」である。
/* タイトル設定 */
.entry-card-title{
position: relative;
padding: 1rem 1rem;
margin: 20px 0;
}
.entry-card-title:after{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
content: '';
background-image: -webkit-repeating-linear-gradient(135deg, #A5DF00, #A5DF00 1px, transparent 2px, transparent 5px);
background-image: repeating-linear-gradient(-45deg, #A5DF00, #A5DF00 1px, transparent 2px, transparent 5px);
background-size: 7px 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
そんな訳で、いつものように子テーマのスタイルシート(style.css)にコードを追加していく。
詳しくは引用したサイトに説明されているので省略するが、「.entry-card-title{}」の中身にコードを書いてあげれば色々変更できると思う。
内容に関する提案
あとは、３番目の記事の内容というのは、記事毎に設定されていくのだけれども、インデックスページに抜き出されたときに意味が分かるよう、調整しておくと良い。
「cocoon設定」＞「インデックスページ」と進んで頂いて、「自動生成抜粋文字数」という項目があって、「最小：0 最大：500」という制限がある。僕はここを「60」と設定している。
この文字数で理解できる内容を書くようにしておくと、一見把握性が高くなって、よりユーザーフレンドリーになると思う。
タブレットやスマホでは？
なお、こうしたカスタマイズをすると、色々な方面に影響してきてしまう。そこはちょっと注意が必要である。
左側がタブレットで右側がスマホである。タブレットの方は良さそうだが、スマホの方はちょっと困るね。
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
/*必要ならばここにコードを書く*/
}
/*1030px以下*/
@media screen and (max-width: 1030px){
/*必要ならばここにコードを書く*/
}
/*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
子テーマのスタイルシート(style.css)にはこの様な部分があり、スマホであれば480px以下の部分で対応させることが可能な様だ。
……ところが残念な事に現時点で上手いこといかなかった。そこで考え方を切り替える。「レスポンシブデザイン用のメディアクエリ」の内容は、「max-width」を使っている。ところがこの書き方だと、スマホ向けに表示を書き換えるという発想になってしまうのだが……、上書きに失敗しておかしな表示になっていると考えられる。
となれば、逆に、「min-width」を使えばいいんじゃないかな、と。そこで上のコードをこの様に変更した。
/* タイトル設定 */
@media screen and (min-width:600px){
.entry-card-title{
position: relative;
padding: 1rem 1rem;
margin: 20px 0;
}
.entry-card-title:after{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
content: '';
background-image: -webkit-repeating-linear-gradient(135deg, #A5DF00, #A5DF00 1px, transparent 2px, transparent 5px);
background-image: repeating-linear-gradient(-45deg, #A5DF00, #A5DF00 1px, transparent 2px, transparent 5px);
background-size: 7px 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
}
これでスッキリ解決である。
正しいアプローチかどうかは分からないが、これでタブレットまでは（600pxまで）ボーダーラインを入れる表示となる。
まとめ
ブログの入口を整えることは、回遊性を上げる上でも結構大切だ。
始めた後で良いので、定期的に見直すと良いよね。
コメント