9月 03

Google Chromeを使ってみた

作りはシンプル。
操作もシンプル。
スタイルシートもJavaScriptも問題なし。

ただ、機能的に物足りない感じがある。
あとは、他のGoogleとの連携かな。
Analyticeとか、Adsenseとか、
ログインしてたら、自動的に結果が表示されたりするとうれしいかも。
でも、ぜひ使いたいとはあまり思えなかったかも。

9月 01

それはバックスラッシュ(\)か円記号(¥)か

Windowsで作業するには問題はおきませんが、
別のOSやUTF-8コードのアプリケーションで使用すると、
とたんに牙をむくのがバックスラッシュ。このCMSでもそうですね。

コードで書くとバックスラッシュは\x5c
円マークは\xc2\xa5

ファイルやDBへの保存はそのままでもいいですが、
表示させるときに絶対に¥でなければ困る場合は置換するのを忘れないように。

s/\x5c/\xc2\xa5/g;

ちなみに、JavaScriptで表示を切り替えたりする場合、
codeタグで囲んでいると、\x5cのままでも円記号になることがある不思議。
このWordPressの編集において「ビジュアル」では円記号だけど、
保存して表示するとバックスラッシュに戻る。

8月 30

CMS導入

いままで、あーでもないこーでもないといろいろ弄ってきましたが、CMSを導入することにしました。
今、設定と格闘しています。

もともとページ数はあまり無いので、そのうち移行が完了すると思います。

8月 07

WindowsでSMTP

Windowsでメールを送信するには、melonという便利ツールがあった。
http://seclan.dll.jp/download.htm

このツールを起動して、

phpで使いたかったので、php.iniは

; For Win32 only.
SMTP = localhost
smtp_port = 25

; For Win32 only.
sendmail_from = 127.0.0.1

これだけで、mail()やmb_send_mail()が使えるようになる。

7月 14

マウスイベントの追加方法

JavaScriptでマウスイベントを追加するには何パターンかあるけど、

obj.onmousedown = cursorStart;

obj.setAttribute( “onmousedown”, document.all ? new Function( “cursorStart(this)” ) : “cursorStart(this)” );

上の方じゃないと、ドラッグイベントまで追加されてしまう。
結構悩んだ。

11月 16

GIMPでWeb素材を作ろう

完成画像

背景やボタンとしても使えそうで、今風(?)なWeb素材を作ってみましょう。
このような画像が作れるようになります。
文字を重ねると、ボタンらしくなりますね。
この解説で使用したバージョンは、2.2.4です。

実際に作ってみる

それでは、手順を追って作ってみましょう。

  1. 新規画像を作成します。
    手順1-1
    とりあえず、200×40というサイズで作ることにします。
    細かなサイズ指定は、慣れれば各自が判断できるでしょう。
    手順1-2
    問題なく作成されれば、こういうウィンドウが出現します。
  2. 基本とする色を塗ります。
    手順2
    ここでは、お気に入りの色である緑色を使いましたが、どのような色でもかまわないでしょう。
    ただし、濃い目のほうがいいかもしれません。
  3. グラデーションを塗るための準備をします。
    画像を全選択してください。
    手順3-1
    そして、選択領域の縮小で2px縮めます。
    手順3-2
    次に、角を丸めます。
    ここでは、半径を「50%」という設定で丸めます。
    好みで変更してもかまわないでしょう。
    手順3-3
    ここまで問題がなければ、このような状態になります。
  4. シャドウとなるグラデーションを塗ります。
    2枚目のレイヤーを作成します。
    手順4-1
    最上部になるように配置してください。
    手順4-2
    新規レイヤーへグラデーションで塗ります。
    「前景から透明に」を選択します。
    形状は「Linear」反復は「なし」です。
    手順4-3
    下から中間までを選択し、グラデーションで塗ります。
    ここまで問題がなければ、このような状態になります。
  5. ハイライトとなるグラデーションを塗ります。
    手順5-1
    減算選択で半分にします。
    手順5-2
    再び角を丸めます。
    半径を「100%」という設定で丸めます。
    もし、膨らむようなら設定値を「90%」などに減らします。
    手順5-3
    ここまで問題がなければ、このような状態になります。
  6. グラデーションの調整を行います。
    手順6-1
    グラデーションを塗ったレイヤーの透明度を「50%」に変更します。
    手順6-2
    うまくいけば、こういう状態になります。
    なんとなく、雰囲気が出てきたでしょうか。
    しかし、もうちょっと手を加えていきましょう。
  7. ボーダーを塗るための準備を行います。
    手順7
    画像全体を選択して、それから2px縮小します。
    選択領域を反転しておきます。
    今回、角は丸めません。
  8. ボーダーを塗ります。
    この手順は、一気に進めてしまいます。
    3枚目のレイヤーを作成します。
    手順8-1
    最上部になるように配置してください。
    手順8-2
    白色で描画色塗りします。
    画像の端2pxをすべて塗ってしまいます。
    作業しやすいように、表示倍率を800%に変更してあります。
    手順8-3
    画像全体を選択して、それから1px縮小します。
    選択領域を反転して、角もそのままです。
    黒色で描画色塗りします。
    画像の端1pxをすべて塗ってしまいます。
    手順8-4
    アクセントに、角の1pxを白色で塗っておきました。
  9. ボーダーの調整を行います。
    手順9-1
    3枚目のレイヤーをオーバーレイモードに変更します。
    手順9-2
    白色はハイライトっぽく、黒色はシャドウっぽくみえるようになります。
    手順9-3
    等倍で表示すると、こういう状態になります。

Web素材の完成

画像として書き出して完成です。
完成画像
透明度のある、それっぽい画像が出来上がりました。
パターン追加
背景とグラデーションの間にパターン塗りを加えてみました。
雰囲気が変わって、いい感じになります。
こういうWeb素材が使われているのを、よく見かけると思います。

自分で作るのが面倒な方へ

ここで使用したデータファイルをお使いください。
背景画像の色を変えるだけで、いろんなパターンの素材が作れることと思います。
ダウンロードで内容を表示してしまうブラウザの場合には、右クリックメニューから対象を保存してください。
Photoshopでは、こういった作業をマクロにしてしまえば、いろんなサイズでも自動的に作れます。
しかし、GIMPではマウス操作の記録という機能がなく、スクリプトをコーディングしなければなりません。
自動化できるようになるのは、いつになることでしょう…。

更新履歴

2008/04/14
サイト移動に伴うHTMLの修正(旧URI:[廃止])
2007/11/16
公開
6月 08

アイコン

アイコン画像は直リンクをせず、お持ち帰りの上ご利用ください。
配布元の表記は管理者にお任せします。
キャラクターの著作は各個人または団体が保有しております。
ご利用されたことにより発生する責任は一切負いません。

MMORPG「ストラガーデン

© 2004-2005 FromNetworks,Inc. © 2004-2005 DWANGO Co., Ltd.

  • フロッピー(うさぎ)05/06/08
  • チッチ(とり)05/06/08
  • ビッグラット(こあら)05/06/08
  • ルカントード(かえる)05/06/08
  • ピュアイ(とり)05/06/09
  • サポートレッド(ゲームマスター)05/06/09
  • クリフハーピー(はーぴー)05/06/09
  • ウィンプゴブリン(ごぶりん)05/06/13
  • グラススネーク(へび)05/06/13
  • メジィロ(甲殻系?)05/08/07

RPG「.hack

© Project .hack ©BANDAI 2002

  • プチグソ(謎の生物)05/06/08

ANIME「おじゃる丸

©犬丸りん・NHK・NEP

  • 電ボ(伝書蛍)05/06/09