ブログ集客 無料会員サイト

ワードプレスでオリジナルのボタンを生成する方法

ワードプレスに、オリジナルのボタンを設置したい方へ。

追加CSSと、HTMLコードで、オリジナルのボタンが作成可能です。

基本ボタンの作成方法

まずは、基本的なCSSコードを、追加CSSに追加していただくのがおすすめです。

不要な箇所は削除していただいて、オリジナルのボタンを作成するようにしてください。

.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}

 


追加CSSを使ったボタンの生成手順について

それでは、追加CSSを使ったボタンの生成方法について解説させていただきます。

スタンダードなボタンとして、角丸のボタンを生成する手順について解説させていただきますね。

「角丸」ボタンの生成について

以下の様な、角が丸くなっているボタンを角丸ボタンと言います。

それでは、順番を解説させていただきます。

①.ワードプレス管理画面メニュー【外観】→【カスタマイズ】をクリックします。

②.左側メニュー【追加CSS】をクリックします。

③.以下、角丸の作成コードをコピーします。

黄色枠の中のソースコードをコピーします。一つの記号が無いだけで、生成に不具合が生じますのでコピーミスが無いようにしてくださいね。

.btn–blue,
a.btn–blue {
color: #fff;
background-color: #0091C5;
}
.btn–blue:hover,
a.btn–blue:hover {
color:#fff;
background: #8ED1E0;
}

 

④.追加CSSにコピーしたコードを貼り付けます。

 

⑤.ボタンの色を変更します。

色見本の参考サイト:https://www.color-sample.com/

⑥.公開をクリックします。

 

⑦.HTMLコードをコピーします。

<a href=”” class=”btn btn–blue”>クリック</a>

 

⑧.ボタンを設置したいページを開きテキストエディターでコピーしたコードを貼り付けをします。

 

 

⑨表示されたかどうかを確認します。

↓生成されたボタンです

クリック

以上で完了です。

「長丸」デザイン

■CSSコード

.btn-blue,
a.btn-blue {
color: #fff;
background-color: #0091C5;
}
.btn-blue:hover,
a.btn-blue:hover {
color: #fff;
background: #8ED1E0;
}

a.btn-radius {
border-radius: 100vh;
}

 

■HTMLコード

<a class=”btn btn–blue btn–radius”>クリック</a>

 

↓生成されたボタンです

クリック

 

最後に

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

CSSと、HTMLコードで簡単にオリジナルのボタンを生成できました。

色を変えたり、グラデーションを付けることもできますので、お好きなデザインに仕上げてみてくださいね。

関連記事

ボタンの背景色や、文字の色をCSSで設定するときに、HTMLのカラーコードを検索するときには、おすすめHTMLのカラーコードサイトまとめ が参考になると思います。

おすすめサイト、よろしければご覧ください。