有料のWordPressテーマ「STORK（ストーク）」
にはリンクボタンが作れるショートコードが付いていて、とっても便利ですよね。
しかし、そのままでは決まった色しか使えません（デフォルトでは青・赤・黄色・ピンクのみ）。
そこで今回はSTORK(ストーク)のリンクボタンの変更するカスタマイズ方法をご紹介します！ぜひ参考にしてみてください♪
STORK(ストーク)のリンクボタンを好きな色に変更する方法
デフォルトのリンクボタン
[btn]リンクボタン[/btn]
↓
オリジナルカラーのリンクボタン
[btn class="original-btn"]リンクボタン[/btn]
[btn class="original-btn big"]リンクボタン[/btn]
[box class="blue_box"]ショートーコード
[btn class="original-btn"]ここにリンク文字[/btn]
[btn class="original-btn big"]ここにリンク文字（大きいver）[/btn]
[/box]
[box class="blue_box"]CSS
.btn-wrap.original-btn a {
background: お好きなカラーコード（背景色）;
border-color: お好きなカラーコード（枠線の色）;
color: お好きなカラーコード（文字色）;
}
.btn-wrap.original-btn a:hover {
background: お好きなカラーコード（マウスを乗せたときの背景色）;
border-color: お好きなカラーコード（マウスを乗せたときの枠線の色）;
color: お好きなカラーコード（マウスを乗せたときの文字色）;
}
[/box]
ちなみにサンプルの緑のボタンのカラーコードはこちら。
- 背景色・枠線の色：#4CAF50
- 文字色：#FFFFFF
- マウスを乗せたときの背景色・枠線の色：#388E3C
- マウスを乗せたときの文字色：#E8F5E9
STORK(ストーク)のリッチリンクボタンを好きな色に変更する方法
デフォルトの立体的なリッチリンクボタン
[btn class="rich_yellow"]リンクボタン[/btn][btn class="rich_pink"]リンクボタン[/btn]
↓
オリジナルカラーのリッチリンクボタン
[btn class="original-richbtn"]リンクボタン[/btn]
[btn class="original-richbtn big"]リンクボタン[/btn]
[box class="blue_box"]ショートーコード
[btn class="original-richbtn"]ここにリンク文字[/btn]
[btn class="original-richbtn big"]ここにリンク文字（大きいver）[/btn]
[/box]
[box class="blue_box"]CSS
.btn-wrap.original-richbtn a {
font-weight: bold;
position: relative;
background-color: お好きなカラーコード（背景色）;
color: お好きなカラーコード（文字色）;
border-radius: 0.2em;
box-shadow: 0 4px 0 お好きなカラーコード（影の色）;
border: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .09);
}
.btn-wrap.original-richbtn a:hover {
background: お好きなカラーコード（マウスを乗せたときの背景色※影の色と揃えると綺麗です）;
color: お好きなカラーコード（マウスを乗せたときの文字色）;
box-shadow: 0 1px 0 お好きなカラーコード（マウスを乗せたときの影の色）;
}
[/box]
STORK(ストーク)のシンプルリンクボタンを好きな色に変更する方法
デフォルトのシンプルリンクボタン
[btn class="simple"]リンクボタン[/btn]
↓
オリジナルカラーのシンプルリンクボタン
[btn class="simple-original"]リンクボタン[/btn]
[btn class="simple-original big"]リンクボタン[/btn]
[box class="blue_box"]ショートーコード
[btn class="original-richbtn"]ここにリンク文字[/btn]
[btn class="original-richbtn big"]ここにリンク文字（大きいver）[/btn]
[/box]
[box class="blue_box"]CSS
.btn-wrap.simple-original a {
border: 1px solid お好きなカラーコード（枠線の色）;
background: none;
color: お好きなカラーコード（文字色）;
}
.btn-wrap.simple-original a:hover {
border-color: お好きなカラーコード（マウスを乗せたときの枠線の色）;
background: お好きなカラーコード（マウスを乗せたときの背景色）;
color: お好きなカラーコード（マウスを乗せたときの文字色）;
}
[/box]
STORK(ストーク)のリンクボタンの背景色を好きな色に変更する方法
デフォルトの背景色付きリンクボタン
[btn class="bg"]リンクボタン[/btn]
↓
オリジナルカラーのリンクボタン
[btn class="bg-original"]リンクボタン[/btn]
[btn class="bg-original big"]リンクボタン[/btn]
[box class="blue_box"]ショートーコード
[btn class="original-btn"]ここにリンク文字[/btn]
[btn class="original-btn big"]ここにリンク文字（大きいver）[/btn]
[/box]
[box class="blue_box"]CSS
.btn-wrap.bg-original {
background: お好きなカラーコード（背景色）※下のコードが反映されないとき用;
background: rgba(お好きなrgb値（背景色）, .1);
padding: 1.5em 1em;
margin: 2.5em 0;
}
[/box]
RGB値は慣れないものだと思いますが、Googleでカラーコードを検索するとここにでてきます。
サンプルの背景色はこんな感じ。
- カラーコード：#F8BBD0
- RGBA値(赤い部分がRGB値)：rgba(255, 135, 176, .1)
最後に.1が付いているのは0.1という意味で、元の色が90%透過されてるイメージです。だからそのままだと薄い色になってしまうので、濃い色のRGB値を入れてあげてください。Google検索で上記の画像のように出せた人は、そこで濃い色を選択するとRGB値を取得してくれます。
もちろん今まで紹介してきたオリジナルボタンとの組み合わせも可能です。
classに追加すればOK。例えばオリジナルのリッチリンクボタンと組み合わせたい場合はこんな感じでショートコードを作ります。
[box class="blue_box"]ショートーコード
[btn class="original-richbtn bg-original"]ここにリンク文字[/btn]
[/box]
[btn class="original-richbtn bg-original"]リッチリンクボタン＋背景色[/btn]
なんとなく法則は理解できましたか？
おわりに：コピペで簡単にストークのオリジナルリンクボタンが作れる！
ボタンの色もCSSに追加するとオリジナルのものが作れます。
自分のブログテーマ色に合わせて、自然なリンクボタンを作ってみてくださいね！