Home
Menu
Side
Twitter
Top
ホーム / Blog | QooQ | ブログカスタマイズ |

【 QooQ カスタマイズ 】 Blogger ブログでリンクの装飾を CSS でカスタマイズ 【 外部リンクアイコン他 】

2019/08/12

Blog QooQ ブログカスタマイズ

ここでは、外部リンクと内部リンクを区別するため、a タグにリンクアイコンを付ける方法を紹介します。

また、マウスカーソルがリンクの上に乗ったとき、色が変わる調整も一緒にやっています。

こんにちは、HARU（ @HARU ）です。

ブログや Web サイトを運営していると必ずと言っていいほど、外部リンク、または内部リンクなどのリンクタグ（ a タグ ）を使うことがあります。

今回は、そんなリンクの見た目を CSS で装飾する方法を紹介します。

ここでは例として、Blogger の QooQ を使って CSS の変更を行いますが、応用すれば別のテンプレートでも使えます。

注意

テンプレートの編集（ ソースコード改変 ）をするときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の記事を参考にしてください。

参考サイト

外部リンクと内部リンク

外部リンクと内部リンクの違いは、リンク先が自分のブログや Web サイト外なのか、内なのかの違いです。

言葉通りの意味ですね。

SEO の観点から言うと、外部リンク、内部リンク自体はとても重要です。

しかし、ここで紹介している外部リンクと内部リンクを区別する調整などは、大した意味を持ちません。

ハッキリ言って自己満の世界ですねｗ

外部リンクアイコンの設置

リンク先が外部なのか、内部なのか分かりやすくするため、外部リンクにアイコン（ ）を設置します。

Font Awesome の導入

Font Awesome を導入していない場合、以下の記事を参考に導入してください。

Font Awesome について

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。


/* 外部リンクアイコン表示 */
/* **** には自分の URL */
#single-content a:not([href^="****"])::after {
  margin: 0 3px;
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f08e';
  margin-left: .5em;
}

href^="****" の **** には自分のブログ URL を入力する。

他のテンプレートを使っている場合、#single-content を自分のテンプレート環境に合わせる。

上記 CSS は、自分のブログ以外のリンクにはアイコンを付けるという意味になります。

more タグを使っている場合

ブログ記事内に more タグを使っている場合、意図せずアイコンが表示してしまうことがあります。

以下の CSS を追記することで、アイコン表示を防ぐことができます。


/* more タグ対応 */
#single-content a[name]::after{
  display: none;
}

自動で目次生成をしている場合

私のブログを参考に、自動で目次の生成をしている場合、目次に意図せずアイコンが表示してしまいます。

以下のページに解決策を追記したので、参考にしてください。

目次生成の記事

Blogger で画像にリンクアイコンが表示されてしまう場合

コメントにて質問があったので追記しておきます。

Blogger で画像を挿入した場合、別ウィンドウで表示するためのリンク（ a タグ）が自動で付与されます。

a タグを手動で消している方以外は、アイコンを非表示にした方が見栄えがいいでしょう。

方法は他と同じように、画像のリンクにはアイコンを表示させない CSS を記述します。


#single-content .separator a::after {
  display: none;
}

ちなみに Blogger の標準では画像を挿入したとき、<div class="separator">が自動で付与されます。

なので上記 CSS は、.separator内の a タグにはアイコンを表示させないという意味になります。

こんな感じで、意図せず表示してしまったアイコンは、非表示にすることができるので参考にしてください。

マウスを乗せたときにリンクの色を変える

リンクタグ（ a タグ ）にマウスが乗ったときに、リンクの色が変わるように CSS を変更します。

リンク色変更イメージ

CSSによるリンク色変更イメージ

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。


/* リンク色変更 */
#single-content a:hover{
  color : #ff7043;
}

QooQ