ここあです。
WordPressテーマにはそれぞれ
「テーマ独自のボタン」が実装されています。
しかし、サイトデザインによっては
テーマ独自に実装されているボタンだけでは
イメージと合わない場合も出てきます。
実際に私もトップページではこのように
テーマ独自のボタンを使わず、「HTMLとCSSだけで」
自分のサイトデザインに合わせた
オリジナルボタンを作って実装しています。
ということで、今回はCSSとHTMLだけで
オリジナルボタンを実装する方法について
解説させていただきますので
テーマ独自のボタンを使わず
「オリジナルのボタンを実装したいあなた」は
ぜひ参考にしてくださいね。
オリジナルボタンを実装する方法
オリジナルボタンを実装するといっても
あなたは「たった2ステップだけ」で実装ができます。
なぜなら、
- HTMLとCSSコードをコピペする
- あなたのサイトに合わせてCSSコードを調整する
これだけの作業で済むからです。
ですから、初心者のあなたでも簡単に
オリジナルボタンが設置できますので
ぜひ挑戦してみてください＾＾
オリジナルボタンのHTMLコード
今回私がご用意するオリジナルボタンは
以下のような
シンプルでどんなサイトにも使いやすいデザインのボタンです。
ということで、こんなシンプルボタンを実装したいあなたは
「投稿ページ」もしくは「固定ページ」のいずれかに
テキスト編集モードにした上で、以下のコードを貼り付けてください。
※「”」はお手数ですが、4箇所とも「半角”」に打ち替えてください＾＾；
こんな感じに…
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コードをコピペすると…
先ほどのHTMLコードで書いたボタンがこのように
ボタンの形に変わります。
ここまで出来ればもうオリジナルボタンはできたも同然！＾＾
オリジナルボタンをカスタマイズする方法
続いて、オリジナルボタンのカスタマイズ方法です。
ボタンのリンク先を設定する
私が今回お伝えしているボタンのHTMLコードは
リンク先を「#」に変更しています。
ですから、ボタンのリンク先を設定したい場合は…
↓
このように#の部分にリンク先のURLを入力してください。
ボタンの色を変更する
ボタンの色も当然変更したいですよね＾＾
まずは罫線の太さから。
罫線の太さを変更したい場合は、以下のCSSコード
1pxの数字を2pxとか、3pxなどにしてみてください。
そうすれば、このように
罫線を太くすることができます。
また、カラーコードを
このように打ち変えれば、
罫線の色を変えることができます。
逆に、罫線で囲んだボタンではなく、このように
ベタッとした色のボタンにしたい場合は…
罫線を表示させていたコードを削除し、
新たに背景色を表示させるコードを追記します。
※border:〜を削除して、background〜を新たに記述。
そうすれば、上記のような、背景色の入ったボタンへと
変更することができます。
なお、文字色に関しては文字の色を表す
というCSSコードがありますので
背景色が濃すぎて文字色が見えないという場合は
などに変更し、文字が読めるようにしてください。
ちなみに「#fff」は白を表すコードです。
ボタンのホバー色を変更する
ボタンのホバー色というのは
ボタンの上にマウスを乗せた時、ボタンの色が変わりますよね？
それが「ホバー色」です。
例えば、私のサンプルボタンなら
ホバー色は「薄いブルー」です。
ホバー色を変える場合も、先のボタンカラーと
その方法は全く同じです。
ただ、違うのは…
CSSコードに「：hover」があるか無いかだけ。
つまり、CSS内に「：hover」と表示されている部分がホバー色になります。
ですから、今回、あなたにお伝えしているCSSコードで言うと、以下
background: #D9E5FF;
color: #fff;
}
こちらのコードが、ボタンのホバー色になります。
つまり、ボタンのホバー色、
背景の「薄いブルー」を変更するなら「background: #D9E5FF;」を
「文字の色」を変更するなら「color: #fff;」のカラーコードを
それぞれ変更すれば、ボタンのホバー色が変更できます。
さらに、ホバー色も背景無しの、
罫線だけのボタンにしたいのであれば、先とは逆で
background〜削除して、border:〜を新たに記述すれば
背景色なしのホバー色に変更できます。
ということで、あなたのお好みに合わせ
色々と調整してみてくださいね＾＾
ボタンの角を丸くする
シンプルなボタンは嬉しいんだけど、
「もう少し可愛くしたい！」そう思う方もおそらくいるはず。
ということで、ボタンの角を丸くする方法も
ご説明しておきますね。
ボタンに限らず、オブジェクトの角を丸くしたい時は
「border-radius]というコードを使用します。
したがって、ボタンの角を丸くしたい場合は
今、あなたが追記しているCSSコードに
と、このような新たにコードを追記することで
このようにボタンの角を丸くすることができます。
また、さらに数値を上げることで、ボタンの角がどんどん丸くなりますので
コードの数値を20まで上げるとボタンの形は
このようになります＾＾
さらに線を太くして、文字も罫線もピンクにすれれば
あら、可愛い（笑）
ということで、ボタンの丸みも自由に調整してくださいね。
CSSとHTMLだけでオリジナルボタンを実装する方法まとめ
今回は、CSSとHTMLだけで
オリジナルボタンを実装する方法について
簡単に解説させていただきました。
知識が何も無い初心者の方が「HTMLやCSS」と聞くと、
少し難しい印象を受けるかもしれませんが
こうして少しずつでも、コードの意味が分かってくると
自分でもすごくカスタマイズがしやすくなります。
そもそも私がなぜ「コピペだけ」でできるカスタマイズ方法を
あなたにお伝えしているかと言うと…
少しでも多くの方にカスタマイズに興味を持ってもらい
自分だけのオリジナルサイトを作りながら
自分の世界観を大事にしてほしいと思うからです。
実際、日本のワードプレステーマは無料、有料ありますが
海外ほどテーマ数やバリエーションはなく、どうしても
サイトの「オリジナリティ」に欠けてしまいます。
だからこそ、私は少しでも多くの方が
みんなと同じようなテーマを使いながらもデザインをアレンジして
個性豊かなサイトにいただけたらと
そう考えてカスタマイズ方法をお伝えしています。
また、デザインはただすれば良いと言うものではなく
きちんと理由を考えてデザインしないと
本来反響が取れるものも、デザインによって
逆に反響が取れなくなるリスクすらあります。
そう言う意味では、デザインに少しでも興味のあるあなたは
デザインの本質とは何なのか？
ぜひ併せて学んでいただけると嬉しいです＾＾
と言うことで、最後までお読みいただき
ありがとうございました！
