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

ブログでかっこいいボタンを作る方法ブログ
てつこ
てつこ

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

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

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

 

こんにちは!

てつごろう(@Te256g)です。

 

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

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

 

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

 

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

BUTTON

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

BUTTON

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

 

この記事の対象者

WordPressでブログを運営している初心者の方向けの記事です。

 

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

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

 

※CSSとは?

Cascading Style Sheetsの略。Webサイトの見た目を整えるためのファイルで、スタイルシートとも呼びます。
Webサイトは一般的にHTML、CSS、JavaScriptなどの何種類かのファイルから構成されており、HTMLは文章の構造(見出し、文字、画像など)の定義をするのに対し、CSSはデザインや見た目(スタイル)を定義するためのファイルです。

 

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

ボタンのデザインを変更

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

 

デザインとCSSのコードについて

ボタンのデザインとCSSのコードについては「サルワカさんの記事」を参考にさせていただきます。

 

ボタンデザインの流れ

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

 

ボタンデザインの流れ

  1. 好きなデザインを選ぶ
  2. ボタンのコードを投稿に記述する
  3. スタイルを当てる

 

てつごろう
てつごろう

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

 

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

ボタンのデザイン

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

 

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

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

 

ボタンを選ぶときの注意

ボタンは「クリックできることがわかる」デザインを選ぶか、「ここをクリック」などの文字を入れるようにしましょう。

デザインを追求するがあまり、ボタンと認識されないデザインにしてしまって、読者がクリックしなければボタンの意味がありません。

 

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

ボタンデザイン

 

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

ボタンのコード

 

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

HTMLコード

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

 

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

ボタンのコード

 

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

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

HTMLコードを貼る

 

Classic Editorで「ビジュアル」を使う場合

「</>」のボタン(HTML挿入)をクリックして表示される入力欄に貼り付けて「OK」をクリックします。

Classic Editorの場合

 

「テキスト」の場合

「テキスト」の場合はそのまま貼り付けましょう。

Classic Editor

 

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

下書き保存

 

3. スタイルを当てる

スタイル

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

 

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

CSSをコピー

 

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

カスタマイズ

 

(3)「追加CSS」をクリックします。

追加CSS

 

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

追加CSS

 

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

プレビュー

 

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

ボタン

 

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

 

てつごろう
てつごろう

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

もし他のデザインで不具合が起こったら

今回ご紹介したボタンのCSSは「btn-sticky」というクラス名(スタイルを定義する名前)です。
もし今回の手順によって、他のデザインに不具合が起こってしまうことがあった場合は、クラス名を変更しましょう。

変更例)

●HTMLで「btn-sticky」→「btn-fusen」に変更した場合

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

 

●CSSで「btn-sticky」→「btn-fusen」に変更した場合

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

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

 

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

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

 

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

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

 

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

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

コメント

タイトルとURLをコピーしました