ブログのボタンをかっこよくする方法【WordPress初心者向け】

てつこ

WordPressのブログで、ボタンのデザインを自分好みにしたい。

HTMLやCSSのことはよくわからない。

簡単に作る方法を教えて！

こんにちは！

てつごろう（@Te256g）です。

WordPressでブログを運営していて、使っているテーマのデザインだけでは物足りない、自分好みのデザインにカスタマイズしたい、と思うことはありませんか？

そんなときは、CSS（※）を使ってみましょう。

この記事ではCSSを使って、ブログのボタンをかっこよくする方法をご紹介します。

ボタンデザインの変更イメージ

BUTTON

例えばこういった標準的なボタンを

BUTTON

こんな風に変える方法です。

僕は元Webディレクターで、個人としてもWebサイト制作の実績があります。

WordPress初心者の方でも簡単にできるように、わかりやすく解説しますね。

CSSでブログのボタンをかっこよくデザインする方法

CSSを使ってボタンをデザインする方法をご紹介します。

ボタンデザインの流れ

今回、ご紹介するボタンデザイン作成の流れは下記の通りです。

てつごろう

10分もあれば完成する方法なんだよ。

1. 好きなデザインを選ぶ

まずはボタンのデザインを決めます。

（1）サルワカさんのサイトにアクセスして、好きなボタンデザインを選びましょう。

ここでは「少し浮き上がったふせん風」を例に、デザインを当てていく手順を解説しますね。

（2）「コードを見る」をクリックします。

（3）このようにコードが表示されたら、「HTML」のコードをコピーします。

2. ボタンのコードを投稿に記述する

次はボタンを作るためのコードを投稿に記述する手順です。

（1）ブログの投稿画面で「+」マークをクリックして「フォーマット」の中の「カスタムHTML」をクリックします。

（2）入力欄に、コピーしたHTMLコードを貼り付けます。

「BUTTON」の文字は、好きな文字に変更しましょう。

（3）一旦「下書き保存」をしておいてから、「W」マークをクリックしてダッシュボードに移動します。

3. スタイルを当てる

最後はスタイルを当てていく作業です。

（1）「サルワカ」のページで、今度は「CSS」のコードをコピーします。

（2）WordPressのダッシュボードから「外観」→「カスタマイズ」をクリックします。

（3）「追加CSS」をクリックします。

（4）コピーしたCSSのコードを貼り付け、「公開」ボタンをクリックします。
その後「×」ボタンをクリックしてダッシュボードに戻ります。

（5）投稿画面を再度開いて、「プレビュー」ボタンをクリックします。

（6）ボタンができていれば作業は完了です。

あとは公開するだけです！

てつごろう

デザインを変えたい場合は手順1からやり直してみてください！

<a href="#" class="btn-fusen">BUTTON</a>

.btn-fusen { 
　（中身は変更しなくてOK）
}

.btn-fusen:active {
　（中身は変更しなくてOK）
}

まとめ｜ブログのボタンをCSSで好みのデザインに

今回はWordPress初心者の方向けに、ブログのボタンのデザインをお好みのデザインにする方法をご紹介しました。

CSSでボタンを作る方法は、今回参考にさせていただいた「サルワカ」さんの他にもたくさん見つかると思います。

「CSS ボタン デザイン」などで検索してみてください。

このようにCSSを使うと、テーマの中で用意されているデザインだけでなく、幅広いデザインを作ることができます。

興味のある方はいろんなサイトのデザインを参考に試してみてくださいね。