Link IndicationをやめてCSSのみで指定するようにした

スポンサーリンク

ブログデザイン修正に向けてのメモを実行に移し始めています。
WordPressのプラグインであるLink Indicationを停止しました。

Link Indicationは、リンク先の種類によりアイコンを付加できたり、リンクタグにblank要素を使わなくても新しいウィンドウで開いたりできるようになります。

このリンクタグのtarget要素については、SEO的にどれが正しいのか判らないのですが、target="_blank"という指定はしないほうがいいとかなんとかっていう話もあるそうです。

私は、外部リンクは新しいウインドウで開きたいですけどね。
別にそんなことはプラグインでしなくても、リンクタグを貼る時に付けるか否かをしていすればいいだけなので、大きな問題ではありません。

Link Indicationのもう一つの機能であるリンク先の種類によりアイコンを付けるというものをCSSだけでまかなえるようになったので、もう不要だという判断です。

それに、Link Indicationは2年以上更新されていないプラグインでもありますしね。
更新するほどの内容でもないのかもしれませんが、将来的にWordPressのアップデートにより互換性がなくなるかもしれないというリスクもありますので、そういった意味でもプラグインでなくても可能なものはそちらに移行しようと思います。

そもそも、リンク先の種類によりアイコンをつけたりする装飾は突き詰めれば自己満足でしかないですしね。
それでも、PDFへのリンクや外部リンクにはそうだと判るようなものにしたい、して欲しいというのが根本にあります。

では、具体的にどのようにしたかの作業メモです。
リンク先や拡張子ごとにアイコンを表示する方法 | NxWorldを参考に作成しました。

スポンサーリンク

使用するリンク先の種類を決める

Link Indicationでは下記のようにCSSを指定していました。
不要な種類は除けて、デザインはそのまま使いたいと思います。
別にこのままでも、リンクタグにクラス名をつければ、そのまま使用できますけどね。

[CSS]
/* For Link Indication plugin */
a.liexternal { padding-right: 12px; background: url(img/icon/link-icon_external.gif) no-repeat right; }
a.liwikipedia { padding-right: 14px; background: url(img/icon/link-icon_wikipedia.gif) no-repeat right; }
a.liimdb { padding-right: 18px; background: url(img/icon/link-icon_imdb.png) no-repeat right; }
a.liftp { padding-right: 13px; background: url(img/icon/link-icon_ftp.png) no-repeat right; }
a.limailto { padding-right: 18px; background: url(img/icon/link-icon_mail.png) no-repeat right; }
a.lipdf { padding-right: 12px; background: url(img/icon/link-icon_pdf.png) no-repeat right; }
[/CSS]
下記のように変更していきます。

外部リンク

[css]
div#entry a[href^=”http://”], a[href^=”https://”] {padding-right: 12px; background: url(img/icon/link-icon_external.gif) no-repeat right;}
[/css]
これは、URLで指定する方法を使ったものです。
ただhttp://https://指定しているので、すべてのURLが対象になります。
それだけだと、意図しないところまでアイコンがついてしまいます。
そこで、本文中の内部リンクに限定して指定しています。

内部リンク

[css]
div#entry a[href^=”https://b.hishitu.net/”] {padding-right: 14px; background: url(img/icon/Link.png) no-repeat right; }
[/css]
内部リンクを指定しています。
内部なんで、自分のブログのURLを指定しているだけです。

Wikipediaへのリンク

[css]
a[href^=”http://ja.wikipedia.org/”] {padding-right: 14px; background: url(img/icon/link-icon_wikipedia.gif) no-repeat right;
}
[/css]
Wikipediaへのリンクの場合にアイコンを表示します。
内部リンクの時と同じく、外部リンクのやつより後に記述します。

PDFへのリンク

[css]
a[href$=”.pdf”] {padding-right: 12px; background: url(img/icon/link-icon_pdf.png) no-repeat right;}
[/css]
今回はPDFだけですが、他にもzipやjpegなども、同じように指定できます。

まとめ

これらのCSSをまとめると以下のとおりです。
[css]
div#entry a[href^=”http://”], div#entry a[href^=”https://”] {padding-right: 12px; background: url(img/icon/link-icon_external.gif) no-repeat right;}
div#entry a[href^=”https://b.hishitu.net/”] {padding-right: 14px; background: url(img/icon/Link.png) no-repeat right; }
div#entry a[href^=”http://ja.wikipedia.org/”] {padding-right: 14px; background: url(img/icon/link-icon_wikipedia.gif) no-repeat right; }
a[href$=”.pdf”] {padding-right: 12px; background: url(img/icon/link-icon_pdf.png) no-repeat right;}
[/css]
画像をおいてあるディレクトリは環境に合わせて変更してください。

ところが!

まだ問題は解決していませんでした。

私の環境によるものなのですが、不要なところにまだアイコンが表示されます。
他のプラグインとの競合で、キーワードをリンクさせているのですが、そこに表示され、他にもヨメレバにも表示されてしまいます。

しかたないので、さらに細かに箇所に指定するか、リンクタグにクラス名を持たせて指定したほうがいいような気がしてきました。
クラス名で指定する場合、リンクタグを貼るたびに指定する必要があるので、面倒になるので、避けたいです。

で、できたのが下記
[css]
div#entry p a[href^=”http://”], div#entry p a[href^=”https://”] {padding-right: 12px; background: url(img/icon/link-icon_external.gif) no-repeat right;}
div#entry p a[href^=”https://b.hishitu.net/”] {padding-right: 14px; background: url(img/icon/Link.png) no-repeat right; }
div#entry span a[href^=”https://b.hishitu.net/”] {padding-right: 0; background: none; }
div#entry a[href^=”http://ja.wikipedia.org/”] {padding-right: 14px; background: url(img/icon/link-icon_wikipedia.gif) no-repeat right; }
a[href$=”.pdf”] {padding-right: 12px; background: url(img/icon/link-icon_pdf.png) no-repeat right;}
[/css]
内部リンクかつキーワードリンクはspanでクラス名が指定されていたので、その時は避けるように指定してます。

さらに

終わりたかったんですが、内部リンクの装飾はいらない気がしてきたんですよね。

結構、文章として盛り込むことも多いし、で、辞めました。
でも、一応ログとしてコードは残しておきます。
今後の参考になるかもしれないので。
[CSS]
/リンクタグ装飾/
div#entry p a[href^=”http://”], div#entry p a[href^=”https://”] {padding-right: 12px; background: url(img/icon/link-icon_external.gif) no-repeat right;}
div#entry p a[href^=”https://b.hishitu.net”] {padding-right: 0; background: none; }
div#entry a[href^=”http://ja.wikipedia.org/”] {padding-right: 14px; background: url(img/icon/link-icon_wikipedia.gif) no-repeat right; }
a[href$=”.pdf”] {padding-right: 12px; background: url(img/icon/link-icon_pdf.png) no-repeat right;}
[/CSS]

おわりに

Link Indicationを使用していた時には、使用するアイコンをしているするcssさえ記述しておけばよかったですが、CSSのみですべてをまかなうには、ちょっとCSSが多くなりました。

しかし、WordPressでプラグインを動かす負荷に比べればたいした事ではないでしょうたぶん。

コメント

タイトルとURLをコピーしました