【Cocoon】ブログカードは回遊率をあげるためにシンプルが１番！

どうも、ぶちくまです。

ブログカードに憧れてSimplicityに移ってきた経緯がぶちくまにはあります。昨今では「ブログカードは場所をとるし、クリック率が悪いので採用しない」と、味気ないテキストリンクを貼る輩も増えているご様子。

ぶちくま

いかん、いかんぞ！こんなに素敵なブログカードがあるというのに使わないなんて手はない！

と言いながら、今回はブログカードのカスタマイズ方法を伝授しつつ、リンクの貼り方についても少しばかり講義したいと思います。

WPテーマCocoonのブログカードカスタマイズ方法

ブログカードのカスタマイズについては中級者レベルとなります。

なので、今回は初級的な説明は一旦省略します。

初級編の記事は今後もう少し厚くしていくので、もう少しお待ちを。

【Cocoonカスタマイズ】超初心者でも自分好みに「見出し」を変える！

今回は無料のWordPressテーマで国内最高峰のクオリティの「Cocoon」を使った見出しのカスタマイズ方法を、これでもかってくらいに画像を使って説明してみました。ほぼ何もできない状態の初心者の方でも、きっと自由にカスタマイズできるくらいのわかりやすさを目指したつもりです。まずはその第一段階、Google Chromeのデベロッパーツールの使い方も説明しました。

buchikuma.xyz

2024.03.22

では、実際にコードを見ていきましょう。

私が実際に使っているCSSコード

/*cardの外観*/
.internal-blogcard,.external-blogcard{
padding: 0.5em 1em;
margin-bottom: 0.5em;
color: #5d627b;
background: #f4f4f4;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.33);
border-radius: 4px;
}
.internal-blogcard {
border-left: solid 5px #fd9435;
}
.external-blogcard {
border-left: solid 5px #86ceec;
}

まずは、外観の考え方です。

ブログカードの外観はクリック（タップ）できることを明確に

Cocoonのブログカードは、特に設定しなければ、カード全体がリンクとなっていて、カード上ならどこを押してもリンク先にいくことができます。

便利ではあるのですが、逆にリンクだとわかるポイントが薄いので、いまいちクリックされづらかったりもします。

カスタマイズのポイントと一緒に、どういったデザインが望まれているか考えていきましょう。

セレクタの設定の仕方

内部リンクは「.internal-blogcard」、外部リンクは「.external-blogcard」というクラスが割り当てられています。つまり、そういう名前がすでにつけられているってことです。

そのため、これらをセレクタ（変更する場所）に指定します。

ちなみに、ブログカード全体としては「.blogcard」でもよかったはずなので、２つ共通した外観デザインを設定する場合は、こちらのセレクタを使用してもいいと思います。

ぶちくまは２つのセレクタを指定して外観の大枠をつくり、内部リンクと外部リンクをそれぞれ、色を変えている、といったところですね。

デザインのコンセプト

これはいわゆる「付箋型」のボックスを採用しています。というか、ぶちくまのサイトは付箋だらけです。職場も付箋だらけにしてます。まさにぶちくまらしい、とも言えます。

また、全体に影をつけることで、「これは押せるボタンなんじゃないか」感をうっすら出しています。でも、それだけだとわかりづらいですよね。

カードの内部に「続きはこちら」などの文章を追加しておくと、リンクであることがわかりやすくなりますね。

「続きはこちら」などの文章の付け加え方

/*続きはこちらを挿入*/
.internal-blogcard:after,.external-blogcard:after{
font-family: "FontAwesome";
content: "…続きはこちら f14d";
font-weight: bold;
font-size: .8em;
color: #f4f4f4;
padding: .5em;
border-radius: 4px;
width: 45%;
background-color: #033b86;
margin-left: auto;
text-align: center;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

文章はcontentというプロパティを使います。

プロパティ、というのは「どういう変化をつけるか」という指示になります。

Contentは文字通り、文章を加える、という指示になります。

コードを見てもらえると、ダブルクオテーションで囲まれている部分、つまり「続きはこちら」の部分を変えると、好きな文字に変えることができます。「タップで続きを」とか具体的な指示を書いてもいいでしょう。

そのあとのアルファベットと数字は、Fontawesomeのアイコンになります。こちらもサイトを見ながら、リンクっぽさを出していくといいですね。

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid ico...

fontawesome.com

わかりづらいプロパティの紹介

そのほか、プロパティについては使いながら説明していきます。今回はmarginとpaddingというものを実戦で見ていきます。text-alignについても調べ上げなければいけない状況に追い込まれたので使ってみました。

marginとpaddingで余白をつくる

marginとpaddingは余白をつくるプロパティだと思ってください。

ふたつの違いは、marginが外側の余白、paddingが内側の余白、とまずは覚えておいてください。

margin-leftをautoにすることで右寄せになります。

leftなのに右寄せとか意味わからんかもしれませんが、右側の余白を指定しないことで、合わせ技で「左の余白をしっかりとって」という意味になります。

結果、右寄せになります。右寄せはいろいろ方法はあります。股間のポジショニングの話はしていない

text-alignで文章を中央揃えにする

右寄せついでに。

今回、なんだかうまいこと文章の位置が決まらなかったので、プロパティで調整しました。

「text-align:center」で文章などを中央揃えにすることができます。

今回はこのくらいの説明にしておきましょう。

リンクはブログカードがいいかテキストリンクがいいか

結論から言うと、「適材適所」になります。便利な言葉やね。

では、どのようにその場にあった一番いいリンクが貼れるかというと、基本的な考え方は

• 「リンクに飛ばしたいか飛ばしたくないか」
• 「コンテンツに集中させたいかどうか」

この２点が重要になります。

リンクの作り方の基本

しかし、記事のテコ入れをしていると、我ながら「何を知ったようなことを」と言う気にはなりますが、過去の自分が気分良く書いているようなのでこのまま残しておきます。

外部リンクはアフィリエイト以外は飛ばさない

変な話ではありますが、外部リンクは貼っておきながら、本当はあまり貼りたくない、という思春期の女の子みたいな気難しさがあります。

必要な外部リンクとして、引用や出典があります。つまり情報源を明らかにすること。

これはとても大事なことで、引用した際にしっかりと情報源を記しておくことで、「正しい手順で引用しているのであって、パクリサイトではないんですよ」というメッセージになります。

パクリじゃないというメッセージをどれくらいGoogleさんが読みとって検索順位に影響を与えているかは、なんとも言えないところではありますが、少なくとも読者にとっては、信用できるサイトだという印象を与える、ポイントにはなります。

まぁ、普通に考えて、引用元の方が詳しい情報が載っていることが多いので、載せた方が利用者には優しいですよね（ここ、ポイントです）。

覆水盆に返らず、出てった訪問者は帰ってこない

ただ、一度出て行った読者はだいたい帰ってこないので、いわゆる「離脱」になります。

ブロガーにとってのベストは「自分のコンテンツを楽しんでファンになってもらうこと」
アフィリエイターのベストは「収益のためにアフィリエイトサイトに顧客を流すこと」になります。

言わずもがな、外部リンクの数は鍋の底にあいた穴と一緒で、開ければ開けるほど、せっかくためた大事なものがいろいろ流れていきます。

なので、必要なリンクでも外部に流出させたくない時は、特に目立たせないテキストリンクにする、なんて使い分けが有効と言えそうです。

内部リンクでも必要に応じてテキストリンクを使おう

じゃあ目立つブログカードばかり使えばいいかというと、それもやはり適材適所。

例えば、細かい内容が必要ないリンクはテキストリンクでいいわけです。

すでにお勧めとして記事で紹介していればタイトルだけでいいし、ある程度同一カテゴリのおすすめ記事として列挙する時なんかも、もう内容を伝えるのがタイトルコールだけで十分なら、テキストリンクで列挙の方が見やすいです。

ブログカードの弱点は何と言ってもかさばること

ぶちくまも何度かやってみましたが、
ブログカードは２枚続くだけで結構うるさい。
情報が溢れかえってくる感じ。
３枚続けると閲覧ページがブログカードで埋め尽くされたりすると、
やっぱりウンザリするわけですよ。

ブログカードはSANGOのように「サムネイル（アイキャッチ）＋タイトル」で十分

これも考え方によりけりではありますが。
ブログカードのメリットは、リンクを踏まずして内容がみえてくること。
アイキャッチとタイトルで十分情報が伝わるように編集してあるなら、
いっそ内容説明文(snippet)は非表示でもいいかもしれません。
これは、

.blogcard-snipet {
display: none;
}

で消すことができます。あとはタイトルと画像の大きさを調整すれば、有料テーマのブログカードも再現できるはずです。

サイト回遊率を上げるならつながりのあるリンクをつなげていくことが大事

これはブログ運営論みたいになってしまうけど、とりあえず記事はかけるだけ書いておいた方がいい。PVも収益も気にすることはない。とにかく思いついたことを記事にしていく。

５０記事は無心で書こう。５０記事の貯金ができたら、それらの記事の関連性をマインドマップのようにつなげていく作業をしていくといい。

まとめたり、あるいは分割して、ひとつの「かたまり」をつくっていきましょう。中心にまとめ記事をおいて、リンクでつなげていくといい。まとまりのない雑記ブログでも、アフィリエイトサイトばりに回遊できるようになるから。

まとめ

いかがでしたでしょうか。今回はブログカードの説明をしてみました。

コピペ自体は簡単ですが、余白の調整とか始めるとキリがないんだよね。

ではでは。