2016/06/1673 Shares

CSSでテキストリンクをおしゃれなデザインにしてみよう

テキストリンクのデザイン

ブログカードなどでリンクをかっこよくおしゃれに見せるブログが増えてきましたが、CSS でちょっと装飾するだけでもいろいろなデザインにすることができます。

CSS で何も指定しない状態だと、青文字+下線というスタイルになりますよね。

ブログ初心者応援サイト Naifix

この状態から、色をつけたり枠をつけたり、テキストの前にボタンを入れたり、いろいろアレンジしてみましょう。

HTMLリンクタグ基本形

無料ブログでも WordPress でも、たいていはエディタの上にあるリンクボタンを使ってテキストにリンクをつけることができます。

リンクボタンの使い方

HTML タグが表示される状態にすると、こんな感じになっていますね。

CSS で装飾するときは、タグ内にクラス属性をつけると管理しやすくなります。

クラス名は覚えやすいものを使ってください。CSS の指定と紐づいていれば OK です。

WordPress なら、AddQuicktag にボタンを登録しておくと便利ですよ!

テキストリンクのデザイン例

色を変える・背景色を変える・枠をつける・アイコンをつける、などいくつかのパターンをご紹介します。

基本形は先ほどご紹介した以下の形です。

文字の色を変える

まずはリンクの色を変えてみましょう。CSS の基本みたいな感じですね。

一般的には「青文字+下線」がリンクと認識されています。

デザインに合わせてリンクの色を変更しているサイトもありますが、とくに理由がないなら青系統にするのが無難です。せっかくリンクしてもクリックされないと悲しいので……

間違っても、記事内でリンクごとに色を変えるのだけはやめたほうが良いと思います。

下線の色だけを変える

リンクの下線は文字色と同じになりますが、border を使えばテキストと下線の色を変更できます。

text-decoration-color を使うこともできますが、未対応ブラウザがあるので border のほうが確実ですね。

border-bottom の値を変えれば、線の太さを変えたり破線にすることもできます。

ボックスにして背景色を変える

リンクをボックスにして、背景色を設定してみましょう。

display:block にすることで、文字の上ではなくボックスのどこでもクリックできるようになります。

ボックスにして枠線をつける

枠線をつける場合は、sample03 に border を追加すれば OK です。

でも、枠線を少し離したような感じにするとおしゃれ度が増しますね。

border を白にし、スキマのように見せるのがポイントです。

外側の枠線は box-shadow でつけています。

リンクアイコンをつける

HTML はそのままで、CSS でアイコンをつけてみましょう。

Font Awesome を使ってみました。

Font Awesome を使うときは、<head> 内に以下のコードを入れてください。

※すでに設定済みのテーマもあります

CSS の content で使うときは、バックスラッシュ+ Unicode の形になります。

Unicode はサンプルアイコンの下に小さく書かれています。

Font Awesome Unicodeの場所

content の中と font-family を変えれば、通常のテキストにすることもできますよ。

リスト(ul)を使ったデザイン例

Sample03 ~ 04 は「リンクがひとつ」を前提にしたデザインですが、複数のリンクをボックス内に入れたいこともありますよね。

そんなときは、リスト <ul> を使いましょう。

基本パターンがちょっと変わって、今度は ul にクラス属性をつけます。

もちろん、複数ではなくひとつのリンクだけでも使えます。

テープで止めた感じにする

テープでペタっと貼りつけたようなかわいい感じにしてみましょう。

list-style:none でリストマークを消していますが、ここら辺はお好みで。

:before でテープっぽくしていますが、画像にするともっと可愛い感じになると思います。

枠線にテキストを入れる

今度はちょっと男っぽい(?)感じで、テープではなくテキストを入れてみます。

CSS は :before と :after を使うので少し長めです。

英語なら、Google Fonts を使ったほうがもっとかっこよくできそうですね。

テキストや色を変えてアレンジしてみてください!

まとめ

できれば、リンクのデザインを変えることでクリック率はどう変わったか、を見ると今後の運営に活かせると思います。

結局はオーソドックスな王道パターンが一番クリックされたりするんですが、自分色に染めたほうがブログに愛着がわきますよね。

ブログは続けることが大切なので、たまには記事を書かずにデザインを変えたりして適度に息抜きしましょう!

それでは、また。