FONユーザーとしてアナウンスメントしておこうと思います。山手線の内側が網羅されているというのは嬉しいですね。1980円～の無線ルーターを購入することで世界中のFONアクセスポイントが無料で使えるという無線コミュニティでありますが、2月4日～4月4日まで、ユーザー登録（無料）するだけでFONアクセスポイントを利用できるとのことです。

ローンチ当初は、セキュリティ周りや、契約回線の二次利用についての論議が交わされていた模様ですが、1年経過してコミュニティのメンバー数が60万人を超えた今、被害等の報告が上がっていないのを見ると、当面は何の問題もないように感じます。筆者はWillcomのAdvanced/W-ZERO3[es]を愛用で、色々な場所で快適に使えております。

どこでも快適につながる環境を目指して、もっと沢山の人がアクセスポイントを開設してくれるといいなあと思っています。

下の図は現在のSkypeチャット画面。相手が記入中の時、アバターの左肩に鉛筆が現れます。しかも書く手を休めたり書き直したりの動作を、鉛筆がつぶさに再現しています。これを私が知ったのはごく最近でした。

私はWindowsメッセンジャーとSkypeを常駐させていますが、Windowsメッセンジャーの場合は相手の入力中、画面下のステータスバーに『○○さんがメッセージを入力しています』（←正確ではありません＞＜たしかそんな感じ）のコメントが表示されるのに対して、Skypeには何も無い。両者を比較してSkypeは不便だなと思っていたのですが、鉛筆が出てそれを表現していると知った時『さすがSkype！垢抜けてる！』と思いなおしました。でもユーザーの私はそれに気が付かなかった。これはUI的に問題なんじゃないかと。

ではどこに鉛筆が出てくれたらもっと嬉しいかと考えると、私のアイデアは下の図です。

ここに出てくれるとすごく親切だと思うのですが、いかがでしょうか？いずれメッセージが出現する場所にプレ表示させるという感じです。これで入力のスピード差や、不注意による会話の食い違いが解消。相手に返事を求める姿勢で待ち構えている人にはストレス軽減！と思うのですがいかがでしょうか？

• ゆなカラーピッカー
  ブラウザ上だろうがデスクトップだろうがスクリーン上に表示されている全ての色をスポイトで拾って16進法（32bit10進法でもRGBでも）の値を出してくれるシンプルで軽いアプリケーション。『お、この色イイね』と思ったらすぐに採集できる手軽さがイイ！
• ものさしX
  このシンプルなアプリケーションは、まさに机の上の定規。細かい計算が必要なmargin、paddingの値の割り出しも、ぱっと計ってぱっと決め打ち出来る。ワンクリックで縦になるなど、その挙動から存在そのものがすごくヒューマンコンシャス。定規は一本だけでなく複数本起動できるのがまた便利。
• Firebug
  Firefoxエクステンション。ブラウザ上のページのソースを解析、編集して即時レビューが出来る。もうコレなしでは作業になりません。
• Spiffy Corners - Purely CSS Rounded Corners
  角丸ボックスCSSジェネレータ。背景色と本体色と丸のサイズを選ぶだけでCSSを吐き出してくれる。好みのCLASS名を付けられるので、吐き出しソースをそのまま自分のファイルにコピペ。
• Background Image Maker
  ちょっと定番すぎで恐縮ですが、まとめということで一応念のため。
• Cascading Style Sheets Optimization
  書き足して書き足して汚れてしまったCSSソースの重複した無駄な記述をキレイに書き直してくれるジェネレータ。あ、こういう書き方があったのか、と勉強になります。ただ”MS P ゴシック”などソースに日本語が含まれていると文字化けすることがあります。
• tlbox - the best tools on the web
  ここはまとめ中のまとめみたいなサイトですが、デザイン・開発に便利なツールやリンクなどを一堂に集めた制作者のためのリソースセンター。しかも自分で好みのツールを選んでBOXに入れるとそれらをまとめてFirefoxのエクステンションとしてダウンロードでき、ブラウザ上に道具箱が出来たかのような使いやすさを再現してくれるところが心憎い！(図参照)
  

• ダウンロード：Zeling Planet > Wordpress plugin: Zelig Dropdown Cats

上記ページからダウンロードし、プラグインフォルダにインストールして有効化。 あとは表示させたい場所（サイドメニューなど）に次のコードを記述するだけ。

パラメーターは次の通り（開発元ページから引用）

カスタマイズ：ボタンクリックでリンクする

プルダウンを選択するだけでリンク先に飛んでしまうという挙動が個人的にイヤでGOボタンを追加。変更点は次の通り。

zeling-dropdown-cats.php 変更前

変更後

参考ページ

• Customizable Post Listings Showing Pages
• How Pages are different in WP 2.1

WordPress2.0までは、静的ページ（static）とブログエントリー（publish）を下の図の通り、テーブル"wp_posts"のpost_statusで識別していました。

2.1からこの仕様が変更され、これまで使われていなかったpost_typeにこれらの情報が、静的ページ（page）とブログエントリー（post）として格納されるようになりました（下図参照）。

ちなみにpost_statusには、公開済み（publish）or下書き（draft）が格納されるようになりました（下図参照）。

この変更により、プラグインファイル（customizable-post-listings.php）の61行目（付近）にある下の記述で、post_statusがPublishのものを全て拾ってしまうため、静的ページを含める全てのエントリーがリストに上がって来てしまうということが原因でした。publish違いの悲劇。

この記述を次のように、『公開済みでなおかつpost_typeがpost（ブログエントリー）のもの』と記述を変更することで、この問題を解決。

強力なスパムフィルタとPOP受信が可能なGmailを自前のドメインで利用する方法をまとめました。

2007/5/30 : TXTレコードの箇所を修正。この記事を参考にされた方には大変申し訳ございませんm(_ _)m

【参考URL】

• Google Apps ヘルプ：SPF レコードを設定するにはどうすればよいですか。
• Google Apps Discussion Group： SPF Configuration for GAFYD

1.Googleアカウントを取得する

このサービスを利用するにはGoogleアカウント（Gmailアドレス）が必要です。1つのアカウントで、いくつでも独自ドメイン向けサービスの開設が出来ます。

2.サービスの申し込みをする

Google Apps申し込みページにアクセスします。申し込むドメインの組織情報入力の際、Googleアカウントの持ち主の役職など聞かれますが、空欄だとはじかれます。N/Aで通りました。

3.DNSを変更する

ここでは、ValueDomainとDreamhostを使った場合の設定方法について説明します。

ValueDomainの場合

DNS設定画面で、MXレコード・TXTレコード・CNAMEレコードを次のように変更します。以下に述べるTXTコードはメール送信にSFP（Sender Policy Framework）を利用して送信元アドレスの詐称を防ぐためのもので、設定は必須ではありません。また、CNAMEレコードは、独自ドメインGmailへWEBでアクセスするためのURLを、mail.yourdomain.comで利用するための設定で、これも必須ではありません。でも設定しておいた方がちょっと便利ですよね。

mx aspmx.l.google.com. 10 @
cname mail ghs.google.com.
txt @ v=spf1 include:_spf.google.com ~all v=spf1 include:aspmx.googlemail.com ~all

ちなみにGoogle Appsのメールサーバは上記のひとつのみではありません。優先順位をそれぞれに振り分けて、次の設定を追加することも出来ます。

mx ALT1.ASPMX.L.GOOGLE.COM. 20 @
mx ALT2.ASPMX.L.GOOGLE.COM. 30 @
mx ASPMX2.GOOGLEMAIL.COM. 40 @
mx ASPMX3.GOOGLEMAIL.COM. 50 @

MX・SPFレコード作成に便利なサイト

• Google Apps 管理者向け / Mail Exchange (MX) DNS レコードの設定
• Sender ID Framework SPF Record Wizard
  ↑↑↑SPFレコード生成ウィザード。便利！

参考：DNSのチェックに便利なサイト

• DNSstuff.com
• Easy Setup for VALUE DOMAIN / MXレコード検索

Dreamhostの場合

MXレコードの設定については→Google Apps 管理者向け / MX レコードの設定: DreamHost

TXTおよびCNAMEレコードの設定は、コントロールパネル>Domains>Manage Domainsから、"Add a custom DNS record to yourdomain.com" の欄に、次を追加してAdd Record Now!ボタンをクリック。

TXTレコード

• Name = 空欄
• Type = TXT
• Value = v=spf1 include:_spf.google.com ~all v=spf1 include:aspmx.googlemail.com ~all
  
• Comment = 任意

CNAMEレコード

• Name = email, gmailなど任意（上記ValueDomainで使った"mail"は、ここでは使えないのでmail以外を指定）
• Type = CNAME
• Value = ghs.google.com.
• Comment = 任意

4.管理者アカウントと各ユーザーアカウントの設定

管理者用コントロールパネルで、ログインページに独自ドメインでアクセスするための設定を行ないます。管理用コントロールパネルにログインし、マイレポートのサービス>メール でカスタムドメインのリンクをクリックし、カスタムを選択してCNAMEで指定した設定名（mail、など）をURLの空欄に入力し次へをクリックします。これでしばらく（数分かかります）経つと、http://mail.yourdomain.com のような短いURLでメールのログイン画面にアクセスできるようになります。

ユーザー（メールアカウント）の追加は、メニュー：アカウントの作成から行なえます。

管理者用コントロールパネルで、メール画面のロゴを独自画像に変更することも出来ます。その他のインターフェイスおよび機能はGmailと全く同じです。

5.POP受信を利用する

ここからはGmailと全く同じです。メール画面右上の『設定』から『メール転送とPOP設定』タブで『POPを有効にする』を選択し、『変更を保存』をクリック。これでメールクライアントを使ってPOP受信が出来るようなサーバ側の環境が整いました。メールクライアント側の設定は、Gmail ヘルプセンター / メール クライアント リストの設定でお使いのメールソフトの項目を参照して設定下さい。これでGoogle Appsを利用した独自ドメインGmailの一般的な設定は完了です。

POP受信がうまくいかない場合、Gmail POPトラブルシューティングツールを使うとウィザード形式で設定のチェックが行なえます。
以下Gmailを便利に利用するための、おすすめサイトを紹介します。

• Gmail Maniacs - Gmail関連そっと情報サイト
• Gmailの使い方！
• ITmedia Biz.ID：Gmailまとめ
• Googleグループ / Gmail ヘルプグループ

Gmail POP受信エラーについての体験談

独自ドメインGmailの設定が完了し、スパム激減とWEBサーバ圧迫の恐怖からの解放を喜んだのも束の間、パタリとPOP受信が反応しなくなるという体験をしました。原因はNorton Internet Securityの設定でした。（パターンの更新以降、メール監視に新しいフィルタが追加されたのが原因のようです）※追記2007/6/5：Norton Internet Security2006のみで確認した現象です。2007にアップデートすると、このエラーは出なくなりました。

Norton Internet Securityをお使いでPOP受信のエラーにお悩みの方は、Norton Protection Centerの電子メールとメッセンジャーの保護設定から、電子メールスキャンとワーム遮断をOFFにしてみることをおすすめします（ただし自己責任で！）。Norton以外でも、セキュリティソフトがGmail POP受信の邪魔をいている可能性が高いようです。

参考ページ：Becky Ver.2 BBS / Gmail POP とセキュリティソフトの関係の考察

全く蛇足ですが…

上段、DNSの設定で方法を紹介したDreamhostの最大割引プロモーションコードを置いておきます。つPEACO

root権限はありませんが、Telenet, Shellアクセスが可能で容量200GB(！)PHP、MySQLが使えることはもちろんのこと、WebDAVも使えて再販可。一ヶ月$7.95～･･･という悪魔的ハイスペックな仕様ですが、load averageが時間帯で100を超えることもある(！)ということはヒミツです＞＜

※ここに公開するコードを利用したことによって発生した不都合の責任を当方では負いかねます。あらかじめご了承下さい。

Lightboxとは？→Lightbox JS 2.02を導入する

• 用意するファイル1:Lightbox JS v2.0
• 用意するファイル2:GD自動サムネイル作成
• 動作テスト済み環境：Zencart v1.2.0-l10n-jp-6 / MySQL 4.0.26-standard / PHP 4.3.11 (Zend: 1.3.0) / Apache 1.3.34 (Unix)
• 参考サイト1:人力検索はてな 指定した画像URL（例：http://aaa.com/sample.jpg）のサムネイルを取得、生成するようなPHPスクリプトを探しています
• 参考サイト2:

インストール

GD自動サムネイル作成をZenCartのRoot直下へ、Lightboxを環境に合わせて任意のフォルダへアップロードします 。Lightboxインストール参考

修正するファイルとその箇所

includes\templates\your_template\templates\tpl_product_info_display.php

101~107行目付近

下のように変更

includes\modules\pages\product_reviews\main_template_vars_images.php
includes\modules\pages\product_reviews_info\main_template_vars_images.php

31行目付近

下のように変更

includes\modules\pages\product_reviews\header.php

35行目付近

下のように変更

includes\modules\pages\product_reviews_write\main_template_vars_images.php

54行目付近

下のように変更

以上の作業で、商品ページおよびレビューページでの写真拡大がLightboxで表現されるようになりました。

これと併せて商品の追加画像をLightbox[roadtrip]でスライドショー表示できたらカッコいいのですが、勝手に追加した画像にサムネイルを作って拡大させるというZenCart仕様の挙動が個人的にイヤで、次の箇所を修正し追加画像のサムネイルを出さないようにしました。商品説明のTEXTAREAにgdthumb.phpとLightboxコードを使って直接画像を呼んで来てスライドショーを再現させるという、ちょっと手間な方法で対応しました。※ZenCartコミュニティ掲示板にこれを成功された方のコードが掲載されています。

includes\templates\your_template\templates\tpl_product_info_display.php

256行目付近の下のソースを削除

GD自動サムネイル (gdthumb.php) 補足

• 『指定されたパスにファイルが見つかりません』のエラーが出る場合、PHPのチェックに引っかかっている可能性があります。gdthumb.phpのソース内で次の箇所を削除するかコメントアウトしてみて下さい。(79行目付近)
  PLAIN TEXT
  PHP:

  79. if(!file_exists($path)) {
  80. return array(0, "指定されたパスにファイルが見つかりません。");
  81. exit;
  82. }

• gdthumb.phpソース内で、あらかじめサムネイル画像の最大値を指定しておくと、各ページの商品写真の大きさを一定にできるので、設定をおすすめします。
  PLAIN TEXT
  PHP:

  58. // 画像の最大横幅
  59. $this->imgMaxWidth = 250; // 1以上の値// 画像の最大縦幅
  60. $this->imgMaxHeight = 0; // 指定しない場合は0 指定する場合は1以上の値

• 配布元： Angsuman’s Multi-Page Plugin: WordPress 2.x Plugin To Create Multi-Paged Articles　by　Simple Thoughtsさま
• 動作テスト済み環境：Wordpress2.0.6

インストールと使い方

1. ダウンロードしたデータを解凍し、multipageフォルダごとwp-content\pluginsフォルダにコピーして、管理画面からう有効化すると投稿画面のリッチテキストエディタに、下のようなアイコンが現れます。
   
2. 投稿画面のコンテンツの、ページを区切りたいところにカーソルを当て、上のアイコンをクリックします。
3. ページの最下部に、分割されたページへのリンクが勝手に出てくれます。テーマによっては、そのままではリンクを出してくれないものもあります。その場合は、wp-content\themes\your_theme\の、page.phpおよびsingle.phpの適当な部分に下のコードを挿入します。
   (PLAIN TEXTでご覧下さい＞＜)
   PLAIN TEXT
   CODE:

   1. <?php link_pages('<p><strong>Page:</strong> ', '</p>', 'number'); ?>

試しにこのページも分割してみました。動作はこんな感じです。↓

]]> http://www.peacock-union.com/archives/58/feed/ http://www.peacock-union.com/archives/57 http://www.peacock-union.com/archives/57#comments Thu, 08 Mar 2007 07:35:20 +0000 admin Design Event NewsReleaseDesignEventNewsReleaseTemplate http://www.peacock-union.com/archives/57 ピーコックユニオンでは、TemplateMonster Japanのテンプレート5%OFFクーポンを本日(2007年3月9日)よりいたしました。
TemplateMonsterに登録されたテンプレートを使うと、世界中の優れたデザイナーのデザインで素早くリーズナブルにオリジナルのホームページを持つことが出来ます。WEBサイト公開にあたってのセッティング・カスタマイズはピーコックユニオンでも承っております。(ご自分で設置される場合でもクーポンコードをご利用いただけます)

テンプレートのサンプルを掲載したTemplateMonster クーポンページも是非ご覧下さい。

TemplateMonsterより

ホームページテンプレートを使うと、ホームページテンプレート上の文字（文章）を変更するだけで、高品質のホームページを短時間で完成させることができます！
現在までに、10000以上のホームページテンプレートが公開されており、
さらに毎日、5～10個ずつのホームページテンプレートが追加されています！

Coupon　Code : 4a569bc151

• FON
  FONの公式サイトです（日本語）。
• FONが使えるプロバイダを求めて by えぴたふ blackjapanさま
  FONが使えるプロバイダについて細かく調査してまとめられています。インターネットの接続プロバイダで公式にFONの利用を許可しているところは現状ではBBエキサイトだけです。おおよそのプロバイダが規約に挙げている『第三者に対しての回線の提供を許可しない』あたりの項目に、FONは引っかかるようです。
  
• fon finder: 携帯電話で最寄りのfonルータを探す by dara日記さま
  WillcomとDocomoで快適に利用できています。
  
• PlaceEngine
  GPSでなくWiFi電波を使った位置推定サービス。クライアントソフトをノートPCやスマートフォンなどのモバイル機器にインストールすることでFON MAPとも連動します。ソニーコンピュータサイエンス研究所さま提供のベータ版サービスです。
• Free* WIFI Booster 型紙ダウンロード（PDF）
  La Foneraのアンテナは取り外してリバースSMAコネクタを持つアンテナと交換し、受信エリアを拡張できるようですが、ちょっとした紙工作でも効果があるようです（未テスト）。組み立て手順の動画はこちら
  
• BBエキサイト
  私の場合、乗り換えのポイントはFONをサポートしている点でしたが、接続するだけなら月額500円という価格も充分魅力的です。

『全国版を落として来て一発だ！』と思って全国版をエクセルで開いたところ、行数オーバーで読み込めず＞＜
都道府県別に47ファイルダウンロードし、それぞれをこのモジュールに適合させたSQLファイルに加工して、データベースに追加しました。結構な手間がかかったので、導入をご検討中の方向けに現時点（2007/1/14 現在）での最新版を公開いたします。ZenCartユーザーの方、是非ご活用下さい。

• 配布元：S-Page：郵便番号による住所入力支援モジュール by hiraさま、参画ネット 岡本さま
• 元データ：ゆうびんホームページ：住所の郵便番号のダウンロードサービス
• 郵便番号データのバージョン：平成18年12月28日 更新版
• 文字コード：ja-EUC
• 動作テスト済み環境：Zencart v1.2.0-l10n-jp-6 / MySQL 4.0.26-standard / PHP 4.3.11 (Zend: 1.3.0) / Apache 1.3.34 (Unix)

ダウンロード

postalcode_20061228.zip (zip形式 / 1,154,587 Bytes)

使用方法

1. 本ダウンロードファイルを解凍すると、郵便番号による住所入力支援モジュール用に加工された都道府県別郵便番号データのSQLファイル47個と、テーブル作成用SQLファイル CREATETABLEpostalcode.sql が生成されます。
2. まず最初にこの CREATETABLEpostalcode.sql を走らせて、データベースにテーブルを新規作成します。本ファイルのソースは以下↓
   PLAIN TEXT
   CODE:

   1. CREATE TABLE postalcode (
   2. seq int(7) NOT NULL auto_increment,
   3. postal varchar(7) NOT NULL ,
   4. pref varchar(8) NOT NULL ,
   5. city varchar(128) NOT NULL default '',
   6. town varchar(128) NOT NULL default '',
   7. PRIMARY KEY  (seq),
   8. KEY pref (pref),
   9. KEY postal (postal)
   10. ) TYPE=MyISAM;

   これでデータベースにpostalcodeという新しいテーブルが生成されます。

3. 次に都道府県別ファイルを一個ずつ47ファイル全て走らせてテーブルにデータを追加します。
4. 郵便番号による住所入力支援モジュールのReadmeファイルを参照し、既存ファイルを修正し、モジュールファイル群をサーバにアップロードします。

注意事項

• 本ダウンロードファイルの文字コードはja-EUCです。それ以外のコードをご使用の場合は、テキストエディタで文字コードを変換してからご利用下さい。
• 行政区の合併などで郵便番号に追加・変更が生じた場合は、郵政公社のホームページより差分をダウンロードし、データベースをアップデートして下さい。
• 本ダウンロードファイルは充分検証した上で自己責任の元にご利用下さい。本ファイルを利用したことによって発生した不都合の責任を当方では負いかねます。あらかじめご了承下さい。

【おまけ】差分データの更新方法

郵便番号の変更による差分ファイルには、新規追加データと廃止データがあります。新規追加データに関しては上記と同じフォーマットで、CSVファイルを加工＆実行すればOKですが、廃止分のデータをテーブルから削除する必要があります。削除するには、廃止データをダウンロードし、次のようなフォーマットでSQL文に加工し、走らせます。

データベースの更新前には必ずバックアップを取ることをおススメします。

• 配布元：Siuyee Presents...:WP Wetfloor 1.6a
• 参考：[WP:Plugin] 画像に反射効果を加えるReflection.js by AOINAさん
• 導入環境：WordPress 2.0.2

2007/1/25 修正 : 『画像の設定』 2で相対パスで画像の場所を指定するよう記載していましたが、フルパスで指定するように修正しました。

まず WP Wetfloor 適用結果から

インストール

ダウンロードファイル(zip)を解凍した内容物、wp-wetfloor.php・includesフォルダ・imagesフォルダをwp-content\plugins にアップロードし、プラグイン管理画面で有効化をクリック。

画像の設定

1. インストールが完了すると、投稿画面・テキストエディタのツールバーに下のようなアイコンが表示されます。
   
2. アイコンをクリックすると画像のパス(URI)を求められるので入力します。自サイト内の画像であれば、ブログトップページのURI以降のパスを指定し、画像の場所をhttp://~から始まるフルパスで入力し、OKをクリックします。
   
3. 映り込みの高さを％で求められるので数値のみを入力し、OKをクリックします。空欄でデフォルト値。
   
4. 透明度を％で求められるので数値のみを入力し、OKをクリックします。空欄でデフォルト値。
   
5. HTMLのソースに直に書くと次のようになります。 (rheight=高さ / ropacity=透明度 各すぐ後に％数値)
   PLAIN TEXT
   CODE:

   1. <img class="reflect rheight60 ropacity60" src="http://your_blog_domain/images/xxx.gif" />

"SOHOが選ぶ『これ、ええやん』。なんでもアリで表彰します！"と謳われ、2004年より毎年開催されているSOHO AWARD 2006の、受賞アイテムがWEB上で発表されました。WEBサイトからイベントからプロダクトから、本当になんでもアリでエントリー＆受賞されてます。受賞者されたみなさま、おめでとうございました！（及ばずながらリンクサポーターとして応援させていただきました）
http://www.soho-awards.org/awards2006/2006jyusyo.html

中で気になったのが選考委員賞を受賞した『マジックコネクト』。USBキーを挿すだけで、リモートのPCにVPN接続出来るというNTTITのプロダクトです。SOHO AWARDS受賞を記念して100社に2ヶ月無料モニタープレゼントという企画を発表されてます。これを受賞に押し上げたSOHOの人ってほとんど個人事業主だと思うんですが、モニターの対象者が法人/公共機関のみというところがちょっと残念。

ちなみにSOHO AWARDSを主催しているのは、ピーコックユニオンも加入しているJSC（日本SOHOセンター）という個人事業主の互助会で、安価な会費で個人事業主には無い福利厚生の制度を補ってくれる心強い団体です。個人事業主の方には是非おススメ。

• 配布元：Lightbox JS v2.0

導入方法

1. lightbox.jsと、lightbox.cssのimagesファイルのパスを環境に合わせて適宜修正します。（各ファイルから見たimagesフォルダの場所を指定します。http://からフルパスで記入することも可。←間違いがない。）
2. ダウンロードして解凍したディレクトリ構成のまま、サーバのルートにアップロードします。（lightbox.jsと同じフォルダにprototype.js、scriptaculous.js、effect.jsが同梱されています。既にサーバにこれらファイルがある場合はアップロードの必要はありません）
3. HTMLファイルのheadに、次の記述を追加します
   
   スタイルシートへのリンクは、既存のスタイルシートがある場合、CSSファイルの冒頭行に@importを一行追加するなどの方法があると思います。
   e.x, @import "(任意のディレクトリ)/lightbox.css";
4. リンクタグに rel="lightbox" を追加します
   PLAIN TEXT
   HTML:

   1. <a rel="lightbox" title="my caption" href="http://www.peacock-union.com/wp-content/rabi.jpg"><img alt="TrendSetter" src="http://www.peacock-union.com/wp-content/rabi.thumbnail.jpg" /></a>

   表示サンプルは↓こんな感じ。title属性で指定した値（文字列）が画像のキャプションとして表示されます。
   

スライドショーライクな表示方法

前段4でリンクタグに挿入した rel="lightbox" を rel="lightbox[roadtrip]" に変更します。

表示結果は次の通りです。↓

業務内容のページの写真撮影サンプルを、スライドショー表示にしてみました。

機能

• 入力必須項目が空欄の場合、アラートを出して入力エリアにカーソルをフォーカスします。
• 電話番号に全角文字や半角数字以外の文字が含まれていた場合、アラートを出して入力エリアにカーソルをフォーカスします。
• 電話番号が 10 桁に満たない場合、アラートを出して入力エリアにカーソルをフォーカスします。

動作サンプル

※実際送信はされません。動作はアラートで再現されます。

Java Script ソース

 function checkForm(  ){

if( document.conform.お名前.value == "" ){
alert( "お名前を入力してください" );
document.conform.お名前.focus();
return false;
}
if( document.conform.電話番号.value == "" ){
alert( "電話番号を入力してください" );
document.conform.電話番号.focus();
return false;
}
if( isTelNumber( document.conform.電話番号.value ) == false ){
document.conform.電話番号.focus();
return false;
}
if( document.conform.メールアドレス.value == "" ){
alert( "E-mailアドレスを入力してください" );
document.conform.メールアドレス.focus();
return false;
}
return true;
}

function isTelNumber( str ){

var count = 0;
var msg = "";

for( i = 0 ; i < str.length ; i ++ ){
var c = str.charAt( i );

if(  "0" <= c && c <= "9" ){
count++;
continue;
}else{
if( c == "-" ){
continue;
}
msg = "電話番号に使用できる文字は、n"+
"半角数字とハイフン(-)です。";
alert(msg);
return false;
}
}

if( count < 10 ){
msg = "電話番号の桁数が10桁未満です。n"+
"市外局番から入力してください。";
alert(msg);
return false;
}
return true;
} 

HTMLソース

メモ

このJavaScript内では変数に2バイト文字を使用しているため、JavaScriptの文字コードとHTMLの文字コードを同じにしないと動作しません＞＜
変数は半角英数字をおススメします。