QHM (Quick Homepage Maker) ユーザのためのTips集。小技から大技までテクニック満載

ボタン編

画像を使わないでボタンを作成する

画像を使わないでスマートフォンでよく使用されているようなボタンを作成します。ただし、この方法はCSS3対応のブラウザでないとちょっと見た目がかっこ悪いです。(IE 7, 8はCSS3未対応です)
IE9、Firefox、ChromeはOKです。
文字数によりボタンのサイズが自動調整されます。
ボタンは左寄せで表示されます。ボタンの表示位置を変えたいときは、marginで指定するのが簡単です。

#beforescriptで指定している　div.fancy_button 内にある　float: left;　をright; に変更すると標準で右寄せになります。

• ブラウザによる表示の違い
  以下の画像は、ハードコピーです。

Firefox11

Chrome18

IE8

あなたがお使いのブラウザでの実際の表示はこちら
↓
■標準（左寄せで表示）

■marginを指定して中央付近に表示

■marginを指定して右寄せ表示

使い方

1. #beforescript　の内容を、ナビ２に入れます。これで全部のページでこのボタンが利用できます。
2. ボタンを表示したいところに #html でボタンを指定します。以下の指定ができます。
   1. リンク先は hrefに URLを指定します。
   2. ボタンの色は　background-color　で設定します。
   3. ボタンの名称を指定します。
   4. 必要なら marginを指定して表示位置を決めます。

文字サイズを小さくしたいとき

CSSを変更することで、文字サイズを変更できます。以下の行を変更してください。

font: bold 21px/1em Arial;

　　21px 　を　16pxにすると文字サイズが小さくなります。

【コード】
■標準（左寄せで表示）
#html{{
<div class="fancy_button">
  <a href="https://ensmall.net/club/users/login/">
    <span style="background-color: #cc9933;">Emsmall Club</span>
  </a>
</div>
}}
#clear
■marginを指定して中央付近に表示
#html{{
<div class="fancy_button" style="margin: 0 180px;">
  <a href="http://qhmtips.com">
    <span style="background-color: #00cc99;">トップ</span>
  </a>
</div>
}}
#clear
■marginを指定して右寄せ表示
#html{{
<div class="fancy_button" style="margin: 0 0 0 230px;">
  <a href="http://ensmall.net/uf/forum/">
    <span style="background-color: #006699;">QHMユーザフォーラム</span>
  </a>
</div>
}}


#beforescript{{
<style type="text/css">
<!--
div.fancy_button {
float: left;
border-width: 1px;
border-style: solid;
border-color: transparent transparent #666 transparent;
border-color: transparent transparent rgba(202,202,202,0.27) transparent;
-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px;
-webkit-background-clip: padding-box;
}

div.fancy_button a {
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(77,77,77,0.4)));
background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.4));
float: left;
padding: 4px;
text-decoration: none;
outline: 0;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
-webkit-background-clip: padding-box;
}

div.fancy_button a span {
display: block;
letter-spacing: -1px;
border-width: 1px;
border-style: solid;
border-color: #ccc #444 #111 #444;
border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.3) rgba(0,0,0,0.6) rgba(0,0,0,0.3);
font: bold 21px/1em Arial;
color: white;
padding: 0.48em 2em;
text-shadow: rgba(0,0,0,0.45) 0 -1px 0;
-webkit-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: rgba(0,0,0,0.75) 0px 0px 3px;
-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6)), color-stop(0.5, rgba(255,255,255,0.15)), color-stop(0.5, rgba(255,255,255,0.01)), to(transparent));
background: transparent -moz-linear-gradient(top, rgba(255,255,255,0.6), rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.01) 50%, transparent);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80FFFFFF', endColorstr='#00FFFFFF');
-webkit-background-clip: padding-box;
}

div.fancy_button a:hover span {
border-top-color: rgba(255,255,255,0.65);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.6)), color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5, rgba(0,0,0,0.21)), to(rgba(0, 0, 0, 0.20)));
background: -moz-linear-gradient(top, rgba(220,220,220,0.6), rgba(100,100,100,0.2) 50%, rgba(0,0,0,0.21) 50%, rgba(0, 0, 0, 0.20));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99dcdcdc', endColorstr='#33000000');
-webkit-background-clip: padding-box;
}

div.fancy_button a:active span {
border-top-color: rgba(255,255,255,0.2);
border-left-color: rgba(0,0,0,0.4);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(150,150,150,0.6)), color-stop(0.5, rgba(60,60,60,0.6)), color-stop(0.5, rgba(40,40,40,0.6)), to(rgba(20, 20, 20, 0.5)));
background: -moz-linear-gradient(top, rgba(150,150,150,0.6), rgba(60,60,60,0.6) 50%, rgba(40,40,40,0.6) 50%, rgba(20, 20, 20, 0.5));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80969696', endColorstr='#59000000');
-webkit-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px;
-webkit-background-clip: padding-box;
}

div.fancy_button a span:active {
border-top-color: rgba(255,255,255,0.2);
border-left-color: rgba(0,0,0,0.4);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80969696', endColorstr='#59000000');
}
-->
</style>
}}

ご意見箱

皆様のご意見をお待ちします。

• ボタンの大きさを変更するには、どうしたらいいのでしょうか？　なにぶんにもHTMLを知らないもんで・・・・・ -- sakasai 2012-09-16 (日) 11:25:49
• 文字の数により自動でボタンサイズは変更します。ボタンの高さは変更できません。HTMLではなく、CSSを変更する必要があります。 -- tomzo 2012-09-16 (日) 23:03:03
• 文字のサイズを変更したいときは、CSSのdiv.fancy_button a span内に定義してある　font: bold 21px/1em Arial;　を適当に修正してください。21px　を　14px などに変更すると文字サイズが小さくなります。 -- tomzo 2012-09-19 (水) 00:47:58
• 素晴らしいです。ボタンが簡単に作れてかなり助かりました！ありがとうございます。 -- kenji 2013-03-05 (火) 19:00:56

当ページは役に立ちましたか？