記事内の関連リンク、外部リンクをCSSの追加のみで目立たせる方法

ままはっくさんのところで、外部サイトへのリンクや内部リンクを素敵に装飾されていたので、これってどうやってるんだろう?と思って調べていました。

なんかね、記事のタイトルと概要、サムネイルも表示されるし、サイト名とはてブ数まで表示されるの!超クール!

うちでもやりたい!と思ったんだけど自分で調べた限りはfunction.phpに変更を加えてショートコードで記事に埋め込む方法しか発見できず。

これだとテーマ変更するたびにfunction.php変更しないとショートコードが丸見えでカッコ悪い!?それじゃダメだ!

そんなわけで、サイト名とかサムネイルの自動取得は諦めて、せめてそこがリンクであることをわかりやすく、かつスマホでもタップしやすくしようということに(妥協)しました。

で、それを実現する方法はCSSを書くだけ

これだとテーマ変更しても見た目状にゴミは残らないからね。

それではさっそくその方法をご紹介します!CSS変更できればWordpressに限らずどんなサイトにも使えます!(説明はWordpress利用を前提に書いています)

CSS適用前後の比較

まず、CSSを書き加えることで見た目がどう変化するかを比較します。

外部サイトリンクヘのCSS適用

CSS適用前はこんな感じです。

CSS非適用時

普通の、プレーンなリンクテキストですね。これはこれで好きなんですが。

次にCSS適用後です。

外部リンクの外見カスタマイズ

リンクのクリックエリア(タップエリア)が視覚的にも広くわかりやすくなりました。ユーザビリティ!

それと(外部サイトへのリンクとなります)はCSSで自動で記述するようにしています。

自サイト内の関連記事へのCSS適用

上記は外部リンク用のCSSで、自サイト内の関連記事リンク用のCSSを適用すると以下のようになります。

関連リンクの外見カスタマイズ

背景色を変更しているのと、こちらも(関連記事へのリンクとなります)は自動で挿入されるようにしています。

リンクの記述方法

リンクの記述方法については通常の<a href=”~~”></a>でOKです。

WordPressだとエディタのリンク挿入から行えます。

リンクの追加

ただし、外部リンク/関連記事リンクでそれぞれclassを追加します。

  • 外部リンク・・・<a href=”~~” target=”_blank” class=”exlink”>~~</a>
  • 関連記事リンク・・・<a href=”~~” class=”inlink”>~~</a>

外部リンクにはtargetを指定していますが、それはお好みで。

CSSの記述

それでは肝心のCSSの記述です。

利用中のテーマのstyle.cssに追記します。

.inlink,
.exlink{
border:1px solid #eee;
display:block;
margin-left:30px;
padding:10px;
font-size:90%;
font-weight:bold;
border-radius: 2px;
background-image: linear-gradient(-90deg, #B3FFC9, #FFE3B3);
}
.inlink:after{
content:”(関連記事へのリンクとなります)”;
}

.exlink{
background-image: linear-gradient(-90deg, #B3BFFF, #B3FFFC);
}
.exlink:after{
content:”(外部サイトへのリンクとなります)”;
}

前述のとおり、外部リンクには「exlink」、関連記事リンクには「inlink」を指定するのですが、背景のグラデーション以外は同じ設定なので、「,」で区切ってまとめて設定しています。

また、擬似要素「:after」を使って、要素の後ろにテキストを追加しています。「:before」を使えば要素の前に追加できますよ。

グラデーションの生成

今回は背景にグラデーションを使用しています。

グラデーションの指定はbackground-image: linear-gradient();で行っているのですが、グラデーション生成に便利なサイトがあるので、ぜひご利用ください。

shade Mathematically derived gradient explorer

スライダーをグニグニするだけで淡いグラデーションや無機質なグラデーションが作れちゃいますよ!

ブログカードを使う方法がある!

ここでなんと有力な情報を頂きました!

なんと「はてなブログのブログカードがOGPに対応して、はてなブログ以外のブログにも使えるようになった」のです。何言ってんだ!?

つまり、この方法を使えば冒頭で触れた素敵な装飾がそのまま実現できるということなのです。

はてなブログのブログカード

これはキャプチャ画像ですが、こんな素敵なスタイルでリンクを埋め込めるのです!

もう、これでいいですよね。

ただ、リンク先がOGPに対応していないと上手く動かないのかな?最近はみんな設定しているだろうから問題ないのかな・・・

あと、リンク先へは参照元が自サイトではなく「http://hatenablog.com/」となってしまうそうです。

詳しい方法はこちらの記事を御覧ください。

Chrome拡張機能「Create Link」を使ってはてなブログのブログカードを適用する方法

はてなブログのブログカードがOGPに対応! はてなブログ以外もブログカードスタイルになるぞ

教えてくださったF-logのけんぞーさん、ありがとうございました!

記事内の関連リンク、外部リンクをCSSの追加のみで目立たせる方法
この記事が役に立ったら
いいねお願いします!
スポンサーリンク

更新情報をお届けします!