【超簡単・プラグイン不要】WordPressでおしゃれ綺麗なボタンを作ろう！

今回は、プラグインを使用せずにテキストリンクをボタン化する方法を紹介したいと思います。

この記事を書こうと思った背景としては、

WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』

「こういったテキストリンクって分かりにくいよ」と友人から指摘を受けたことです。

よし

記事を書いている本人にとっては当たり前だろって思っていることが、読者からすると分かりにくいことって結構あるんだよねえ。

Jinというテンプレートを使用している場合、ボタンリンクは標準装備されています。

この記事はボタンリンクが標準装備されていない方向けです。

この記事の内容

完成版
導入手順
使い方
ボタンカスタマイズ
- a.button（非クリック時）
- a.button:hover（マウスオーバー時）

完成版

今回作成するボタンはこんな風になります！

WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』はこちら

＊フォント色や枠線などは自由にカスタマイズすることができます。

導入手順

下の画像の通り進めていけば大丈夫です！

僕のボタンの場合、CSSに記載しているコードはこんな感じです。

これを「追加CSS」に貼り付ければ、全く同じボタンが完成します。

a.button{
   display:block;
   padding:20px;
   margin:0 auto;
   color:#ffffff!important;
   text-align:center;
   font-size:20px;
   font-weight: bold;
   text-decoration: none;
   width: 100%;
   border: 2px solid #1DBBDA;
   background: #1DBBDA;
   border-radius: 10px;
}
/* マウスオーバー時 */
a.button:hover{
   color:#1DBBDA!important;
   background: #ffffff;
}

使い方

同じく下記のように進めてください。

ここまで進めると、こんな感じのHTMLコードができると思います。

あとは下図のように、「class=”button”」を記述すればボタンが記事上に現れるようになります。

よし

一旦ここまで進めてしまえば、後は「class=”button”」を追加記載するだけです！

ボタンカスタマイズ

追加CSSに記載したコードを変更することで、ボタンデザインを変更することができます。

↓ 僕のボタンのデザイン

a.button{
   display:block;
   padding:20px;
   margin:0 auto;
   color:#ffffff!important;
   text-align:center;
   font-size:20px;
   font-weight: bold;
   text-decoration: none;
   width: 100%;
   border: 2px solid #1DBBDA;
   background: #1DBBDA;
   border-radius: 10px;
}
/* マウスオーバー時 */
a.button:hover{
   color:#1DBBDA!important;
   background: #ffffff;
}

上記のCSSコードを解説していきます。