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

2019/08/12

QooQ ブログ ブログカスタマイズ

t f B! P L

こんにちは HARU( @HARU )です。

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

そんな外部リンクや内部リンクの見た目を CSS で装飾してみたいと思う。

今回は、Blogger の QooQ を使って CSS の変更をしていくが、どんなブログやテンプレートを使っていても、参考になるよう書いたので活用してほしい。

※テンプレートの編集( ソースコード改変 )するときは、必ずバックアップを取ってから編集すること。

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

リンクには内部リンクと外部リンクがあるけど、外部リンクをわかりやすくするためアイコン( )を設置してみた。

Font Awesome の導入

<head> の直下に以下のコードを貼り付ける。

すでに Font Awesome を導入している場合、新たに貼り付ける必要はない。

  
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
  

CSS

以下のコードを Blogger テンプレートの CSS 欄に記載する。

QooQ のテンプレートを使っている人は個別記事辺りに記載すると、HTML を編集するときにわかりやすいかもしれない。

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

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

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

※他のテンプレートを使っている場合、#single-content を自分のブログ用に変更すること。

more タグを使っている場合

アイコン表示の CSS は more タグにも反映されてしまい、意図せずアイコンが表示されてしまう。

ブログ記事内に more タグを使っている場合、以下のコードを Blogger テンプレートの CSS 欄に記載する。

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

目次の自動作成をしている場合

自動で目次作成!Blogger ブログで目次を挿入する の記事の目次を導入している場合、目次のデザインが崩れることがある。

修正方法は以下のページにて追記するので参考にしてください。

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

リンクタグ( a タグ )にマウスが乗ったときに、リンクの色が変わるように CSS を変更してみた。

リンク色変更イメージ

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

CSS

以下の CSS を Blogger テンプレートの CSS 欄に記載する。

QooQ のテンプレートを使っている人は個別記事辺りに記載すると、HTML を編集するときにわかりやすいかもしれない。

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

※他のテンプレートを使っている場合、#single-content を自分のブログ用に変更すること。

大体のコード位置

  
  <html>
  <head>

    <link href='//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

  <b:skin>

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

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

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

  </b:skin>
  </head>
  <body>
  </body>
  </html>
  

まとめ

いかがだったでしょうか?

この他にもカスタマイズする方法はあるので、ひとつの形として参考にしてもらえると嬉しいです。

QooQ