簡単すぎ！CSSでボタンを作って記事内に配置する方法

ブログを作成していると、ボタンを作成して貼り付けておきたいと思うことがあります。

まぁ、フリー素材のページから素材をダウンロードして、文字を重ねて…ってボタンを作成してもいいのですが、結構な手間です。

そこで、今回は

CSSを使ったボタンの作成から、記事内に設置するところまでの流れを解説

します。

OLちゃん

CSSなんて聞いたら難しいそう！

マスオ

そんな人のために、ほとんどコピペで済むように話を進めるね。
心配は要らないと思うよ。それに綺麗に仕上がるしね。

この記事を読むとこれができる！

CSSの知識が全くなくても、動きのあるボタンを作成することができる。
Blogの記事内に動きのあるボタンをセンタリングで配置できる。
センタリングで配置するということは、レスポンシブ対応になる！

と、いうことで早速この様なボタンを作成して、記事内に配置していきましょう。

ボタンは簡単に作れる

（見本のボタンでリンクは貼っていません。）

動画でもCSSボタンを配置するまでの流れを解説しています
CSSボタンのスタイルは、自由にオンライン上で作成！
CSSのボタンが作成できたら、記事本文に貼り付けて行こう！
ボタンそのものをセンタリングしておけばレスポンシブ対応に！
- CSSボタンをセンタリングする方法　まずはコピペ
CSSのボタンが配置できたら最後にリンクを貼って作業完了！
CSSでボタンを作ってセンタリングする方法　まとめ

動画でもCSSボタンを配置するまでの流れを解説しています

CSSボタンのスタイルは、自由にオンライン上で作成！

上の様なボタンなら、オンライン上で直感的に作成することができます。

CSSやHTMLがよく分からなくても全く問題ありません。

ボタン作成デザインジェネレーターっていうオンラインのサービスを使います。

登録などの作業も一切必要ありませんから即作成に入れます。

読むが面倒だ！って方は下に動画があるので、そちらをご覧ください。

ボタンを作るサイトにいく！

（このボタンは本当にリンクが貼ってあります）

およそ設定する項目の使い方はわかると思いますが、初めての方はhoverが難しそうに見えるかもしれません。

hoverとは？
ユーザーがポインターを動かしてボタンの上に来た時の状態。通常の状態とhoverの状態が異なるように設定すれば、上のボタンのようにアニメーション的な演出をすることができる。

気軽にいろいろ触ってみると面白いです。

画面の下の方には、プレビューも表示されていますから、イメージしやすいです。

CSSのボタンが作成できたら、記事本文に貼り付けて行こう！

ボタンの形や色を設定している間に、自動に上のようなCSSを作ってくれていたのです。

左側のHTMLはWordPressの編集画面でHTMLモードにして、貼り付けるだけです。

次に右のCSSは、テーマがCocoonであれば、記事の編集画面の下にCSSを書き込む部分がありますから、そこにコピペします。

これで、記事内にボタンを配置することができました。

初めは難しく感じるかもしれませんが、慣れると５分もあればボタンの設置はできるようになります。

ボタンを作るサイトに行く

こんな感じでボタンが設置できるのですが、ボタンが画面の左によっている！ってこともあります。

しかも、スマホで見たら、えらい格好悪いことに！

っということで、実は上のボタンは、CSSに

簡単な１行を追記
パラメーターを１箇所変更

して問題を解決しています。

ボタンそのものをセンタリングしておけばレスポンシブ対応に！

文字をセンタリングさせる時と同じ方法で処理してもセンタリングできません！

かと言って、複雑な処理をする必要もありません。

コピペとCSSを少し触るだけでOKです。（３分もかかりません）

CSSボタンをセンタリングする方法　まずはコピペ

[css]
margin: 0 auto;
[/css]

これをコピーして、下の写真の様に追記します。

さらに、width:○○pxとなっている部分を１ヶ所width:○○％に変更します。

一瞬で完了したはずです。

ここでは、幅が80％になるようにしましたが、横幅は適宜数値を入れて、調整をしてください。あまりにも小さい数字にするとスマホで見た時に見にくくなります。

に変更します。

最終、こんな感じになります。

[css]

.btn01{
margin: 0 auto;
width:80%;
height:60px;
line-height:60px;
}
.btn01 a{
display:block;
width:100%;
height:100%;
text-decoration: none;
background:#0099FF;
text-align:center;
border:1px solid #FFFFFF;
color:#FFFFFF;
font-size:20px;
font-weight:bold;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
box-shadow:5px 5px 0px 0px #DEDEDE ;
transition: all 0.6s ease;
}
.btn01 a:hover{
background:#FFFFFF;
color:#0099FF;
margin-left:5px;
margin-top:5px;
border:3px solid #0099FF;
box-shadow:none;
}

 [/css]