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

ここのところブログを見やすくする為に試行錯誤しています。
どんなに頑張った内容のブログ記事を書いても読みづらいと当然ながら誰も見てくれません。出来るだけそうならない様に、とにかく記事内の視認性を高めたいと思ってあれこれお試し中。

・アメブロ記事内のリンクを下線・青色・強調されるように変更
・続きアメブロ記事内のリンクが下線・青色・強調されるように変更


今回はサイト内へのリンクと外部サイトへのリンクで見た目が変わるようにしました。

具体的には、ブログ内にある外部リンクには、このようなアイコンが表示されるようにしてみたいと思います。

ということで例によってネット上で情報収集。
最初はリンクを張るたびに手作業でアイコンを貼り付けるのかと思って居たのですが、当然ながらそんな面倒な手間はいらずCSSで処理できる事を確認。


なんとなく理解したので
メッセージボードと記事内のみ外部リンクにアイコン画像が表示されるよう以下をCSSに追記

/*外部リンクに画像付与*/
.subContents a[target="_blank"]{
   background:transparent url(画像へのパス) center right no-repeat;
   padding-right:15px;
}

画像へのパスの部分には、表示するアイコンを置いた場所へのパス（URL）を記述します。
※4/9修正→詳細記事

ブログテンプレートの種類によっては「.subContents」の部分を「.entry」に変えてもいいかも知れません。ちなみにこの部分を削除するとブログ内全ての外部リンク（サイドバー含む）にアイコンが出てきます。

Amazonアフィリにまでアイコンが付与されてしまいますが、それはご愛敬。


記述をみてもわかると思いますが、「target_blank」により別窓でリンクする場合のみアイコンが表示されます。


一応サイト作成上のルールというか暗黙の了解のようなもので、「同じサイト内」へのリンクは「target_self（アメブロでいうところの【同じウインドウ】）」、「違うサイトへのリンク」は「target_blank（アメブロでいうところの【新しいウインドウ】）」で開くというのがあります。


そのしきたりに従ってこんな風にしています。
ただ昔の記事などは、書いている当時そんなルールは知らなかったので結構適当にリンクを張っていたような記憶が・・・・

過去記事でおかしくなっているのを発見した時は、都度々々修正していくようにしようかなと思います。

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