Rails

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

  /
wordperss

 

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

 

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

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

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

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

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

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

この記事の内容
  1. 完成版
  2. 導入手順
  3. 使い方
  4. ボタンカスタマイズ

完成版

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

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コードを解説していきます。

a.button（非クリック時）

color

「color: #ffffff!important;」の「#ffffff」部分を変更することで、フォントの色を変更することができます。

＊ちなみに#ffffffは白色です。

border

「border: 2px solid #1DBBDA;」を変更することで、ボタンの枠線デザインを変更することができます。

2px: 枠の太さ

solid: 実線（他にdottedやdashedがあります）

#1DBBDA: 枠線の色

background

「background: #1DBBDA;」でボタンの背景色を変更することができます。

border-radius

「border-radius: 10px;」で枠の四隅を丸くすることができます。

長方形がいいという方は削除してもらって構いません。

a.button:hover（マウスオーバー時）

color

マウスオーバー時のフォント色を変更することができます。

background

マウスオーバー時の背景色を変更することができます。

 

 

今回はテキストリンクをボタン化する方法を紹介しました。

確かにテキストリンクって分かりづらいですが、今回の作業を1回やってしまえば後は「class=”button”」を記述するだけなので、みなさんもぜひやってみてください。

WordPress
こんな記事もおすすめ