【コピペだけ!】CSSとHTMLだけでオリジナルボタンを実装する方法!

ここあです。

 

WordPressテーマにはそれぞれ

テーマ独自のボタン」が実装されています。

 

しかし、サイトデザインによっては

テーマ独自に実装されているボタンだけでは

イメージと合わない場合も出てきます。

 

実際に私もトップページではこのように

無料メール講座の登録はこちら

 

テーマ独自のボタンを使わず、「HTMLとCSSだけで

自分のサイトデザインに合わせた

オリジナルボタンを作って実装しています。

 

ということで、今回はCSSとHTMLだけで

オリジナルボタンを実装する方法について

解説させていただきますので

 

テーマ独自のボタンを使わず

「オリジナルのボタンを実装したいあなた」は

ぜひ参考にしてくださいね。

 

オリジナルボタンを実装する方法

オリジナルボタンを実装するといっても

あなたは「たった2ステップだけ」で実装ができます。

 

なぜなら、

  1. HTMLとCSSコードをコピペする
  2. あなたのサイトに合わせてCSSコードを調整する

これだけの作業で済むからです。

 

ですから、初心者のあなたでも簡単に

オリジナルボタンが設置できますので

ぜひ挑戦してみてください^^

 

オリジナルボタンのHTMLコード

今回私がご用意するオリジナルボタンは

以下のような

無料メール講座の登録はこちら

 

シンプルでどんなサイトにも使いやすいデザインのボタンです。

 

ということで、こんなシンプルボタンを実装したいあなたは

「投稿ページ」もしくは「固定ページ」のいずれかに

 

テキスト編集モードにした上で、以下のコードを貼り付けてください。

<a class=”org_btn” href=”#”>ボタン名</a>

※「”」はお手数ですが、4箇所とも「半角”」に打ち替えてください^^;

 

こんな感じに…

オリジナルボタンCSSコード

 

HTMLコードをコピペすると、ブログの記事には

↓このように表示されると思います。

ボタン名

 

ですが、今はこのままで大丈夫!

 

というのも、まだCSSを何も設定していないため

ボタンのデザインが反映されないからです。

 

オリジナルボタンのCSSコード

それでは続いて、ボタンのデザインをしていきましょう。

 

CSSコードはこちらです。

追加CSSにコピペ
a.org_btn {
display: block;
width: 100%;
padding: 3px 0px;
text-align: center;
text-decoration: none;
color: #5d5d5d;
border: 1px solid #ddd;
transition: .4s;
margin-top:10px;
}a.org_btn:hover {
background: #D9E5FF;
color: #fff;
}

 

ちなみにCSSコードの記述先は、

ダッシュボードメニューから外観 → カスタマイズをクリックし

さらに「追加CSS」をクリック。

 

以下の部分にCSSコードを追記しましょう。

追加CSSのスペース

 

CSSコードをコピペすると…

 

先ほどのHTMLコードで書いたボタンがこのように

ボタン名

ボタンの形に変わります。

 

ここまで出来ればもうオリジナルボタンはできたも同然!^^

 

オリジナルボタンをカスタマイズする方法

続いて、オリジナルボタンのカスタマイズ方法です。

 

ボタンのリンク先を設定する

私が今回お伝えしているボタンのHTMLコードは

リンク先を「#」に変更しています。

 

ですから、ボタンのリンク先を設定したい場合は…

<a class=”org_btn” href=”#”>ボタン名</a>

<a class=”org_btn” href=”https://〜“>ボタン名</a>

このように#の部分にリンク先のURLを入力してください。

 

ボタンの色を変更する

ボタンの色も当然変更したいですよね^^

 

まずは罫線の太さから。

罫線の太さを変更したい場合は、以下のCSSコード

border: 1px solid #ddd;

1pxの数字を2pxとか、3pxなどにしてみてください。

 

そうすれば、このように

オリジナルボタン

罫線を太くすることができます。

 

また、カラーコードを

border: 1px solid #db788c;

このように打ち変えれば、

 

オリジナルボタン

罫線の色を変えることができます。

 

逆に、罫線で囲んだボタンではなく、このように

オリジナルボタン

ベタッとした色のボタンにしたい場合は…

 

罫線を表示させていたコードを削除し、

新たに背景色を表示させるコードを追記します。

 

border: 1px solid #ddd; → background:#f2f2f2;

※border:〜を削除して、background〜を新たに記述。

 

そうすれば、上記のような、背景色の入ったボタンへと

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

 

なお、文字色に関しては文字の色を表す

color: #5d5d5d;

というCSSコードがありますので

 

背景色が濃すぎて文字色が見えないという場合は

color: #fff;

などに変更し、文字が読めるようにしてください。

ちなみに「#fff」は白を表すコードです。

 

ボタンのホバー色を変更する

ボタンのホバー色というのは

ボタンの上にマウスを乗せた時、ボタンの色が変わりますよね?

それが「ホバー色」です。

 

例えば、私のサンプルボタンなら

無料メール講座の登録はこちら

 

ホバー色は「薄いブルー」です。

 

ホバー色を変える場合も、先のボタンカラーと

その方法は全く同じです。

 

ただ、違うのは…

CSSコードに「:hover」があるか無いかだけ。

 

つまり、CSS内に「:hover」と表示されている部分がホバー色になります。

 

ですから、今回、あなたにお伝えしているCSSコードで言うと、以下

a.org_btn:hover {
background: #D9E5FF;
color: #fff;
}

こちらのコードが、ボタンのホバー色になります。

 

つまり、ボタンのホバー色、

背景の「薄いブルー」を変更するなら「background: #D9E5FF;」を

 

「文字の色」を変更するなら「color: #fff;」のカラーコードを

それぞれ変更すれば、ボタンのホバー色が変更できます。

 

さらに、ホバー色も背景無しの、

罫線だけのボタンにしたいのであれば、先とは逆で

 

background: #D9E5FF; → border: 1px solid #ddd;

background〜削除して、border:〜を新たに記述すれば

背景色なしのホバー色に変更できます。

 

ということで、あなたのお好みに合わせ

色々と調整してみてくださいね^^

 

ボタンの角を丸くする

シンプルなボタンは嬉しいんだけど、

もう少し可愛くしたい!」そう思う方もおそらくいるはず。

 

ということで、ボタンの角を丸くする方法も

ご説明しておきますね。

 

ボタンに限らず、オブジェクトの角を丸くしたい時は

「border-radius]というコードを使用します。

 

したがって、ボタンの角を丸くしたい場合は

今、あなたが追記しているCSSコードに

 

border-radius:5px;

と、このような新たにコードを追記することで

 

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

オリジナルボタン

 

また、さらに数値を上げることで、ボタンの角がどんどん丸くなりますので

border-radius:20px;

コードの数値を20まで上げるとボタンの形は

 

オリジナルボタン

このようになります^^

 

さらに線を太くして、文字も罫線もピンクにすれれば

オリジナルボタン

あら、可愛い(笑)

 

ということで、ボタンの丸みも自由に調整してくださいね。

 

CSSとHTMLだけでオリジナルボタンを実装する方法まとめ

今回は、CSSとHTMLだけで

オリジナルボタンを実装する方法について

簡単に解説させていただきました。

 

知識が何も無い初心者の方が「HTMLやCSS」と聞くと、

少し難しい印象を受けるかもしれませんが

 

こうして少しずつでも、コードの意味が分かってくると

自分でもすごくカスタマイズがしやすくなります。

 

そもそも私がなぜ「コピペだけ」でできるカスタマイズ方法を

あなたにお伝えしているかと言うと…

 

少しでも多くの方にカスタマイズに興味を持ってもらい

自分だけのオリジナルサイトを作りながら

自分の世界観を大事にしてほしいと思うからです。

 

実際、日本のワードプレステーマは無料、有料ありますが

海外ほどテーマ数やバリエーションはなく、どうしても

サイトの「オリジナリティ」に欠けてしまいます。

 

だからこそ、私は少しでも多くの方が

みんなと同じようなテーマを使いながらもデザインをアレンジして

 

個性豊かなサイトにいただけたらと

そう考えてカスタマイズ方法をお伝えしています。

 

また、デザインはただすれば良いと言うものではなく

きちんと理由を考えてデザインしないと

 

本来反響が取れるものも、デザインによって

逆に反響が取れなくなるリスクすらあります。

 

そう言う意味では、デザインに少しでも興味のあるあなたは

デザインの本質とは何なのか?

ぜひ併せて学んでいただけると嬉しいです^^

 

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

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

 

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?

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

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

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG