koblog

高校生のWEBデザインブログ

外部リンクをオシャレにしよう

HTMLでリンクを貼るといえば<a>タグが定番です。

しかし、普通に書いてもこのように表示されるだけであまり面白くありません。

 

そこで今回は<a>タグを少しオシャレに変えるカスタマイズを紹介します。 

普通の<a>タグと使いこなすことで、見やすくもなると思います。

 

デモ

普通の<a>タグ

Test

 

オシャレな<a>タグ

Test

文字の左にアイコンがつくようになります。

内部リンクと外部リンクで使い分けると良いかもしれません。

 

HTML

使う際は下のコードを使います。

普段の<a>タグにクラス名「a-link」を加えるだけで使えます。

<a class="a-link" href="~~~">Text</a>

 

CSS

CSS
.a-link:before {
    font-family: "blogicon";
    content: "\f009";
    text-decoration: none;
    margin-right: 3px;
}

今回はFontAwesomeを使わず、はてなブログ純正のblogiconを使っています。

アイコンを変えたい場合は「content: "\◯◯◯";」の部分を変えてください。

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる