ブログでなくても、SEO的にも効果があるパンくずリスト。
cocoonにもしっかり実装されていて、とくに難しい設定が必要ありませんが、個性を出すためにカスタマイズをしてみたいですよね？
cocoon設定を使えば、場所を自由に変えられるので、cssなどのコードを少しだけ追加や修正するだけで大丈夫でした！
WordPressを使ってブログを作っている人は多いですが、無料のテーマであるcocoonは、人気があるテーマのひとつ。
無料なのにカスタマイズがしやすいので、誰でも気軽におしゃれなブログを作れるんじゃ！
たしかにカスタマイズしやすいですが、パンくずリストをいじる場合は、細かいところはcssといったコードを使う必要があるんです。
そんな知識なんてないよ！なんて思う人が多いでしょうから、ちょっとしたコードで雰囲気を変えられる方法を、今回は紹介しますね。
コピペでパンくずリストの表示が変えられるようにまとめたので、カスタマイズを変えたいのなら、記事を読み進めてくださいね。
パンくずリストをカスタマイズの前に設定をしてしまおう
パンくずリストの表示を変える場合は、まずcocoon設定を開いてください。
このページはパンくずリストだけでなく、さまざまなカスタマイズができてしまうのでおすすめなんです。
ちなみに何度も言っていますが、このcocoon設定でカスタマイズできるのは以下の部分だけ。
これ以外のところをカスタマイズしたいのなら、cssを使う必要があります。
- パンくずリストの表示位置
- パンくずリストにタイトルを含めるかどうか
cocoonはシンプルに作られているので、細かいカスタマイズをしなくても、かっこよく作れるんです。
cocoon設定から「投稿」タブをクリック
まずcocoon設定を開いたら、次は「投稿」タブをクリックしてみてください。
基本的にブログ記事を投稿するページのことで、パンくずリストの設定もここで完了できます。
ちなみに固定ページを作っている人も、投稿ページと同じように「固定ページ」タブをクリックして、下のほうにあるパンくずリストの設定を忘れないように変えてくださいね。
パンクズリストの配置というところで表示しない以外を指定
「投稿」タブや「固定ページ」タブをクリックしたら、下のほうにあるパンくずリスト設定までスクロールし、表示したいところのラジオボタンをクリック。
これで保存ボタンをクリックしたら、パンくずリストが移動するでしょう。
どのあたりに表示されるのか、自分のブログを見ながら調整したらいいですが、面倒な人は以下で具体的に紹介しておきますね。
パンクズリスト内に記事タイトルを入れるかどうかは好み
パンくずリストの配置を設定できたら、その下にある記事タイトルを表示するかどうか、チェックマークを付けてみましょう。
ここにチェックマークが入っている場合は、「ホーム→カテゴリ→表示しているページのタイトル」といった感じで、パンくずリストが表示されます。
デザインによってチェックを入れるか決めるのもいいでしょう。
好みの問題なので、この項目はあまり気にしなくてもいいですね。
個人的には今どこのページを表示しているのか、ユーザーがわかってくれるように、このブログでは表示するように設定しています。
- WordPressのメニューにあるcocoon設定をクリック
- パンくずリストの配置にあるラジオボタンで表示場所を設定
- パンくずリスト内にタイトルを表示させたいのならチェックマーク
パンくずリストの配置問題…どこに表示されるのか紹介
上記で紹介したパンくずリストの設定の中で、どの位置に表示されるのか、自分のブログで確認するのは面倒な人も多いでしょう。
そこで以下ではこのブログでどのように表示されるのか、スクショを残しているので、それを参考にどこにパンクズリストを表示するべきか決めてみてください。
cocoonのパンクズリストは、4種類配置が決められています。表示させないこともできますよ。
メインカラム手前はどこに設定されるの？
1番上に表示されているのがメインカラム手前です。
ここはヘッダーの下側に、パンくずリストが出てきます。
ヘッダーというのは画面全体に幅を広げているので、余白をなるべくなくしたいのなら、ここにチェックをいれてみてください。
さらにスクロールしなくても表示されるところにパンくずリストを表示させたい人も、メインカラム手前を利用しましょう。
メインカラムトップはどこに設定されるの？
メインカラムトップだと記事タイトルの上側に表示されます。
上記と同じように見えますが、実際は下にある文章のスペースと同じところにパンくずリストが出てくるので、左右に余白が出てしまうんです。
もちろんこの場合はパソコン表示の話であり、スマホ表示だと左右の空白は気になりません。
メインカラム手前よりも、ちょっと下に表示されるのも、このメインカラム手前の特徴。
ちょっとの差じゃが、メインカラムトップを利用する場合は、背景色を使わずにシンプルな表示をしたほうがいいぞ！
メインカラムボトムはどこに設定されるの？
メインカラムボトムは名前のとおり、記事の下側の関連記事の下にパンくずリストが出てきます。
これも記事のところに表示されるので、左右に余白が出るのが特徴。
シンプルに表示させたいけど、タイトル周辺をスッキリさせたい人は、このメインカラムボトムを利用してみてください。
ちなみにcocoon設定を触っていない状態だと、パンくずリストはこの部分に表示されます。
フッター手前はどこに設定されるの？
今回のカスタマイズで利用するのが、このフッター手前というところ。ここは左右の余白がなく、フッターの上側に表示されます。
フッターと近い位置になるので、デザインしやすいのがメリット。
シンプルにせず、背景色を付けたとしても変になりません。
ではどのように設定しているのか、以下で紹介しておきますね。
コピペしてみてね！パンくずリストのコード紹介
cocoonのパンクズリストは、位置が変えられるだけで、見た目を大きく変えられません。
そこでcssのコードを使って、カスタマイズしてしまいましょう。
ちなみに実際に変えてみてわかったのですが、かなり作り込んだデザインを作るにはPHPの知識が必要で、今の僕にはまだそれができなかったんです。
そこで以下で紹介するところだけを変えて、少しだけ見た目をカスタマイズしたようじゃ。それが以下のcssコードじゃ！
何のコードかわかるように、説明を付けてみたので、それを参考にいじるとオリジナルのパンクズリストが作れますよ。
ちなみに以下のコードをコピペすると、こんな感じのパンくずリストになります。
/*-- パンくずリストのカスタマイズ --*/
.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before {
background-color: #1E73BF; /*--背景色--*/
margin: 12px auto -1.5em; /*--余白を調整--*/
padding: 8px 5% 5px; /*--余白を調整--*/
color: #fff;/*--文字の色--*/
width: 100%;/*--幅を広げる--*/
}
.breadcrumb a {
color: #fff; /*--文字の色--*/
text-decoration: none; /*--下線を非表示--*/
padding-right:1em; /*--余白を調整--*/
font-family: 'Yu Gothic UI','Osaka','ヒラギノ角ゴシック','Hiragino Sans',sans-serif; /*--文字の種類を変更--*/
}
.breadcrumb-item{
font-family: 'Yu Gothic UI','Osaka','ヒラギノ角ゴシック','Hiragino Sans',sans-serif; /*--文字の種類を変更--*/
}
.fa-home:before {
font-size: 1.5em; /*--サイズを変更--*/
padding: 2px; /*--余白を調整--*/
}
.fa-folder:before {
display:none; /*--非表示--*/
}
.fa-file-o:before {
display:none; /*--非表示--*/
}
.fa-home {
width: 2em !important; /*--幅を広げる--*/
}
.breadcrumb span.sp {
margin: 0 10px; /*--余白を調整--*/
}
ちなみにフッターの下側にパンくずリストが出るので、スマホ表示だとサイドバーの後にパンくずリストが出てきます。
ここがどのページなのか1番下までスクロールするのが面倒なユーザーもいるかもしれないので、以下のコードを追加した人は、スマホ表示だとサイドバーを非表示になるので注意してください。
/*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/
.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before {
padding: 8px 15px 5px; /*--余白を調整--*/
}
/*-- サイドバーを削除 --*/
#sidebar{
display:none;/*--非表示--*/
}
}
パンくずリストはあまりカスタマイズしなくても、とくに問題ないところですが、小さいこだわり個性的なブログができます。
気になる人はコピペしてみてくださいね。
background-colorで全体にメリハリを
このカスタマイズでは背景色があるからこそ、目立たないパンくずリストが少しランクアップできます。
僕のブログは全体的に白ばかりで、メリハリがなかったので、パンくずリストを活用しました。
たくさん色を使ったブログなら、むしろこのコードを使ったパンくずリストと、相性がよくないかもしれません。
注意して使うようにしてくださいね。
paddingとmarginでバランスを整える
余白を変えないと表示が崩れてしまったので、paddingとmarginというcssコードで、全体のバランスを調整しました。
これもサイズを変えるなど、細かい設定を変えたい人は、これらのコードを使ってみましょう。
ちなみにパンくずリスト内にあるホームのアイコンを少し大きくしたので、paddingのコードで余白を少し変えています。
必要ないアイコンはdisplay:none;で非表示
パンくずリスト内にあるホームのアイコンは表示されていますが、じつはデフォルトではすべてアイコンがありました。
ところが上記で紹介したコード内には、アイコンは表示にしています。
そのためにはdisplay:none;というcssコードを使って、アイコンを消しているだけです。
逆に言えばこのコードを消してしまえば、アイコンが元に戻せるので安心してくださいね。
パンくずリストは表示しているところを把握する重要な部分
パンくずリストをカスタマイズしてきましたが、これをしたのは、表示されているページをユーザーが把握するため。
カテゴリがどれなのかもわかるので、回遊率がアップする可能性も高められます。
それがcocoonのデフォルトである、シンプルな表示だと目につきにくくて、この効果を期待できなくなる…。
そう思ったので背景色を付けてみました。
見た目だけでなくcssを使ってデザインする場合、狙いをしっかり作ってからカスタマイズすると、ブログのPVに変化があるかもしれませんよ。
ちなみにトップページをカスタマイズしたら、ある程度直帰率が変化していたので、パンくずリストを変えるだけでも効果があると期待しています。
