今回のエントリーは外部リンクの先頭に”リンク”と書いた絵文字マークをCSSで付ける工夫です。
また、このマークをJavaScriptで狙った外部リンクに自動的に貼るにはどうすれば良いかやってみました。
（2015/09/02追記：以下の手順では、PC版だけにリンクマークが付くことになるので、スマホ版はてなブログでもリンクマークが付くようにしました。手順は別のエントリーにまとめました）
affiliate-hatekun.hatenablog.com
最初はクラス付加を手動でやってました
最初は、はてなブログのデザイン「CSS」蘭に「.exLink」というクラスを作り、リンクを貼った時に、「HTML編集」に編集画面を切り替えてリンクタグ"a"に「class="exLink"」を手で追加していました。こんな風に…
まずこのリンクマークの付け方から。
リンクマークを画像ソフトなどを使って用意したり、素材サイトから探して作ります。私はホームページビルダーのボタン素材の画像から組み合わせて以下の画像を作りました。
作った画像を自分のフォトライフにアップロードし、この画像を使ってCSSを設定します。（下記CSSコードのURL（xxx.gif）部分は、ご自身で作った画像をご自身のフォトライフにアップロードした時の画像のURLとなります）
クラス名を私は「exLink」としていますが、別のクラス名でもかまいません。
.exLink {
text-indent: 0em !important;
background:url(http://f.st-hatena.com/images/fotolife/xxx.gif) no-repeat left center;
padding-left:65px;
}上記CSSコードは、はてなブログのデザイン設定にある「デザインCSS」の部分に設定します。変更を保存すれば完成。
あとは、記事中の外部リンク部分「＜a href="xxx.html"＞」のタグにclass="exLink"を追加で書き加えて…＜a class="exLink" href="xxx.html"＞とすれば、リンクマークの画像がリンクの先頭に表示されます。class="exLink"に反応して…
となります。
ただし手動は面倒、そしてつけ忘れる…
ずっと手動でクラスを書き加えていたのですが、つけ忘れてしまったり次第に面倒になってリンクマークをつけなくなってしまいました。
一つのエントリーに10も20も外部リンクがある場合などHTML編集の画面に切り替えてリンク部分を探し出してコピペコピペ…の繰り返しが面倒です。
外部リンクにターゲット属性をつけるコードを利用させてもらった
以前当ブログで紹介しました「【はてなブログ脱獄ブログ】さんの外部リンクにターゲット属性をつけて、リンク先を新しいウィンドウを使って開く機能」です。
affiliate-hatekun.hatenablog.com
このJavaScriptのコードを利用させてもらいました。こちらのコードはページ内の外部リンクを探し出してそのタグにターゲット属性を書き加えるというものです。
今回重要なのは、それと同時に「exLink」というクラスも付加してくれます。
つまり今まで手動でつけていた「exLink」を自動でつけてくれるというありがたい機能も付属していたんです。
自動マーク付与の具体的な方法
外部リンクに自動で「新規ウィンドウでひらく」「リンクをたどらない」の設定をする方法 - はてなブログ脱獄ブログ
こちらの記事を参考に、JavaScriptのコードを自身の「デザイン設定：ブログ記事上」に記入して変更を保存。
その後ブログを確認すると、外部リンクには「target="_blank"」と「class="exLink"」がJavascript（JQUERY）によって付与されていますので、外部リンクをクリックすれば別ウィンドウが立ち上がってリンク先を表示します。
さらに、「class="exLink"」効果により、先ほどあらかじめ設定していた「exLink」クラスが反映され、リンク頭に画像が付きます。
こんな感じです。
ただしこのままですと外部リンクの到る所にどわっ！と「リンク画像」がくっついてしまいます。「へぇ…僕のブログにこんなに外部リンクってあったんだ…。」って感心している場合ではありません。狙った部分だけにリンクマークを付ける方法を何か考えなければなりません。
そこであれこれ調べて考えた挙句、「はてなキーワード」、アフィリエイトリンクの「amazonリンク」「楽天のリンク」「7net」などを指定して除外する方法を思いつきました。そこで以下のようにコードを変更させていただいています。
もともとのコードを「ターゲット属性をつける命令文」と「class="exLink"をつける命令文」の二つに別けています。
exLinkをつける命令文（6行目）の方に、ブログでリンク画像を貼りたくないリンクに向けて「.not("a[href*='amazon']")」などを追加しました。これはアマゾンなら「URLに’amazon’を含む場合は除外する」という意味のコードですのでシングルクォーテーションの内容を変更すれば別サイトに対応できます。
同様にして「はてなキーワード」「楽天」「7ネット」「ヨメレバ」など私のブログで画像マークを付けたくない場所をコード上に続々追加し除いて完成です。
じつは、Javascript習いたてで昨日調べるまでこのコードがJQUERYだということさえ知りませんでしたので、ターゲットブランクをつける命令文と「exLink」をつける命令文の同じような命令文2つをただ並べたというコードになっています。これを一文にまとめる力がないのでこんな状態ですが（誰か教えてください）、これから勉強するつもりです。
ブログを公開して今チェックしてみたら、Gistの窓部分にリンクマークが出ていました。GistのURLも除外するよう追加して消しておこうと思います。（2015/09/02追記：Gistのリンクを除外しました）
また、以下のエントリーにスマホ版でもリンクマークの画像が表示されるようにCSSを追加する手順をまとめました。
