”WordPress”リンクボタンをカスタマイズ

”Cocoon”には最初から「ボタン」と「囲みボタン」が装備されて、違いは「ボタン」は通常のリンクの作成用、「囲みボタン」はアフィリエイトリンク作成用と分類できます。

今回は、沈み込むボタンの作成と、色を変える方法をまとめました。

沈みこむボタン

こんなボタンにします

CSSコード

CSSコードは”Cocoon”子テーマの「style.css」に貼ってください。

/* −−ボタンを浮かして影をつける−−*/ 
.btn { 
box-shadow: 0 7px 0px #808080; 
} 
/*−−−ボタンが重なったときに沈む−−−*/ 
.btn:hover { 
box-shadow: 0 1px 0 #808080 ; 
transform: translateY(6px); 
-webkit-transform: translateY(6px); 
} 
/*−−−カーソルを外したときに元に戻す−−−*/ 
.btn{ transition:.5s ease-in-out; 
}

ボタンの色をカスタマイズ

”Cocoon”のボタン標準色は１８種類と、大・中・小の３種類のサイズが用意されています。

CSSコードを追加して色コードを変更すると色の設定を変更できます。

”Cocoon”のデフォルトCSS

デフォルトのカラー

.btn-white{
  color: #333;
  background-color: #fff;
}
#container .btn-white:hover{color: #333;}
/*色の変更はここから下をコピーして子テーマにCSSに貼り付ける*/
.btn-red{background-color: #e60033;} /*レッド*/
.btn-pink{background-color: #e95295;}/*ピンク*/
.btn-purple{background-color: #884898;}/*パープル*/
.btn-deep{background-color: #55295b;}/*ディープパープル*/
.btn-indigo{background-color: #1e50a2;}/*インディゴ（紺色）*/
.btn-blue{background-color: #0095d9;}/*ブルー*/
.btn-light-blue{background-color: #2ca9e1;}/*ライトブルー*/
.btn-cyan{background-color: #00a3af;}/*シアン*/
.btn-teal{background-color: #007b43;}/*ティール（緑色がかった青）*/
.btn-green{background-color: #3eb370;}/*グリーン*/
.btn-light-green{background-color: #8bc34a;}/*ライトグリーン*/
.btn-lime{ background-color: #c3d825;}/*ライム*/
.btn-yellow{ background-color: #ffd900;}/*イエロー*/
.btn-amber{background-color: #ffc107;}/*アンバー（琥珀色）*/
.btn-orange{background-color: #f39800;}/*オレンジ*/
.btn-deep-orange{background-color: #ea5506;}/*ディープオレンジ*/
.btn-brown{background-color: #954e2a;}/*ブラウン*/
.btn-grey{background-color: #949495;}/*グレー*/ 

CSSコードは”Cocoon”子テーマの「style.css」に貼ってください。

色コード（＃****の部分）を変更すると「ボタン」の色が変わります。

サイズと形状のカスタマイズ

デフォルトのサイズと形状（大・中・小の３種類）

/*ボタンサイズと形状*/
.btn{/*ボタン（小と全体）*/
  color: #fff;
  background-color: #32373c;
  font-weight: bold;
  border-radius: 4px;/*角を丸める*/
  display: inline-block;
  cursor: pointer;
  line-height: normal;
  padding: 7px 13px;/*上下の余白・左右の余白*/
  text-decoration: none;
  text-align: center;
  font-size: 14px;/*文字の大きさ*/
  border: 2px solid transparent;
  position: relative;
}
.btn-m{/*ボタン（中）*/
  padding: 14px 45px;/*上下の余白・左右の余白*/
  font-size: 16px;/*文字の大きさ*/
}
.btn-l{
  padding: 14px 20px;/*上下の余白・左右の余白*/
  font-size: 18px;/*文字の大きさ*/
  margin: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

サイズと形状をカスタマイズするには、コードを変更してみて下さい。