ブログハック

WordPressで使える光るボタンの縦幅や横幅の変え方

こんにちは♡

投資OLゆうき(@ol_yuuki)です。

 

Word Pressでよく見かける光るボタン。

こんなの↓

光るボタン

 

私も光るボタンが使いたいのに、どれもボタンの幅が長すぎる!縦幅が短すぎる!

ということで、リスブロさんが公開してくださっているコードを使って、光るボタン自分用に改修しました!

 

光るボタンはAFFINGERに搭載されているボタンみたいですね。

JINにも搭載されていますが、ひつじさんの意向からかやや控えめな光具合。


JINの光るボタンはこんな感じ↓

 

もっとキラリと光らせたい!

でもって大きさや色も自由に変えたい!

と言うことで、JINでもAFFINGERのようなボタンをサイズ変更して使えるように、CSSを編集してみました。

CCSと聞くと難しそうに感じますが、基本はコピペでOKなので初心者さんでもできますよー!

光るボタンの高さや横幅を変える

「光るボタン WordPress」なんかで検索すると、光るボタン自体のコードはすぐに見つかります。

でもね…どれも横幅がめちゃ長いんですよ。

でもって、高さも1行分。

もっと横幅は短く、高さは高くしたいのに!

やり方がワカラナイ!!というあなたへ。

 

この記事で紹介しているコードを使うと、こんなボタンが作れます。

 

↓こちらのコードをコピペでご利用ください。

CSSに追加▼

 

WordPress記事編集画面のテキストエディタ(HTMLモード)に追加▼

こっちのコードは、ボタンを挿入したい部分にコピペする。

 

CSSへコピペするコードで、幅や色を変更できます。

background-color: #144082; /* ボタン背景色 */
→「#xxxxxx」部分の変更でボタンの色を変える

 

color: #fff; /* ボタン文字色 */
→「#xxxxxx」部分の変更でボタンの文字色を変える

 

box-shadow: 0 3px 0 0 #091556; /* ボタン影色 */
→「#xxxxxx」部分の変更で、ボタンの影の色を変える

 

max-width: 60%; /* ボタン横幅 */
→「○%」の変更で、ボタンの横幅を変える。

 

line-height: 3; /* ボタン縦幅 */
→数字部分の変更で、ボタンの縦幅を変える

 

カラ―コードは、こちらのサイトが便利です。

color-sample.com

ABOUT ME
投資OLゆうき
投資OLゆうき
初心者OLさん向けの投資信託のはじめ方&投資信託からのステップアップ方法│ OLさん向けのお金の有料オンラインサロン運営│普段はアラサー事務職OL