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

かっこいいリンクカードを作るならSimplicityとCocoonへのテーマ変更がお勧め

どうも、ぶちくまです。

リンクとサムネイルが一緒になっているいわゆるブログカードを作りたい。
プラグインを使えば簡単に使えるけど、AMPでうまく表示されなくなってしまう。
なのでいっそテーマを変更してみました。
スポンサーリンク

ブログカードって何?

よくはてなブログなんかでみる、サムネイル入りのリンクカード。ブログカードとも言います。

ぶちくま
ぶちくま

これ、使って見たいんですよね。

と、言いますのも。

ぶちくまの様な平凡なサイト運営をしていると、検索などで当サイトを見ていただく機会は多いのですが、そのまま別の記事まで誘導することがなかなかうまくいかないのです。

もちろん、ブログ自体が読む様な価値があるのか、という根本的な質の問題はある。

ぶちくま
ぶちくま

うん、大いにあるよね。

でも、今回はちょっと置いておこう。

ブログカードは回遊率を上げる

いわば、サイト回遊率を上げて、長いことブログを見てもらおう、あわよくば、PV数を向上させよう、という甘い目論見ですね。

ぶちくま創作ベースには、だいたい1日に100人くらいの方が見にこられます。

実際に100人にさらされていることを想像すると怖い

インターネットの世界では決して多いわけではないのですが、実際に想像すると、ちょっとゾクゾクしますね、怖い。

特に、「新潟」という地域性を全面に出している当ブログですので、人口比率で考えてみても、休日の万代を練り歩いた際には、当サイトをご覧いただいた方に出くわす可能性だってあるわけです。

ぶちくま
ぶちくま

こりゃ、おちおちカフェでのまどっている姿は見せられないね

回遊率はブログやサイトのユーザビリティの高さを表す

完全に話が逸れましたが、せっかく当サイトに来ていただいたので、最大限のおもてなしをしたい。

関連性のある情報や、より優位な情報を提供するためにも、自サイト他サイト問わずに、より視認性が高く、いわば思わずクリック・タップしたくなる様な、そんなリンクを私は作りたい。

ぶちくま
ぶちくま

私は、作りたい!

そうすれば、必然的に、一人当たりのPV数が上がるので、より少ない労力で不労所得を得ることがごにょごにょ。

皆さんの情報収拾効率を向上させることにつながるわけです。

なんて貢献度の高い仕事なのでしょう!

スポンサーリンク

ブログカードの作り方

ブログカードの作り方は、3種類方法があります。

  1. WordPress標準装備のEmbedカードを利用
  2. プラグインを利用する
  3. Embedlyを利用する
  4. ブログカード生成機能が備わっているWPテーマにする

ちなみに、現在はCocoonというブログカードを勝手に作ってくれるテーマを利用する三番目の方法で解決しています。

WordPressなら設定不要でEmbedカードが錬成可能

まず、そもそもWordPressを使っていると、oEmbedという、URLをそのまま入力するだけで勝手にブログカードを生成してくれるという、恐ろしく便利な機能がついています。

ぶちくま
ぶちくま

というか、これでいいじゃん。

なのですが、まず、ぶちくまのブログではなぜか表示されない。

やろうとすると妙な空間が作られる。

多分WordPress側でも作ろうとしてくれているんだろうけど、なにせ原因がわからないし、そもそも、レイアウトが余白だらけということもあって、ブロガーからは人気のないデザインとなっている。

WordPress標準機能でブログカードを作るメリット

  • 余計なプラグインを導入する必要がない
  • テーマが縛られず、自由な選択が可能

WordPressでEmbedカードを作るデメリット

  • 外部リンクには対応していない(WPサイトなら対応することも)
  • テーマやプラグイン、提携している広告会社の広告が干渉することで表示不具合が起こることがある

デメリットが強すぎて、メリットを打ち消しているんですよね。

ぶちくま
ぶちくま

そういうわけで、別の方法を検討開始!

プラグイン「Pz-Linkcard」使用

今回は「Pz-Linkcard」というプラグインを利用させていただきます。

ぶちくまとしてはあまりプラグインには頼りたくないのですが、(重くなるので)簡単そうなので利用してみましょう。

設定は概ねデフォルトで、サイトのベースカラーがオレンジなので、そこだけ変更。

なかなかスタイリッシュでいい感じのブログカードが出来上がりました。

使用方法については、作者様サイトの「ぽぽづれ。」の「WordPressでリンクをカード形式で表示する Pz-LinkCard」という記事がとても参考になります。

Pz-LinkCardでブログカードを作るとこんな感じ

Pz-LinkCardでブログカードを作るとこんな感じ

当サイトで使っていたものはプラグインをアンインストールして消してしまったので、ぽぽづれさんとこのリンクカードカスタマイズ事例を載せておきます。

 

AMP対応しているのか

AMP対応はどうなのか、というと、ぶちくまがAMP化に使用している「AMP for WP」では見事にカード表示がバグりました。

サムネイルの取得がうまくいっていませんね。

この「AMPでも対応する」、というのがなかなか難しくてですね、先の記事でもAMPページエラー対応に何日もかかった、ということがあったのです。

もうね、AMPなんてなくなればいいと思うのですが、残念なことに、当ブログの8割はモバイル端末から、全体でも1/3程度はAMP記事を読まれていることになっています。

3分の1の純情な感情ですね、言いたいよねこれ。

ので、AMPのデザインも決して手を抜けない。

ブログカード生成サイトEmbedlyを利用する

URLを入力するだけで簡単にブログカードをHTMLコード化してくれるサイト「Embedly」を利用する、という手もあります。

メリットとデメリットだけまとめておきますね。

Embedlyを利用するメリット

  • カード毎に設定を変えることができる。
  • HTMLに準拠していればどのサイトでも対応できる。
  • ブックマークレットを使えば簡単にコード生成できる。
  • 操作方法は簡単といえば簡単

操作については好き嫌いがありそうですが、固定ページなどでリンクによって設定を変えて目立たせたりシンプルにしたりする必要がある場合は、Embedlyの利用がお勧めできます。

Embedlyを使わなかった理由

これはシンプルです。

ぶちくま
ぶちくま

面倒だったから。

流石に、リンク貼る度に毎回コード生成するのは面倒だと思いました。ブックマークレットを使っても面倒。とにかく面倒。

スポンサーリンク

ブログカードといえば優秀なテーマ、Simplicityが

「このブログカードいいなぁ」と思ったのが、だいたいSimplicityユーザーなんですよね。

AMPも自動で対応できるし、かなり優良なテーマです。

最近は無料テーマでもAMP対応が必須みたいなところがあるので、ちょいと、というか、かなり羨ましい。

もちろん、SimplicityでできるならXeoryにできないことはない、はず。

なんだけど、CSSをいじるくらいならできる様になってきたけど、JavaScriptやPHPを触る自信はまだ無い。

指をくわえて眺めるばかりです。

というわけでテーマ変更

思い立ったが吉日、ということで、Xeory baseからSimplicityに乗り換えようかと思います。

うまくいくかどうかは見てのお楽しみということで。

追記 テーマ変えてみました

テーマ変えてみました。

というか、多分初見の人ばかりなので、変更前がわからないと思いますが。

リンク貼りがとても楽になりました。

海賊王に俺はなりたいんだけど副業でやっていくにはどうしたらいい?
海賊王になりたいけど、本業ではちょっと、という方のために副業で海賊王になるためにすべきことを考えてみました。 海賊自体がリスク高めな上に、資本金に心配がありましたが、クラウドファンディングでなんとかしてみる、というアイデアがあります。副業としては、やはりブログで船上での生活やオススメの海域なんかを紹介したらいいと思います。たぶん、PVはとれます。

こんな感じで実物貼っておきます。

貼り方は簡単で、URLをコピペするだけなのですが、元々のWordPressのEmbed機能が邪魔をするのか、うまく貼れない時もあります。

<p><a href="https://buchikuma.com/childcare/post-1053/">https://buchikuma.com/childcare/post-1053/</a></p>

こんな感じでPタグで囲むとうまくいきます。

Cocoonのカスタマイズ記事はこちら

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

ちょっと浮いているような感じになってるのが結構お気に入りです。

外部リンクでは色を変えてみました。

WordPress
スポンサーリンク
buchikumaをフォローする
スポンサーリンク
ぶちくま創作ベース

コメント