WPテーマ「STORK」カスタマイズ！リンクボタンの色だけを変える方法！

ここあです。

私はこのサイトのテーマ

「STORK」のカスタマイズ記事を

結構いろいろと書いているのですが…

【STORK】カスタマイズ！コピペだけでオシャレにする方法まとめ

正直、もう記事にするようなカスタマイズはないかな？と

思っていました＾＾

しかし、最近は

知り合いのサイトデザインをサポートする機会が多く、

そうやっていろんなサイトをカスタマイズしていると

ふとしたことから…

「ここカスタマイズしたい！」

という部分が出てきたんですね。

そういう意味では、

まだ自分が気付いていないだけで他にも探せばあるもんだなと

改めて思った今日このことです（笑）

で、そのカスタマイズとは一体何か？

STORKユーザーにはショートコードでお馴染み

リンクボタンのカスタマイズです。

通常、上記リンクボタンのカラー設定は

外観 → カスタマイズ → サイトカラー設定から

変更することができますが…

↓ここのリンク部分ですね。

ここのサイトカラー設定からリンク色を変更すると

リンクテキストとも連動しているため

テキストの色まで変わってしまいます＾＾；

なので、それほどリンクテキストやリンクボタンの色に

こだわらない場合はいいのですが

それでもやはりリンクテキストの色は変えずに

リンクボタンの色だけをサイトイメージに合わせたいと

思うことはあると思うんですね…。

まぁ、「ない！」と思う方はこのまま閉じるのボタンを

クリックしてもらって構いませんが…（笑）

もしも「いや、確かにある！」と思ったあなたは、

ぜひこのまま読んでいただけたらと思います。

かなりマニアックなカスタマイズではありますが

そんな悩みをもったこだわり屋さんも

きっと世界に１人ぐらいはいるはずです…＾＾
※私はその一人（笑）

ということで、今回は…

リンクテキストの色は変えず

リンクボタンの色だけを変える方法をご紹介したいと思います。

STORKをカスタマイズする時の注意点

私のサイトをいつも訪問してくれている

ここあファンの方はもうすでにお分かりだと思いますが

念のためSTORKをカスタマイズする時の注意点を

最初に書いておきますね…＾＾

STORKをカスタマイズする時は必ずバックアップを取りましょう。

万が一何かあっても私は保証できませんよ…＾＾；

また、STORKのカスタマイズは基本的に

全て「子テーマ」で行ってください。

そして、この記事で紹介するCSSコードは…

ダッシュボードメニューから

外観 → カスタマイズをクリック

以下、「追加CSS」の部分に

この記事で紹介するCSSコードを記述してください。

なぜ私がいつも追加CSSに書くのを

勧めるかというと…

ライブビューで直接カスタマイズ部分を

確認しながら作業できるので

すごく分かりやすいからなんですね。

なので、私はいつもCSSコードを

「こっちに書いてね」とおすすめしています＾＾

ということで…

カスタマイズ方法をご紹介していきますね。

STORKのリンクボタンをカスタマイズする方法

今回はシンプルにSTORKのリンクボタン

「シンプルビッグ」のカスタマイズ方法だけを解説致します。

というのも、STORKには他にも

リンクボタンはあるのですがある意味

これ１つだけカスタマイズできれば

他のリンクボタンを使わずとも十分応用が効くので

「シンプルビッグ」ボタンのカスタマイズ方法だけを

とりあえずマスターしましょう＾＾

STORKのリンクボタンを色だけ変える方法

STORKのリンクボタン「シンプルビッグ」の

色だけを変えたい時は以下のCSSをコピペしてください。

CSSコード

.btn-wrap.simple a {
border: 1px solid #555;
color: #555;
}
.btn-wrap.simple a:hover {
background: #555;
color:#fff;
border: 1px solid #555;
}

そうすると、リンクテキストの色は変えず

リンクボタンの色だけをカスタマイズできます。

簡単にコードの説明をしておくと

を変えることができます。

なので、思い切ってCSSをこうすれば…

リンクボタンはこのようになります。

これだけでもだいぶ雰囲気変わりますよね…＾＾

また、もう１つコードはリンクボタンに

マウスを乗せた時のコードになります。

こちらのコードは…

をそれぞれ表すコードなので

あなたのお好みで、色や太さなどを変えてみてくださいね。

リンクボタンの角を丸くする方法

通常、STORKのリンクボタンは

長方形で角も尖っています。

しかし、CSSコードを追加することで

リンクボタンの角を丸くし

このように少し可愛くすることもできます＾＾

CSSコードはこちら

CSSコード

.btn-wrap.simple a {
border: 3px solid #e382a2;
color: #e382a2;
border-radius:12px;
}
.btn-wrap.simple a:hover {
background: #555;
color:#fff;
border: 1px solid #555;
}

先ほどのコードとの違いは

border-radius:12px;この1行だけです。

この１行を追加することで

ボタンの角を丸くすることができます。

つまり、border-radius:12px;の12pxの

数字を変えることでボタンの丸みを調整できます。

リンクボタンの色を逆転させる方法

先にリンクボタンの色を変える方法を

ご紹介しましたが、それを応用することで

「シンプルビッグ」のボタンで同じ

目立つボタンに変えることが可能です。

例えば以下のCSSコードを追加すると

CSSコード

.btn-wrap.simple a {
border: 1px solid #e382a2;
background: #e382a2;
color: #fff;
}
.btn-wrap.simple a:hover {
background: #e382a2;
color:#fff;
border: 1px solid #e382a2;
}

このように

「大きい目立つボタン」と同じ仕様に変えることができます。

上記、ボタンをカスタマイズする場合は

#e382a2のカラーコードを全てあなたの設定したい

カラーコードに変更してくださいね。

さらに「大きい目立つボタン」はマウスを乗せても

ボタンが動くだけで特に大きな変化はありませんが

こちらのCSSを追加すると

CSSコード

.btn-wrap.simple a {
border: 1px solid #e382a2;
background: #e382a2;
color: #fff;
}
.btn-wrap.simple a:hover {
background: #fff;
color:#e382a2;
border: 1px solid #e382a2;
}

シンプルボタンを逆にしたような

マウスを乗せた時にボタンが白くなる

ボタンにもすることができます。

こちらのボタンもあなたのお好みに合わせて

#e382a2のカラーコードを変更してください。

リンクボタンの幅を調整する方法

STORKのシンプルボタンには

スモールサイズの「シンプルボタン」と

ビッグサイズの「シンプルビッグ」の

２種類ありますよね。

とは言え、例え「シンプルビッグ」のボタンであっても

CSSでサイズ調整することで、スモールサイズの

「シンプルボタン」にすることができます。

CSSコードはこちら

CSSコード

.btn-wrap.simple a {
border: 1px solid #e382a2;
background: #fff;
color: #e382a2;
max-width:25%;
}
.btn-wrap.simple a:hover {
background: #e382a2;
color:#fff;
border: 1px solid #e382a2;
}

上記コードではmax-width:25%;という指定コードで

「シンプルボタン」とほぼボタンの大きさが揃う

指定コードを入れてますが

個別にボタンサイズの調整が

できるものではありませんので

正直、ボタンのサイズ調整は

あまりオススメしません＾＾；

なので、微妙にサイズ調整したいという場合を除き

あくまでも参考程度に考えてもらえると嬉しいです。

ちなみにmax-width:25%;のコードは

50%以上指定しても左右は大きくならないし

25%以下にすると、シンプルボタンのサイズまで

小さくなるので、非常にリスクが大きいです＾＾；

「そんなコード紹介するな！」って感じですが…（笑）

なので、一応紹介したというだけです。

「サイズも変えることはできるんだよ…」と

それだけ伝えたかっただけです＾＾

STORKのリンクボタンは色だけ変えよう！

いかがでしたでしょうか？

簡単にではありますがSTORKの

「リンクボタン」の色だけを変える方法を

中心にご紹介致しました。

サイズ調整の方法も一応記載はしましたが

基本的にリスクの大きいことは

私も紹介記事としてはあまり書きたくないので

正直なところ、サイズ調整だけに関して言えば

「良い子は真似しないでね！」という感じです（笑）

なので、STORKの「リンクボタン」を

カスタマイズするなら色だけに

留めてくださいね…＾＾；

もちろん、カスタマイズすること自体は

私も全然賛成ですし、サイトの差別化のために

どんどんしてもらえたらとは思いますが

ただ自分で何も勉強せずに

コピペだけしておかしくなったから

「調整方法教えてください」というのは

私は違うと思っているし

ムシが良すぎると思っています。

私は実際、検証しながら時間をかけて

コードを作ってますし

どこか別のサイトから適当にコピーして

記事を書き直しているというわけでもありません。

なので、カスタマイズをするのであれば

必要最低限の知識を入れて、検証をしながら

実践して欲しいと思いますし

仮にカスタマイズで行き詰まったとしても

それなりに調べる努力はして欲しいのです。

何事も努力や苦労がなければ成長しないから。

私がなぜ、こうした

コピペだけでカスタマイズできる記事を

書いているのかというと

ワードプレス初心者の方にも

カスタマイズの楽しさを知って欲しいし

カスタマイズするきっかけを

作りたいと思ってるからです。

なので、別に

楽してカスタマイズして欲しいなんて

微塵にも思ってないし

むしろ私は「自分だけ楽したい」と

思ってる人とは付き合いたくないんです。

私はあくまでも「自分には無理だ」と

思っても簡単に諦めずチャレンジして

「お？やったら意外とできるかも…」と

そんな向上心のある人たちに貢献したいと

思っています。

なので、私のカスタマイズ記事に関して言えば

そういう部分だけは絶対に履き違えて

欲しくないと思っているし

逆に「ここあさんのおかげで無事

カスタマイズすることができました。」と

メッセージをもらえるとすごく嬉しいです。

実際、そんな方たちがたくさんいて

感謝のメッセージをメールで

いただくことも多いので

私はそういう人たちに向けて

「お役に立てれば嬉しい」と思い

出来るだけ分かりやすくして

記事を書いています。

なので、ぜひあなたも

単にCSSコードをコピペして終わり

にするのではなく

ほんの少しでもいいので

CSSコードの理解にも努めながら

STORKのカスタマイズを

楽しんでいただければと思います。

ということで、

最後までお読みいただきありがとうございました！