2016/04/21  207 Shares

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

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

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

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

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

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

HTMLリンクタグ基本形

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

リンクボタンの使い方

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

<a href="https://naifix.com/">ブログ初心者応援サイト Naifix</a>

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

<a href="https://naifix.com/" class="link1">ブログ初心者応援サイト Naifix</a>

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

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

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

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

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

<a href="https://naifix.com/" class="link1">ブログ初心者応援サイト Naifix</a>

文字の色を変える

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

<a href="https://naifix.com/" class="link1">ブログ初心者応援サイト Naifix</a>
.link1 {
    color: #090;
}

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

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

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

下線の色だけを変える

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

<a href="https://naifix.com/blog-design/" class="link2">初心者ブロガーが絶対覚えておくべき読まれるブログデザインの大原則</a>
.link2 {
    border-bottom: 1px solid #03c;
    color: #f39;
    text-decoration: none;
}

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

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

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

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

<a href="https://naifix.com/width/" class="link3">これが読みやすいブログデザイン!有名サイトの記事幅と余白設定を大公開</a>
.link3 {
    display: block;
    background-color: #eee;
    padding: 1em;
}

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

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

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

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

<a href="https://naifix.com/line-height/" class="link4">ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしよう</a>
.link4 {
    display: block;
    background-color: #eee;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #eee;
    padding: 1em;
}

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

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

リンクアイコンをつける

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

<a href="https://naifix.com/relative-absolute/" class="link5">position:relativeとposition:absoluteで画像や文字を重ねてみよう</a>
.link5 {
    position: relative;
}
.link5:before {
    content: "\f0c1";
    color: #111;
    font-family: Fontawesome;
    margin-right: .4em;
    position: absolute;
    left: -1.2em;
}

Font Awesome を使ってみました。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

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

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

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

Font Awesome Unicodeの場所

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

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

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

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

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

<ul class="links1">
  <li><a href="#">リンクテキスト</a></li>
  <li><a href="#">リンクテキスト</a></li>
  <li><a href="#">リンクテキスト</a></li>
</ul>

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

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

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

<ul class="links1">
  <li><a href="https://naifix.com/adsense-blog/">ブログとアドセンスで稼いでみたいあなたへ贈る10のアドバイス</a></li>
  <li><a href="https://naifix.com/stop-google-adsense/">なぜあなたのブログのGoogle AdSenseは広告配信停止になったのか</a></li>
  <li><a href="https://naifix.com/adsense-ng/">アドセンスNG集-絶対に覚えておきたい規約違反事項一覧</a></li>
</ul>
.links1 {
    background-color: #ffe;
    border: 1px solid #999;
    list-style: none;
    position: relative;
    margin-top: 4em;
    padding: 2em 1em 1em;
}
.links1:before {
    content: "";
    background-color: rgba(255, 228, 181, .6);
    position: absolute;
    top: -1.5em;
    left: 40%;
    width: 100px;
    height: 40px;
    transform: rotate( -10deg );
}

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

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

枠線にテキストを入れる

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

<ul class="links2">
  <li><a href="https://naifix.com/simple-seo/">WordPress初心者に知っておいてもらいたい本当はシンプルなSEOの話</a></li>
  <li><a href="https://naifix.com/lazy-seo/">初心者向けの超手抜きSEOで検索サイトからのアクセス数を増やそう</a></li>
  <li><a href="http://blogbeginners.club/" target="_blank">ブログ運営に悩んでいるなら活用したいおすすめサービス</a></li>
</ul>
.links2 {
    background-color: #fff;
    border: 1px solid #111;
    list-style: none;
    position: relative;
    margin: 3em 0;
    padding: 1.5em 1em;
}
.links2:before {
    content: "Recommend";
    color: #ff4f02;
    background-color: #fff;
    font-size: 1.2em;
    position: absolute;
    top: -1.2em;
    left: 1em;
    padding: 0 .5em;
}
.links2:after {
    content: "Naifix";
    color: #111;
    background-color: #fff;
    font-size: 1.2em;
    position: absolute;
    bottom: -0.8em;
    right: 1em;
    padding: 0 .5em;
}

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

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

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

まとめ

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

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

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

それでは、また。