【STORK(ストーク)】コピペOK!お手軽簡単にリンクボタンの色を変える方法

どうも、あらやんです。

STORK(ストーク)の魅力の一つにショートコードの存在がありますよね!(この文章、ショートコード系の記事書く時に毎回書いてる気がするけど気にしないでおこうっと…)

使用頻度が高いものの一つに

「リンクボタン」

があると思います。ちなみにリンクボタンってこういうやつです↓

リンクボタン一つとっても色んな種類があります。使ったことない方は下記リンクから公式サイトのショートコード紹介ページに飛べるのでチェックしてみて下さい。

ショートコードの使い方「ボタン編」(公式サイト)

はい、ここからが本題です。上記リンクの内容を見てもらえれば分かるんですけど、このリンクボタンの色って選べないか、もしくはボタンの種類によっては選べるものの数色しかないんです。これだとブログのテーマカラーと合う色が無い場合もあると思うんですよ。

「赤が…無いだとっ!!」(いや、赤はあります)

ということにもなりかねない。じゃぁないなら作っちゃおうという訳で、今回はリンクボタンの色を変える方法を説明します。CSSとかちょっといじくりますけど、コピペ一発でOKなんでお手軽簡単です。さぁ、早速行きましょう!

 

その1:デフォルトのリンクボタンの場合

先ほども説明した通り、リンクボタンは種類がいくつかあるんですよ。まずは「デフォルトのリンクボタン」の場合から説明していきます。ちなみにデフォルトのリンクボタンってこれのことです↓

やり方は、まずはダッシュボード画面左の「外観」→「カスタマイズ」→「追加CSS」と進んでいきましょう。

そうするとこんな画面が出てきます。今後「CSSをコピペ」と書かれていたらこの画面の空白の行にコピペするんだなと思ってくださいね。これはデフォルトのリンクボタン以外でも同様なので覚えておいてください。

それでは早速以下のCSSをコピペして下さい。

.btn-wrap.org1-btn a {
background: 背景色;
border-color: 枠線の色;
color: 文字色;
}
.btn-wrap.original-btn a:hover {
background: マウスを乗せたときの背景色;
border-color: マウスを乗せたときの枠線の色;
color: マウスを乗せたときの文字色;
}

ここで6箇所色を指定する部分が出てきましたが、色は#から始まる7桁の英数字で指定します。好みの色のカラーコードを調べるにはこちらのサイトが便利です。

カラーピッカー

CSSのコピペが終わったら、実際に記事を書く時にショートコードを使います。

[btn class="org1-btn"]ここにリンク文字[/btn]

 

[btn class="org1-btn big"] ここにリンク文字(ビッグ)[/btn]

実際にやってみるとこんな感じになります↓

背景色と枠線の色を同じにするとデフォルトボタンっぽくなりますね。

 

その2:シンプルボタンの場合

シンプルボタンとはこれのことです↓

シンプルボタンの色を変える場合はまず以下のCSSをコピペして下さい。

.btn-wrap.org1-simplebtn a {
border: 1px solid 枠線の色;
background: none;
color: 文字色;
}
.btn-wrap.simple-original a:hover {
border-color: マウスを乗せたときの背景色;
background: マウスを乗せたときの枠線の色;
color: マウスを乗せたときの文字色;
}

CSSのコピペが終わったら、実際に記事を書く時にショートコードを使います。

[btn class="org1-simplebtn"]ここにリンク文字[/btn]

そうすると…

こんな感じになりましたね!

 

その3:リッチボタンの場合

リッチボタンはマウスをのせた時にボタンを押しているように見えるタイプのリンクボタンです。

このタイプはもともと簡単に色が変えられるタイプのボタンで、黄色・ピンク・緑・オレンジ・青ならCSSをいじらなくても変えることが出来ます。「”rich_yellow”」と書かれている部分のyellowの部分をそれぞれpink・green・orange・blueに変えてやれば指定した色に変えることが出来ます。

もしもこの5色で気に入るものが無ければ以下のCSSをコピペしてください。ちょっと長いです。

.btn-wrap.org1-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.org1-richbtn a:hover {
background: マウスを乗せたときの背景色;
color: マウスを乗せたときの文字色;
box-shadow: 0 1px 0 マウスを乗せたときの影の色;
}

ちょっとゴチャッとしてますが大丈夫でしょうか。これもショートコードを使うことで表示させることが出来ます。

[btn class="org1-richbtn"]ここにリンク文字[/btn]

 

[btn class="org1-richbtn big"] ここにリンク文字(ビッグ)[/btn]

ちなみにやってみるとこんな感じですね。

さて、以上でお手軽簡単にリンクボタンの色を変える方法の説明お終いです。コピペで簡単にできるので、ぜひリンクボタンの色にこだわりをお持ちの方は活用してみてくださいね!

 

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ


無料会員制のメールコミュニティへご招待しています

無料で参加できるメールコミュニティ、その名も「ニコニコスマイルコミュニティ」にご招待しています。

このコミュニティではブログでお伝えしきれなかった内容やコミュニティ参加者限定のコンテンツをプレゼントしています。ネットビジネスでお金を稼ぐ力を身に付け、自由なライフスタイルを実現して大切な人とニコニコ笑顔で暮らしていけるような人生を創造していきたいのなら、あなたも無料のコミュニティに参加して仲間になりませんか?