日本語ちまちまボタンの作り方すなわちボタンメーカーの使い方を手取り足取り説明するよ

成城トランスカレッジ』のchikiさん(id:seijotcp)に紹介していただいたボタン(上に並んでるもの)はベースをここで作りました。
○ちまちまボタンメーカー(クローン) :: UnderDone
http://underdone.net/btmaker/
たしか「みかちゃんフォント」を使ったと思いますが、字数が多くてうまくおさまらなくてあとでグラフィックソフトで調整してます。たぶん右左でフォントが違います。


というわけで、今回はちまちまボタンの作り方&ボタンメーカーの簡単な説明を。
「ボタンていったいなんじゃあぁあぁ!」
というひとに説明しますと、このサイトの、バナーの下に並んでる四角いアイコンみたいなのがボタンです。
  (←自由に配布してかまいません*1。)
画像ファイルでできてます。いろんな日記&ブログで見かけたことがあると思いますが、「ボタンメーカー」を使うと、Webサイト上で簡単にこれらのボタンが作れます*2


色をイメージする

当たり前ですが、まずボタンにいれる文字を決めます。
フォントにもよりますが、全角文字で6〜8文字、半角で10〜12文字ぐらいがいいようです。
つぎに色を決めますが、決めなければならない色はつぎの6つ。

  • 外側の枠
  • 内側の枠
  • 左右それぞれの箱の背景
  • 左右それぞれの箱の文字

多いように見えますが、ごちゃごちゃしないためには3〜4色程度を組み合わせるのが適当なので、好きなカラーを2、3色イメージしておけばいいでしょう。

このサンプルの場合は「青とオレンジ」で、このサイトのカラーに合わせてます。左側の文字は白にしたほうがすっきりするかもしれません。
で、こういった色の組み合わせも画面を見ながらひとつひとつ決めていきます。


作ってみよう

上記の
「ちまちまボタンメーカー(http://underdone.net/btmaker/)」
にアクセスすると以下のような画面になります。


値を適当に設定して、下の方にあるSubmitボタンを押せばサンプルが表示されます。


注意点

じつはこのあんでるどんさんのクローンには一個所だけ記述の間違いがあって、

  • 「右の箱」の「文字の位置」は縦棒からのピクセル数で指定

ではなく、

  • 「右の箱」の「文字の位置」は左端からのピクセル数で指定

ということです。


たとえばサンプルの場合、右側の箱の文字は

となります。
【参考図】

「外側の枠」を示す赤いラインが枠に届いていませんが、気にしないように。


以上、ボタンメーカーでわかりにくいのはここだけなので、あとはいろいろ指定して試してみましょう。


気に入ったものができあがったら

以下は、はてなユーザー向けになります。

  • 画像を右クリック→名前をつけて画像を保存(Macはctrl+クリック)

で適当な名前をつけて保存し、フォトライフにアップロードしましょう。
フォトライフについてはここらあたりでも参考にどうぞ。
●昨日はじめたばかりのダイアリー初心者が最初に覚えたい「5つのはてな記法
http://d.hatena.ne.jp/wetfootdog/20060406/p1
ややまん中よりあたりに説明があります。
で、あとは自分のサイトに貼りつけるなりしましょう。
【サンプル】日記のRSSを追加!(上に「R!」とあるものです)

<a href="http://r.hatena.ne.jp/append?http://d.hatena.ne.jp/あなたのid/">
<img alt=" はてなRSSに追加ボタン" title="はてなRSSに追加!" src="画像の場所" border="0"></a>

「画像の場所」はIEの場合は右クリック→プロパティ、Firefoxの場合は右クリック→画像のURLをコピー、でコピーできます。詳しいことは近所のはてなダイアラーに聞きましょう
(上記のようにHTML、コードなんかをそのままダイアリーに表示するにはスーパーpre記法を使います。)


そのほか

こういったやり方のほかにも

このように片方にだけ文字を入れるという方法も。この場合、棒線の位置を左から5ピクセルにしてあります。
また、この仕切の棒線がいらないという場合は、位置を100ピクセルなど極端に大きな数値を入れると棒線を右端に追いやりますが、ボタンから外に出ることはなく、外側の枠が欠けたようになります。このあたりはグラフィックソフトで修整してやるといいでしょう。
ちなみに「ちまちまボタン」の命名者は松永さん。
○ちまちまボタン80×15px [絵文録ことのは]2003/09/30
http://kotonoha.main.jp/2003/09/30button.html
こちらのエントリにWeb上でボタンを作るサイトがいくつも紹介されています。
で、最後に紹介されてる日本語ボタンメーカーのサイト(antipopさんのところ)がリンク切れになってるので今回はあんでるどんさんのクローンを紹介。


参考的おまけ

一つ目のサンプルボタンの各設定値
【全般:】
フォント名 小夏TT
フォントサイズ 8(初期値のまま)
外側の枠  #000099
内側の枠 #FFFFFF(初期値のまま)
棒線の位置 ピクセル(左からの) 45
文字の位置 ピクセル(上からの) 11(初期値のまま)
【左の箱】
背景色 #FF6600(初期値のまま)
文字色 #111111
文字の位置 1
【右の箱】
背景色 #000099
文字色 #FFFFFF(初期値のまま)
文字の位置 46


[ボタンに異常な愛情][または私は如何にして心配するのを止めてはてなを]


*1:改変については色の変更のみ可。

*2:最下列のオオグチボヤなどのボタンはCSSで作ってるものです。