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

Blogは資産
しぶやん

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

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

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

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

そこで、今回はCSSを使ったボタンの作成から、記事内に設置するところまでの流れを解説しようと思います。

OLちゃん
OLちゃん

CSSなんて聞いたら難しいそうって思います。

しぶやん
しぶやん

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二種類のボタンを作って、それを滑らかに繋いでいるイメージだけど作成は簡単にできます。

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

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

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

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

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

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

 

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

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

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

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

っということで、実は上のボタンは、簡単な2行を追記して問題を解決しています。

 

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

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

OLちゃん
OLちゃん

じゃあ、CSSを触らないといけないの?

しぶやん
しぶやん

そうなんだけど、1行コピペで追加するだけでOKなんだ。


margin-left:auto;
margin-right:auto;

これをコピーして、

 

さらに追加した2行の下の

width:300px→width:100%

に変更します。

そうすると、こんな感じになります。

.btn01{
   margin-left:auto; 
   margin-right:auto;
  width:100%;
   height:50px;
   line-height:50px;
}
.btn01 a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#009C14;
    text-align:center;
    border:1px solid #009C14;
    color:#FFFFFF;
    font-size:18px;
    font-weight:bold;
    box-shadow:5px 5px 8px 0px #DEDEDE ;
    transition: all 0.7s ease;
}
.btn01 a:hover{
    background:#FFFFFF;
    color:#009C14;
    margin-left:5px;
    margin-top:5px;
    border:1px solid #009C14;
    box-shadow:none;
}
 

こんな感じのボタンでよければ、そのままソースをコピペして使ってください!

もちろん、ボタンの中身のテキストは変更できます。

 

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

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

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

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

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

 

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

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

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

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

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

 

スポンサーリンク
スポンサーリンク
Blogは資産
【無料】FXで自動売買しながら月に5%〜資産を増やす!

多くの自動売買ツールは、大きな利益を狙っています。その裏には、ロスカットという恐怖がつきもの…。
そんな恐怖を排除し、初心者の方でも低額からトレードできるツールを無料配布しています。
実際のトレード結果はこちらから

PTR Poor To Rich

コメント