外部リンクに自動でマークを付けて視認性を高めるワザ

ブログカスタマイズを勉強中のかーずです。これから休日は本題からそれて、ちょっとした小ネタ（があれば）書くことにします。

勉強中の身なので、堂々と記事にするのは気がひけるのですが、だれかの役には立つかなとは思いますので興味がわいた人は読んでください。


ではまず、カスタマイズといえば、ブログをカッコよくデザインすることを意味しているような感じがしますが、使い勝手をよくする為にももちいられます。かーずが今取り組んでいるのは主に後者です。

で、カスタマイズをするために必須の技術がCSS（カスケーディング・スタイル・シート）です。このCSSの知識がないとカスタマイズと言ってもなかなか難しいです。

CSSとは簡単に言えば、ホームページやブログのデザイン部分を決めてしまう設定のことです。一昔前はHTMLで内容とデザインの全てを表現していたのに対し、今は、内容はHTMLで、デザインはCSSでというのが主流です。

特にこのアメブロはHTMLを全くいじれないので、全てのデザインをCSSのみでやらなければならない。

逆に言えば、CSSを勉強する環境としては最高なんですね
モノは考えようです


で、今回かーずが挑戦したのがタイトルにもあるように「外部リンクにマークを付ける」ことです。

なんのためにこんなことをするかというと、かーずのブログを見てもらえばわかるように、過去の記事やら外部の記事やら、どこへ飛ばされるか分からないリンクがあちこちに張り巡らされています。

読者からすれば、ワケも分からない外部サイトに飛ばされるが嫌な人もいるだろうし、ブログ内のリンクだと思ったのに外部に飛ばされて不快な思いをさせるかもしれません。

そういうことは予め一目でわかるように外部リンクの後にのマークを付けてあげれば親切ですよね。
この手法は、Wikipediaなどでよく使われている（←外部リンクです。分かります？）ので理解されやすいのではないでしょうか。

でも、記事を書くごとにいちいちこのマークを画像フォルダから呼び出して貼り付けていたんでは作業効率が悪くなりますし、今まで書いた記事にも同じことをするとなるとものすごい手間が掛かります。絶対やりたくありません。

やっぱり、外部リンクと内部リンクを自動で判定して、マークをつけてくれたらありがたいですよね。


そういうわけで、いろいろ試行錯誤で頑張ってみたので紹介します。
まずは、外部リンク用の画像を用意してどこかにアップロードしておいてください。お持ちでない方は、このブログで使われているアイコンをそのままダウンロードして使用しても構いません。

方法はCSS編集画面に以下の記述を追加するだけです。
/*ここから*/　と　/*ここまで*/の部分をコピーしてCSS編集画面の一番下に追加してください。

/*ここから～外部リンクにマークを付ける*/
.entry a[href^="http:"]:after{
content: url(画像のURL);
vertical-align: middle;
}
.entry a[href^="http://ameblo.jp/mixturet/"]:after{
content: "";
}
/*ここまで*/

注1：赤文字部分はあなたのブログURLを記入してください。
注2：この記述はアメブロ専用です。他ブログで使用する場合は、.entryをお使いのブログで記事部分を指定するセレクタ名に置き換えれば使える？と思います。

気になるひとのために解説しておくと、まず最初の記述で記事内の内部・外部を問わず全てのリンクにマークを付けます。
そして、次の記述では指定URL内のリンク先からマークを取り外しています。

CSSがよく分からない人にとっては、わけわからないようにみえると思いますが、やってることはシンプルです。要は記号に慣れてないだけなんですね。


また、画像を用意するのが面倒であれば、テキスト（定型文）で表現するのも良いかもしれません。その場合は先程の画像へのURL部分を、例えば以下のように変更してください。

/*ここから～外部リンクに定型文を付ける*/
.entry a[href^="http:"]:after{
content: "（⇒外部サイトへ）";
vertical-align: middle;
}
.entry a[href^="http://ameblo.jp/mixturet/"]:after{
content: "";
}
/*ここまで*/

注：赤文字の部分をお好きな言葉や記号に修正してください。

これで、好きな記号や文字列をリンクの後に自動で表示させることができます。


今後もこのような小ワザがあれば紹介して行きますね。


しかし、アメブロはCSSの設定反映が遅いです・・・
実はこの記事をアップする直前に、このブログでもこの設定を済ませているんですが、アップした時点ではまだ設定が反映されていないので、本当にうまく行っているか不安です
まあ、プレビューがうまく行っているから大丈夫でしょう。なんくるないさー


かーずでした。