【Simplicity】外部リンクをアイコン付きボタンにカスタマイズ

外部リンクを、アイコン付きでシンプルなボタンにカスタマイズしてみました。

アフィリエイト等のリンクも、コードを埋め込むだけで分かりやすいボタンにすることができますよ。

WordPressのテーマ「Simplicity」向けのカスタマイズ内容ですのでそのつもりでご覧ください。

合わせて読みたい

実際にやってみたSimplicityのカスタマイズまとめ

Simplicity　外部リンクのボタンをデザイン
1. 外部リンクボタンのHTML
2. 外部リンクボタンCSS
最後に

Simplicity　外部リンクのボタンをデザイン

今回作成した外部リンクボタンのデザインはこんな感じ。

外部リンク先

かなりシンプルですが、個人的にはこれくらいの方が逆におしゃれに感じます。シンプルなのが好きなんですかね。

リンクホバー時に色がふわっと反転するようにしてますので、色はそれぞれのサイトに合うもに差し替えてください。

外部リンクのアイコンも自動的に付くようにしておきました。

それでは、「HTML」と「CSS」のコードをそれぞれ見ていきましょうか。

外部リンクボタンのHTML

こちらがHTMLのコード。

<div class="link_btn">
   <a href="http://coonelnel.net/" target="_blank" rel="nofollow noopener">外部リンク先</a>
</div>

大枠のdivタグの中にリンクコードを入れるだけ。アフィリエイトのリンクもそのまま入れてOKです。

コピペしてもらえば問題ありませんが、この後のCSSとリンクさせるために必ず「class=”link_btn”」を付けておきましょう。

外部リンクボタンCSS

続いてこちらが、外部リンクをシンプルなボタンにデザインするためのCSSコードです。

「外観」→「テーマの編集」→「スタイルシート」に記述しましょう。

/* 外部リンクボタン
===================================*/
.entry-content .link_btn{
   text-align: center;
   padding: 1.6em;
}
.entry-content .link_btn a{
   color:#499eda;
   text-decoration: none;
   padding:20px;
   border-radius:3px;
   border: 1px solid #499eda;
   -webkit-transition: all 0.7s ease;
   -moz-transition: all 0.7s ease;
   -o-transition: all 0.7s ease;
   transition: all  0.7s ease;
}
.entry-content .link_btn a:hover{
   color:#fff;
   background-color:#499eda;
   text-decoration: none;
   padding:20px;
   border: 1px solid #499eda;
}
.entry-content .link_btn a::after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f08e";
}

簡単にコードのポイントを紹介しておきますね。下記を参考に自分のサイトに合うスタイルに変更してみてください。

・色を変更

多くの人が変更することになるのはボタンの色でしょう。計4カ所あります。

分かりやすくコードに色を付けておきましたので、好きなカラーコードに変更してみてください。

・ボタンを角丸に

「border-radiusプロパティ」でボタンを角丸にしてます。

今は3pxにしてますが、この値を大きくすることでさらに丸みを出すこともできます。

不要な場合は消してもらって構いません。

・リンクをふわっと反転

リンクの色をふわっと変えるために「transitionプロパティ」を使用してます。

これも数値を変えることで切り替わる速度を調節できます。

・外部リンクのアイコン

最後に疑似要素「after」を使って、アイコンを付けました。

アフィリエイトのリンクは大抵「新しいタブで開く」設定がしてあると思いますが、層じゃない場合は各自設定するといいでしょう。

「リンクの設定」内で、「リンクを新しいタブで開く」にチェックすればOKです。

また、Simplicityで使えるアイコンはこちらの記事を参考にどうぞ。

【simplicity】豊富なアイコンが使い放題！アイコンフォント「FontAwesome」

WordPressのテーマ「simplicity」を使っている人は、サイトの所々にアイコンが使われているの見たことありますよね。しかしそれはほんの一部で、実際はもっといろんな種類のアイコンが存在します。「他にこんなアイコンが...

最後に

ただの文字リンクに物足りなさを感じているあなた。

これならサイトのイメージを崩すさずに、さりげなくボタンを目立たせることも出来るでしょう。

簡単に出来ますんでね。ぜひ参考にしてみてください。

Simplicity 外部リンクのボタンをデザイン