今ならAmazonで一冊無料で本が読める↓

今ならAmazonで一冊無料で本が読める↓

【WordPressでボタンリンク設置】HTML&CSSを使ったボタンのつくり方(プラグインなしver.)

HTML&CSS

ホームページ・Webページ作成をしているとボタンを作りたいと思ったことありませんか。

例えば

動画を見る

 

こんな感じのボタンの様なデザインのことです。

さらにこのボタンを押したら指定したページに行くことができるようにできます。

今ならAmazonで一冊無料で本が読める↓

今ならAmazonで一冊無料で本が読める↓

このページを見てほしい人

「WordPress ボタン 作り方」とか「WordPress ボタン 作成方法」みたいなキーワードで来てくれた人が多いのではないかと思います。

今回はWordPress(ワードプレス)を使ってWebページ(ブログやサイト)を作っている人に向けてのボタン作成方法の説明となります。

もちろん、WordPressを使っていなくてもボタン作成方法の参考には出来ると思いますので、ご活用ください。

また、HTML&CSSという言語を使うのですが、特に意味を理解しなくてもコピペするだけで済むようにもなっていますのでご安心ください。

最後のほうで自分でさらにカスタマイズしてオリジナルデザインボタン作成方法も書いてありますので、見てみてください。

 

※ちなみにプラグインを使う方法もありますが、WordPressプラグインをインストールすると他のプラグインと相性悪い場合とかあったりして面倒なので、今回はプラグインを使わない方法です。

では行きます。

 

 

タグを貼り付けてボタンを作ってみる

まずはボタンを作ってみましょう。

WordPresの投稿画面でテキストエディタを選択してください。

%ef%bc%91%ef%bc%8e%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%92%e3%82%af%e3%83%aa%e3%83%83%e3%82%af

「テキスト」をクリックします。

 

 

次にコピー&ペーストで

<div style=”background: #00aaff; width: 50%; text-align: center; border-radius: 5px; box-shadow: 0 3px 3px #000; padding: 5px; margin-bottom: 10px; color: #fff; font-weight: bold; letter-spacing: 10px;”>テストです</div>

と入力します。

%ef%bc%92%ef%bc%8e%e3%82%b3%e3%83%94%e3%83%9a%e3%81%97%e3%81%9f%e3%82%89%e3%83%93%e3%82%b8%e3%83%a5%e3%82%a2%e3%83%ab%e3%82%92%e3%82%af%e3%83%aa%e3%83%83%e3%82%af

入力したら「ビジュアル」をクリックして確認してみます。

 

 

すると

%ef%bc%93%ef%bc%8e%e5%ae%8c%e6%88%90

うまくできています。これで完成です。

といった具合にとても簡単です。コピペするだけで済みます。

 

色々なボタン

それでは次に色々な種類のボタンを紹介します。お気に入りのボタンをコピペして使ってください。

ボタンの言葉を変えたい場合は「ビジュアル」、「テキスト」どちらでもかまいませんので、「テストです」というテキストを変えるだけです。

リンクをつけたい場合はhref=”#”の#かわりにURLを入れてください。

シンプルボタン

テストです

<a style=”display: inline-block; background: #e0e0e0; text-align: center; border-radius: 5px; box-shadow: none; padding: 10px; margin: 20px; cursor: pointer; text-decoration: none; color: #111; font-weight: bold;” href=”#“>テストです</a>

シンプルなボタンです。ボタンの大きさは文字数で変わります。

立体的なボタン

テストです

<a style=”cursor: pointer; display: inline-block; background: #e0e0e0; border-top: 3px solid #DDD; border-left: 3px solid #DDD; border-right: 3px solid #BBB; border-bottom: 3px solid #BBB; color: #111; padding: 10px; margin: 20px; text-decoration: none;” href=”#“>テストです</a>

立体的なボタンです。

冒頭のボタン

動画を見る

<a style=” display: inline-block; background: #00aaff; width: 50%; text-align: center; border-radius: 5px; box-shadow: 0 3px 3px #000; padding: 5px; margin: 20px; color: #fff; font-weight: bold; letter-spacing: 10px; cursor: pointer; text-decoration: none;” href=”#“>テストです</a>

この記事の最初で紹介したボタンです。

 

自分でカスタマイズ

今紹介したボタンは全て、あらかじめこちらで用意した大きさや色でした。

オリジナルボタンを作りたいのであれば、自分でボタンの大きさや字の色や背景の色を変えたいですよね。

ということで自分でボタンをカスタマイズする方法を紹介します。

まずは簡単にいくつかのコードを説明します。

さきほど紹介したボタンをみてみましょう。

動画を見る

<a style=” display: inline-block; background: #00aaff; width: 50%; text-align: center; border-radius: 5px; box-shadow: 0 3px 3px #000; padding: 5px; margin: 20px; color: #fff; font-weight: bold; letter-spacing: 10px; cursor: pointer; text-decoration: none;” href=”#”>テストです</a>

 

もうちょっとコードを見やすくして、それぞれ見ていきましょう。

 

 

background(バックグラウンド):背景

backgroundは背景のことです。

「background: #00aaff;」となっていますので、#00aaffの部分を変えてあげます。

「background: red;」という風に色の名前を入力してもいいですし、「background: #e0e0e0;」みたいな色の表現の方法でもよいです。

色の表し方についてはググってください。

 

width(ウィス):幅

widthはボタンの幅を表しています。

つまりボタンの幅を変えたい場合は「width: 50%;」の部分を「width: 60px;」とかに変えてやるとOKです。

(Webサイトでは長さをpxで表しますので慣れましょう。)

ちなみに%でも幅を変えることも可能なので試してみましょう。

 

 

color(カラー):字の色

colorの値を変更することで字の色を変えることができます。

背景と同様に「color: #fff;」の#fffの部分に色を入力すればOKです。

 

height(ハイト):高さ

heightは高さを設定することができます。

上のボタンにはheightが設定されていませんので、設定する場合にはどこかの;の後に「height: 30px; line-height: 30px;」と入力してください。

高さが”30px”に設定されます。

豆知識として「line-heightとheightと同じ値にすることで文字を中央に配置」することができます。試してみてください。

 

box-shadow(ボックスシャドウ):ボタンの影

向上心がある人はこれをいじってみてください。box-shadowです。

その名の通りボックスの影を変更することができます。

「box-shadow: 0 3px 3px #000;」はx軸方向に0、y軸方向に3px、ぼかしを3px、影の色は#000(黒)という感じです。

色々試してみましょう。

 

border(ボーダー):ボタン外側の線

さらにborderで線を書いてみましょう。

例えば「border: 1px solid #000;」と追加して書けば1pxの太さの#000(黒)のsolid(実線)で囲うことができます。

1pxの部分を変えれば線の太さが、solidの代わりに「dotted」とすれば実線が点線に、#000の部分を変えれば線の色が変わります。

 

実際にやってみましょう

それでは自分で実際にカスタマイズしてみましょう。

background ⇒ #00ffbbに

width ⇒ 150pxに

box-shadow ⇒ 2px 2px 1px #00aaffに

color ⇒ redに

height: 50px; line-height: 50px;  を追加

border: 2px dotted #ffaa88; を追加

 

 

すると
ボタン!
出来ました!(ボタンらしいかは置いといて)

自分でカスタマイズすることができる事が分かったと思います。

まとめ

毎回のようにボタンを使う人はなかなかいないとは思いますが、たまに作りたいなと思ったときに参考にしていただければ幸いです。

↓マウスを乗せてみてください。

CLICK!

この様にマウスを乗せたときに変化させたりする、少し凝ったデザイン方法については別記事で紹介したいと思います。
では。

書きました ⇒「【HTMLとCSSでボタンデザイン】マウスをのせたときにボタンのデザインを変化させる方法

ちゃんと学びたい人は「HTML&CSS 標準デザイン講座【HTML5&CSS3対応】」を見れば理解できると思います。

 

また僕がどうやってHTMLを習得したかについて「【Webサイトを作る・デザインする】HTML・CSSを勉強する方法!」に書いてありますので、一緒にご覧になってください。

コメント

  1. hidesert より:

    こんにちは。
    まとめにある、マウスを乗せた時に変化するデザインの記事を探したのですが
    そのような記事はありますでしょうか?

    • kujigoji929 kujigoji929 より:

      こんにちは。コメントありがとうございます。
      マウスをのせた時に変化するデザインの記事はまだ書いていませんでした。
      今日中には書きますね!

  2. hidesert より:

    ありがとうございます!