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

Blogは資産
スポンサーリンク
MathO(マスオ)

公務員になるがもっと自由に生きたい!と感じ退職。その後、金銭的などん底を味わい、お金に関する勉強をし浮上。その後、いくつかの事業・投資による複数の収入の柱を構築。
▶︎お金持ち=(収入ー支出)×運用利回りの公式が理念。
資金が少なくても、豊かになれる道を紹介します。

スポンサーリンク
スポンサーリンク

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

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

そこで、今回は

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

します。

OLちゃん
OLちゃん

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

マスオ
マスオ

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

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

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

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

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

 

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

 

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

コピペとCSSを少し触るだけでOKです。(3分もかかりません)

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

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

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

さらに、width:○○pxとなっている部分を1ヶ所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]

簡単なので、ぜひ、トライしてみてください。

 

CSSのボタンが配置できたら最後にリンクを貼って作業完了!

CSSのボタンが無事に設置できたら、編集画面のビジュアルモードはこんな感じになります。

あとは、通常のテキストリンクを作成するのと同じです。

ここに、リンク先のURLを貼り付けて作業完了です!

ビジュアルモードでは、なんじゃこりゃ?って見た目ですが、プレビューするとちゃんと表示されいるはずですから、確認してみてください。

 

CSSでボタンを作ってセンタリングする方法 まとめ

初めて挑戦される時には、難しく感じられるかもしれませんが、動画の通り、慣れて仕舞えば5分もかからず、ボタンを設置することができます。

画像を加工して、配置して、リンクを貼るよりずっと簡単ではないでしょうか。

  1. ボタンデザインジェネレーターで好きなボタンを作成する
  2. 生成されたHTMLを記事内にコピペする(HTMLモードにするのを忘れずに!)
  3. 生成されたCSSを記事下のカスタムCSSにコピペする
  4. ボタンをセンタリングしたい時には2行のCSSを追記する
  5. テキストリンクと同じ要領で、リンクの設定をする

ぜひ、格好いいボタンを作成して、Blogライフを楽しんでください。

 

地味だけど僕が3年間、資金を増やし続けている方法
スポンサーリンク
スポンサーリンク
Blogは資産
スポンサーリンク
PTR Poor To Rich

コメント