Migaru-Days

身軽に暮らす、考える。

はてなブログのブログカードを使った内部リンク用のボックスを作ってみた

スポンサーリンク

f:id:damarin:20181107014245p:plain

内部リンクとは、ブログ内の記事と記事を繋ぐリンクのことです。

 

これまでブログカードやテキストリンクのみで内部リンクを繋いでいたのですが、ワードプレスでブログを始めたことをきっかけに物足りなく感じるようになりました。

 

ちなみにブログカードとはこういうものです。

www.oheya-migaru.com

はてなブログでよく見かけるリンクですよね。

 

ワードプレスで作られているブログを見ていると、内部リンクのデザインが可愛いんです。ついついクリックしたくなるデザインで「いいな〜」と思い、このブログでも少しだけ目立つ内部リンク用のボックスを作ってみました。

 

この記事では、当ブログで使っている内部リンク用のボックスデザインを公開しています。

 

 

当ブログで使っている内部リンクのボックス

f:id:damarin:20181106012548p:plain

今はこんな感じで記事と記事を繋ぐ内部リンクを貼り付けています。

 

ボックスの中に

  1. 記事のタイトル(文字リンク)
  2. 記事のブログカード
  3. 記事についての一言

この3つを入れ込みました。

 

HTMLはこちらです。

 

「このような記事もあります」という文言は記事の編集画面から「関連記事」や「こちらの記事もどうぞ」などに変えることができます。

 

作り方はこんな感じです。


内部リンク

 

ボックスデザインのCSSはこちらです

というわけで、ボックス全体のCSSはこんなかんじです。

ボックスデザインはサルワカさんのボックスデザインを参考にしています。

 

CSSの細かな説明

CSSは、ボックスの中にリストデザインの変更・ブログカードの変更・pタグの変更等を付け加えたものを作りました。

 

記事のタイトル(文字リンク)

f:id:damarin:20181106013849p:plain

このリンクの作り方は

  1. 編集画面で内部リンクしたい記事のURLをコピペし「タイトル」を選ぶ
  2. ブログタイトルの文字を削除
  3. 箇条書きリストにする

箇条書きリストのリストデザインにアイコンを使ってワンポイントになるようにしています。

 

CSSはこちらです。

 

リボン風のアイコンははてなブログのデフォルトのアイコンを使っています。はてなブログのアイコンについてはこちらの記事が参考になります。

 

ブログカード

f:id:damarin:20181106020406p:plain

これは内部リンクしたい記事のURLをコピペし「埋め込み式」を選んでいつものようにブログカードを表示させるのみです。

 

CSSはこちら。

ブログカードは中央表示になり、デフォルトのカード下のURLリンクは表示されないようにしています。

 

一言コメント

f:id:damarin:20181106020435p:plain

たぶん無くてもいい部分ですが、内部リンクに何かコメントがあったほうがクリックされやすいかなと思います。

 

CSSはこちら。

文字サイズが小さくなります。

  

内部リンクの考え方

内部リンクを貼ろうとしても、どの記事と記事を繋げたらいいのかとても悩むところですよね。

 

当ブログの内部リンクについての考え方はこちら。

  1. Chrome拡張機能のPage Analyticsでクリックされている記事を優先する
  2. 内部リンクは1記事に1つで良い
  3. 同じカテゴリーの記事を繋ぐ

 

Chrome拡張機能のPage Analytics

Chrome拡張機能のPage Analyticsとは、内部リンクがどのくらいクリックされているかが分かるようになる機能です。

chrome.google.com

Page AnalyticsをChromeにインストールしておくと、自分のサイトの内部リンクがどのくらいクリックされているかが分かるし、クリックされていない内部リンクも分かります。(アナリティクスと連動しています)

 

試しに2〜3個の内部リンクを貼り、しばらくしてこの機能を使ってどのくらいクリックされているか・いないかの実験ができます。

 

私がPage Analyticsを導入して分かったことは「内部リンク、意外とクリックされてない!」ということです。(笑)

興味がなかったり、リンクに気づいていなかったりで離脱する人が多いんですよね。当ブログの場合は内部リンクは1つで十分という結論になりました。

 

同じカテゴリーの記事をつなぐ

内部リンクは、その記事を読んでいる人が「お!こんな記事もあるのか〜!読んでみよ〜」と思うような内容の記事がベストです。

 

とはいえ、そんなことは分かるはずもないので 私は同じカテゴリーの記事でつないでいます。無印良品の収納用品の記事には無印良品の類似収納用品の記事を、といった具合です。

 

内部リンクをクリックして読まれるかどうかは分かりませんが、100人中1人でも1ページ先まで読んでもらえたら嬉しいなあという気持ちです。

 

 

内部リンクでPVが増えるかも

この内部リンク用ボックスを使った内部リンクを当ブログに貼り付けたのが11月のはじめです。

その後のPV数の推移はこちら。

f:id:damarin:20181107010634j:plain

11月1日から、ぐーんと上がっていますよね??これ、内部リンクのおかげかも!と思っています。

まあ4日がピークでその後下がっているので違うかもしれませんが。 

 

まだ半分もできていないので、これからちまちまと作業していきます。

 

内部リンクがクリックされているかどうかはPage Analyticsで分かるので、思うようにクリックされない内部リンクは改善していけばいいんですよね。ブログって楽しいです。

 

 

このような記事もあります

www.oheya-migaru.com

ワードプレスでブログを作ったので手順をまとめました。

キーワードで探す