ＣＳＳで簡単！インパクトなリンクを作ろう

まえがき

ブロガーのみなさんこんにちは。Mです。

今回は、読者がブログ記事を読んでいて、ついつい素通りしてしまいがちなリンクについての話しです。いったん立ち止まらせて思わずクリックしたくなる「インパクトリンク」の作り方をご紹介します。

【目次】
①リンクはブログのアクセスアップを劇的に増やす重要なツール
②他のブログに差をつける！リンクの装飾テクニックとは？
③初心者でもコピペで簡単！「インパクトリンク」の実装手順
④「インパクトリンク」のHTML
⑤「インパクトリンク」のCSS

リンクはブログのアクセスアップを劇的に増やす重要なツール

ブロガーが記事を書くうえで日頃から何気に多用している人が多いのでは？と思われる「リンク」。正確にいうと、リンクとは「aタグ」で囲まれた文章のことです。

【aタグの例】

<a href="リンク先のURL">表示される文字</a>

しかし、リンクと言われてもブログ初心者にとってはあまり気に留めることがないのかも知れません。ボクも昔はそうでした。

ところが、ブログに慣れて技量も上達してくるといかにリンクが大切であるかが分かって来るのです。なぜなら、リンクというものは書き手が意図する方向に読者を誘導するための最も重要なツール（手段）だからです。

また、人間という生き物は画像に比べ、テキストリンクの方をより多くクリックする傾向が高いそうです。

よって、リンクを上手に活用すればさまざまな効果を生み出すことができ、ブログのアクセスを劇的に増やすことも可能になるのです。些細な事でも努力・工夫を積み重ねていけば必ず良い結果が付いて来ます。これがブログ運営の醍醐味でもある訳ですね。

他のブログに差をつける！リンクの装飾テクニックとは？

リンクを活用してブログのアクセスアップを図るにはさまざまな方法が考えられます。一例としてボクが実践しているのは記事下に関連記事へのリンクを貼る事です。

こんな感じ。これは下の記事を書いた時に貼ったリンクですが、この記事を読んだ人がブログから離脱することを留める効果があります。記事を読み終わったAKBファンがこのリンク経由で次々と他の記事に拡散され、結果としてもの凄いアクセスにつながりました。

≫AKB神7初！前田敦子がスピード結婚、勝地涼と交際半年足らずで

しかし、Webサイトが星の数ほどあふれ返る現在では、記事中のリンクも当たり前にみられる存在となりました。よって、見慣れたリンクをただ貼っただけではよほどその内容に興味を持たない限りクリックされる事はありません。

そこで登場するのが、リンクにインパクトを与える装飾テクニックです。この「インパクトリンク」はボクのブログで実装しています。

マウスカーソルをリンクに当てた時（HTML&CSSでは、「ホバー時」と呼んだりします）に少し目立つような変化をつけています。実際のデモは上の記事の下の方にありますので覗いてみて下さい。

このような工夫をすることで読者の方に一瞬「！？」というインパクトを与えられ、劇的に直帰率の改善につながりました。

ボクの場合は記事下の関連記事に設置していますが、さまざまな場面で活用出来ると思います。ここぞという時に記事中に入れ込んでも効果的なのではないでしょうか。

初心者でもコピペで簡単！「インパクトリンク」の実装手順

Web知識が浅かったり、ブログ初心者の方にとってこのような装飾方法はさぞかし難しいのでは？と思ってしまうかも知れません。しかしそんな事はありません。とても簡単なんです！

それでは、さっそく初心者でもコピペで簡単に使える「インパクトリンク」の実装方法を書いていきます。

CSSに一度書いてしまえば、同じid名やclass名を使うことでさまざまな場所で活用できますよ！

「インパクトリンク」のHTML

まずはHTMLから。