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

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

 

ここあです。

 

私はこのサイトのテーマ

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

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

 

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

 

正直、もう記事にするような

カスタマイズはないかな?と

思っていました^^

 

しかし、最近は知り合いのサイトデザインを

サポートする機会が多く、そうやって

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

 

ふとしたことから…

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

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

 

そういう意味では、

まだ自分が気付いていないだけで

他にも探せばあるもんだなと

 

改めて思った今日このことです(笑)

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

 

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

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

 

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

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

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

 

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

サイトカラー設定

 

 

 

 

 

 

 

 

 

 

 

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

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

テキストの色まで変わってしまいます^^;

 

なので、それほど

リンクテキストやリンクボタンの色に

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

 

それでもやはり

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

 

リンクボタンの色だけを

サイトイメージに合わせたいと

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

 

まぁ、「ない!」と思う方は

このまま閉じるのボタンを

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

 

もしも「いや、確かにある!」と

思ったあなたは、ぜひこのまま

読んでいただけたらと思います。

 

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

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

きっと世界に1人ぐらいはいるはずです…^^
※私はその一人(笑)

 

ということで、今回は…

 

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

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

ご紹介したいと思います。

 

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

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

ここあファンの方はもうすでに

お分かりだと思いますが

 

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

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

 

STORKをカスタマイズする時は

必ずバックアップを取りましょう。

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

 

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

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

 

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

 

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

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

ダッシュボードメニュー

 

 

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

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

追加CSS編集画面

 

 

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

勧めるかというと…

 

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

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

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

 

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

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

 

ということで…

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

/*リンクボタンの色を変更*/
.btn-wrap.simple a {
border: 1px solid #555;
color: #555;
}

/*リンクボタンのホバー色を変更*/
.btn-wrap.simple a:hover {
background: #555;
color:#fff;
border: 1px solid #555;
}

 

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

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

 

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

color:#fff;←文字の色

border: 1px solid #555;←囲み罫の太さ・線種・色

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

 

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

/*リンクボタンの色を変更*/
.btn-wrap.simple a {
border: 3px solid #000;
color: #c11336;
}

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

リンクボタンカスタマイズ

 

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

 

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

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

 

こちらのコードは…

/*リンクボタンのホバー色を変更*/
.btn-wrap.simple a:hover {
background: #555;←ボタン背景の色
color:#fff;←文字の色
border: 1px solid #555;←罫線の太さ・線種・色
}

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

あなたのお好みで、色や太さなどを

変えてみてくださいね。

 

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

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

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

 

しかし、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行だけです。

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

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

 

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

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

 

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

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

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

 

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

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

 

例えば以下の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を追加すると

/*リンクボタンの色を変更*/
.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のシンプルボタンには

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

 

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

2種類ありますよね。

 

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

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の

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

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

 

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

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

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

 

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

「良い子は真似しないでね!」という感じです(笑)

 

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

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

留めてくださいね…^^;

 

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

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

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

 

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

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

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

 

私は違うと思っているし

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

 

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

コードを作ってますし

 

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

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

 

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

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

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

 

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

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

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

 

私がなぜ、こうした

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

書いているのかというと

 

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

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

 

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

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

 

なので、別に

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

微塵にも思ってないし

 

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

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

 

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

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

 

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

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

思っています。

 

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

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

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

 

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

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

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

 

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

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

いただくことも多いので

 

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

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

 

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

記事を書いています。

 

なので、ぜひあなたも

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

にするのではなく

 

ほんの少しでもいいので

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

 

STORKのカスタマイズを

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

 

ということで、最後までお読みいただき

ありがとうございました!

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?