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

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

Cocoon 内部リンクのブログカードに自動でラベル付け
Cocoonのブログカード表示は簡単
ブログカードにラベルを表示
CSSを編集
CSSファイルのカスタマイズ内容
外部リンクとの差別化
こちらも是非

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

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

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

↓こんな感じ

iPadだけでLINEスタンプを作成・販売した方法【メディバンペイント】

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

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

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

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

ブログカードショートコードの使い方

URLを入力するだけの「通常ブログカード機能」とは違い、ブログカードを強制的に表示させる「ブログカードショートコード」機能の紹介です。

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

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

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

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

CSSを編集

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

ファクタリング安心

WordPress(Cocoon)でPHPやCSSやJavascriptなどの外部ファイルを読み込む

WordPressの機能やデザインを変更したい場合、ページを開くたびにPHPファイルやスタイルシート(CSS)やJavascriputファイル(js)を読み込ませる必要がしばしばあります。その方法は色々とありますが、オーソドックスな方法を

私は管理が楽そうなので後者の方法で外部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でラベルに入れたいテキストを入れています。