Templates for SLMaMe

（2009.05.12 20:24　スタイルシートを訂正しました）
よく記事本文の中にテキストリンクを設定することがあると思いますが、そのリンクが内部リンクなのか、外部サイトへのリンクなのか、 SLurl へのリンクなのか、見た目で判断できると便利だと思いませんか？

今回は、テキストリンクの先頭にアイコンを表示させる方法をご紹介します。

アイコンを用意する

私が作成したアイコンはこちらの３つ。

• 内部リンク用アイコン
• 外部リンク用アイコン
• SLurl 用アイコン

SLurl 用アイコンは、ランドマークと同じピンの絵柄にしてみました。

HTML

投稿記事にリンクを挿入した後、a 要素にクラス名を追加します。

<a href="http://templ.slmame.com/" class="inside">内部リンク</a>

<a href="http://slmame.com/" class="outside">外部リンク</a>

<a href="http://slurl.com/" class="slurl">SLurl リンク</a>

CSS

テンプレート「スタイルシート」に以下のソースを追加します。
（2009.05.12 背景画像の表示位置「left top」を「center left」に変更）

/* 記事中のテキストリンク */

a.inside {

    padding: 0 0 0 20px;

    background: url(内部リンク用アイコンの URL) no-repeat center left;

}



a.outside {

    padding: 0 0 0 20px;

    background: url(外部リンク用アイコンの URL) no-repeat center left;

}



a.slurl {

    padding: 0 0 0 20px;

    background: url(SLurl 用アイコンの URL) no-repeat center left;

}

クラス名「inside」「outside」「slurl」が割り当てられた a 要素にのみ、それぞれのスタイルが適用されるように指定しています。

アイコンをテキストリンクの背景画像として左側に表示、「padding」で左側に余白を作ることでテキストとアイコンが重ならないようにしています。テキストリンクに下線（underline）を指定している場合、アイコンには下線が表示されませんが、リンク域には含まれています。

完成

これでカスタマイズは完了です。
一目でリンク先が理解できるので、とても便利ですね。



アイコンとクラス名を増やせば、様々なバリエーションを作ることが出来ます。ポイントは、分かりやすく覚えやすいクラス名にすること。zip ファイルへのリンクならクラス名も「zip」にしちゃいましょう。

その他の方法

この方法の他に、リンク先のURLや拡張子から識別して自動的にアイコンを付加する方法があります。少々複雑な方法ですので、充分に内容を理解した上で取捨選択して下さいね。以下はその方法を解説されている記事です。

• CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法 | CSS Lecture
• リンク先の拡張子に併せてアイコンを自動挿入する方法「Showing Hyperlink Cues with CSS」 | DesignDevelop
• 外部リンクだけにアイコンをつけることのできる CSS のセレクタ | ヨモツネット

中にはリンク付き画像にもアイコンが付加されてしまうものがあります。その場合はリンク付き画像の a 要素に別途クラス名を追加する必要があります。

ソラマメでは多くの利用者が記事内に画像を使用しているため、私はこの方法を選びませんでしたが、画像をあまり使用しない方にはこちらの方が便利かもしれません。