PRを含む場合があります

Cocoon 内部リンクのブログカードに自動で「関連記事」ラベルを表示させる方法

制作・ハック

デザイン変更してます。記事修正までお待ちください。(2021/04/21)

スポンサーリンク

Cocoon 内部リンクのブログカードに自動でラベル付け

当ブログはWordPressテーマ「Cocoon」を使用しています。

できるだけスマートに手間なく記事を書けるように、CSSをカスタマイズして内部リンクを貼った時(特定のドメインのURL)にだけ自動でブログカードに「関連記事」ラベルを表示させるようにしてみました。

↓こんな感じ

※初心者よりは中級者以上向けかもしれません。

Cocoonのブログカード表示は簡単

ブログ記事内に内部リンク・外部リンクを挿入したい時は投稿画面でURLを入力するだけで簡単にブログカードとして表示してくれます。簡単で便利なので私はこれをよく利用しています。

URLを入力するだけでもブログカードが表示されますが、私はショートコードの[角カッコ]でURLを囲むやり方を使っています。

ブログカードにラベルを表示

さらにブログカードに「あわせて読みたい」「関連記事」などのラベルを付ける便利な方法もありますが、今回はできるだけスマートに記事を書けるようにその手間を簡略化させたいと思います。

そこで、どのようにしてCSSをカスタマイズして内部リンクだけ自動で「関連記事」ラベルを表示させるようにしたのかということを書いていきます。

CSSを編集

まずはCSSを編集するので下記のページなどを参考にしてCSSの編集を準備します。

私は管理が楽そうなので後者の方法で外部CSSファイルを作り編集しています。

CSSファイルで特定のリンク先(URL)の時だけラベルを表示するようにカスタマイズしていきます。

CSSファイルのカスタマイズ内容

CSSでは特定の要素を指定できるセレクタがあります。

今回使用するCSSセレクタ

href に “text” を含む <a> 要素 

a[href*="text"] {
font-size: 10px;(例)
}

この書き方で、aタグ内のURL部分(href)に特定の文字列(URL)を指定します。

CocoonエディタではURLを入れるだけでブログカードが生成されますが実際はHTMLで<a href=“URL”>と書かれています。

実際に当ブログでカスタマイズしたCSS内容はこちら

a.blogcard-wrap[href*="smart-slow"] {
  position: relative;
  padding-top: 2rem;
}

a.blogcard-wrap[href*="smart-slow"]:before {
  content: "関連記事 Check!";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  color: #555;
  background: #e0eaeb;
  padding: 2px 20px;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: bold;
}

aタグ内のhrefに当サイトのドメインの一部(smart-slow)を書いて指定しています。

その特定要素が含まれているaタグに対し:beforeで擬似要素を追加し、そこに文字や背景色を入れてラベルっぽいものを作ったという流れです。

contentでラベルに入れたいテキストを入れています。

外部リンクとの差別化

通常のブログカード(外部リンク)

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

カスタマイズしたブログカード(内部リンク)

iPadだけでLINEスタンプを作成 ・販売した方法【メディバンペイント】
iPadだけでLINEスタンプを作成 ・販売した方法をまとめました。LINEスタンプ作成は意外とお手軽にできるのでぜひ挑戦してみてくださいね。

↑いずれも投稿画面ではURLを貼り付けただけです。下の内部リンクの方は「関連記事」のラベルがついているのがわかりますか?

URLを入力するだけで関連記事だということが分かるので、わざわざ内部リンクを挿入するたびにラベルをつける必要がなくなり便利です。

これを応用すれば外部リンクとの見た目の差別化ができて読みやすくなりそうです。

内部リンクを目立たせたることによって、ブログ内の回遊が高まるといいなと思っています。(未検証)

CSSを全くわからない!という方には難しいと思いますが、少しなら触れる!という方にはおすすめです。

記事投稿画面ではURLを入れるだけで勝手にラベルが付いてくれるので記事作成が少し楽になります!

よかったら使ってみてください。ブログカードの掲載方法でお悩みの方の参考になっていれば幸いです。

こちらも是非

コメント

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