アメブロ記事内の外部リンクに画像を自動表示の修正

前回の記事で、アメブロ記事内の外部リンクにアイコンを自動的に表示する方法を書きましたが、その後日談というか修正内容について。

前回、アメブロ記事内の「target=_blank」に対してアイコンが表示されるようにしました。
しかしあのやり方では、記事に張ってあるAmazonアフィリにまでアイコンが出てきます。それはまだよかったのですが、よくよく見てみると記事下の「retweet」ボタンや「なうで紹介」ボタンにまでこのアイコンが出ていました。

こんな感じに



さすがにこれではあまり見た目が良くないので修正を検討。
「target=_blank」全てに対して画像を付加するのではなく、特定の要素を持った外部リンクに対してのみアイコンが表示されるようにすればいいのではないかという結論に達しました。



今までアメブロ記事の編集画面でリンク先の表示方法を「新しいウインドウ」にしていた場合、記事内でのソースは

<a href="http:リンク先URL" target="_blank">リンクするテキスト</a>

このようにマークアップされていたはず

これに対し今後は

<a href="http:リンク先URL" target="_blank" class="outerlink">リンクするテキスト</a>

というように後ろに「 class="outerlink"」を付け加えます。


更にCSSにはこう記述（前回の記述は削除）

/* 外部リンクへ画像追加 */
.outerlink{
   background:transparent url(画像へのパス) center right no-repeat;
   padding-right:12px;
}

これで「 class="outerlink"」がついた外部リンクのみにアイコンが表示されるようになります。



ただしこのやり方の場合、過去記事の外部リンクにはアイコンが出てきません。
今までの記事では「 class="outerlink"」を記述していなかったので当然ですね。


遡って過去記事を修正していくか、いさぎよく昔の記事については諦めるか、どちらかを考えないといけません。
たぶん、近年の記事については少しずつ書き直すものの、あまりにも昔の記事は仕方なしに放置という形でお茶を濁すと思います。

・アメブロカスタマイズ目次