Twitterにてブログの新着記事更新情報をお届けしてます!(ここをクリックするとTwitterへ)

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

どうも、ぶちくまです。

WordPressの無料テーマ、Cocoonのカスタマイズ記事です。
「ブログカード」という、リンクを貼るだけで記事のアイキャッチとタイトル、本文説明(snippet)を抜き出す便利な機能があります。リンクだと気づきづらいので、わかりやすいシンプルなデザインを心がけました。
目的は何より回遊率をあげること。ユーザーを求めている情報まで届けること。

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

いかん、いかんぞ!

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

と言いながら、今回はブログカードのカスタマイズ方法を伝授しつつ、
リンクの貼り方についても少しばかり講義したいと思います。
(まずはてめぇで実践しやがれって声も聞こえますが構わず続けます)

スポンサーリンク

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

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

ぶちくまの中級者ってなんぞい?
中級者に求めるレベルとして、CSSをCocoonの子テーマに貼り付け、
実際に適応できているかどうか調べることができる、ことを想定しています。
また、CSSの構造をみて、線の色や種類、影の付け方などをなんとなく理解しており、
値をいじることで自分らしいデザインを設定することができる、が求められます。
苦手なのは自分の求めているデザインはあるが、どのようにプロパティを使ったらその表現ができるか、というところまでは一人ではなかなかできない、
こんな方が対象になります。

なので、今回は初級的な説明は一旦省略します。
初級編の記事は今後もう少し厚くしていくので、
もう少しお待ちを。

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

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

スポンサーリンク

ぶちくまが実際に使っている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」でもよかったはずなので、
2つ共通した外観デザインを設定する場合は、こちらのセレクタを使用してもいいと思います。
ぶちくまは2つのセレクタを指定して外観の大枠をつくり、
内部リンクと外部リンクをそれぞれ、色を変えている、といったところですね。

デザインのコンセプト

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

また、全体に影をつけることで、「これは押せるボタンなんじゃないか」感をうっすら出しています。
でも、それだけだとわかりづらいですよね。
カードの内部に「続きはこちら」などの文章を追加しておくと、
リンクであることがわかりやすくなりますね。

スポンサーリンク

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


/*続きはこちらを挿入*/
.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のアイコンになります。
こちらもサイトを見ながら、リンクっぽさを出していくといいですね。

Font Awesome
スポンサーリンク

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

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

marginとpaddingで余白をつくる

marginとpaddingは余白をつくるプロパティだと思ってください。
ふたつの違いは、marginが外側の余白paddingが内側の余白
とまずは覚えておいてください。
margin-leftをautoにすることで右寄せになります。
leftなのに右寄せとか意味わからんかもしれませんが、
右側の余白を指定しないことで、合わせ技で「左の余白をしっかりとって」という意味になります。
結果、右寄せになります。右寄せはいろいろ方法はあります。股間のポジショニングの話はしていない

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

右寄せついでに。
今回、なんだかうまいこと文章の位置が決まらなかったので、
プロパティで調整しました。
text-align:center」で文章などを中央揃えにすることができます。

だいたい微調整に大きな時間をとられるよね



愚痴です。
CSSデザインの大枠を作っている時は楽しいんですよ。
ぽんぽんできることがわかってくるから。
んで、「まぁこんな感じかな」ってところで微調整に入っていくわけですが、
「あれ、これもう少し右に寄せたいな」とか、
「表示がなんか少しみづらいなぁ」とか考え始めると、泥沼です。
文字を1mm動かすのも、素人にはアイデアがないのでとにかく調べるのに時間がかかる。
しかも、PCでうまくいってもスマホでだめだと、
やりなおしだぁぁぁぁあぁぁぁl」って発狂しそうになる。
有料テーマがいい、ってのはこの無駄な時間を取られる、ってところにあるね。
ただ、うまく決まった時はアドレナリンどばどば

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

スポンサーリンク

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

結論から言うと、「適材適所」になります。便利な言葉やね
では、どのようにその場にあった一番いいリンクが貼れるかというと、
基本的な考え方は

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

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

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

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

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

誤解を生みそうなのでもう一言
著作権上は一部の引用はOKなんですが、
それはぱくってもいいよというわけではなく、
ルールに則ることと、
引用元の感情的な問題もあります。
法律とルールと、さらにはGoogle神の采配と、いろいろ難しいことがありますが、
「読んでいる人が気持ちいい」「書いている人も気持ちいい」「他のユーザーも気持ちいい」ということをちゃんと押さえていけば大丈夫です。
ルールを調べるのが面倒な人はオリジナル記事を心がけましょう。
https://ec-houmu.com/right/chosakuken_quotation.html

パクリじゃないというメッセージをどれくらいGoogleさんが読みとって検索順位に影響を与えているかは、
なんとも言えないところではありますが、
少なくとも読者にとっては、信用できるサイトだという印象を与える、ポイントにはなります
まぁ、普通に考えて、引用元の方が詳しい情報が載っていることが多いので、
載せた方が利用者には優しいですよね(ここ、ポイントです)。

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

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

ブロガーにとってのベストは「自分のコンテンツを楽しんでファンになってもらうこと
アフィリエイターのベストは「収益のためにアフィリエイトサイトに顧客を流すこと」になります。
言わずもがな、外部リンクの数は鍋の底にあいた穴と一緒で、
開ければ開けるほど、せっかくためた大事なものがいろいろ流れていきます。

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

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

じゃあ目立つブログカードばかり使えばいいかというと、
それもやはり適材適所。
例えば、細かい内容が必要ないリンクはテキストリンクでいいわけです。
すでにお勧めとして記事で紹介していればタイトルだけでいいし、
ある程度同一カテゴリのおすすめ記事として列挙する時なんかも、
もう内容を伝えるのがタイトルコールだけで十分なら、
テキストリンクで列挙の方が見やすいです。

スポンサーリンク

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

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

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

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

.blogcard-snipet {
display: none;
}

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

スポンサーリンク

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

これはブログ運営論みたいになってしまうけど、
とりあえず記事はかけるだけ書いておいた方がいい。
PVも収益も気にすることはない。
とにかく思いついたことを記事にしていく。
50記事は無心で書こう。
50記事の貯金ができたら、それらの記事の関連性をマインドマップのように
つなげていく作業をしていくといい。
まとめたり、あるいは分割して、
ひとつの「かたまり」をつくっていきましょう。
中心にまとめ記事をおいて、リンクでつなげていくといい。
まとまりのない雑記ブログでも、アフィリエイトサイトばりに回遊できるようになるから。

ぶちくまはどうしてもADHDが邪魔して気が散ってそこまでできないんだけどさ。
絶対にやった方がいいよ。

スポンサーリンク

まとめ

いかがでしたでしょうか。
今回はブログカードの説明をしてみました。
コピペ自体は簡単ですが、余白の調整とか始めるとキリがないんだよね。

ではでは。

コメント

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