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

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

例えば

動画を見る

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

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

このページを見てほしい人
タグを貼り付けてボタンを作ってみる
色々なボタン
自分でカスタマイズ
実際にやってみましょう
まとめ

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

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

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

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

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

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

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

では行きます。

※凹むボタンを作りたい人はコチラ

凹むボタン

⇒「【HTMLとCSSでボタンデザイン】クリックしたときにボタンが押される（へこむ）アクションを付ける方法」

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

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

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

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

次にコピー＆ペーストで

<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>

と入力します。

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

すると

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

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

色々なボタン

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

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

リンクをつけたい場合は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>

<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;」と入力してください。

高さが”３０ｐｘ”に設定されます。

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

box-shadow（ボックスシャドウ）：ボタンの影

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

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

「box-shadow: 0 3px 3px #000;」はｘ軸方向に０、ｙ軸方向に３ｐｘ、ぼかしを３ｐｘ、影の色は#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;　を追加

<a style="
    display: inline-block;
    background: #00ffbb;
    width: 150px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 2px 2px 1px #00aaff;
    padding: 5px;
    margin: 20px;
    color: red;
    font-weight: bold;
    letter-spacing: 10px;
    cursor: pointer;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
    border: 2px dotted #ffaa88;
" href="#">ボタン！</a>