３つ目の FC2ブログ用のブログテンプレート完成！
２つ目のデザインテンプレートと同様の文字サイズ変更ボタンを残しつつ「多くの方にテンプレートの簡単なカスタマイズを経験して貰おう！」をテーマに制作してみました。

結果、リンクカラーをアクセントカラーにする方向となり、他の部分をどんな色とも相性の良い無彩色でまとめてみました。
また、CSS の知識がなくてもなるべく簡単にカスタマイズに挑戦して貰えるよう、CSS 内を大掃除＆整理整頓。私が以前に制作したテンプレートの CSS よりは分かりやすくなっていると思います・・・多分。

只今、承認中です。

不承認になってしまいました・・・
理由：テンプレートのガイドラインに適合していません（外部リンク）。
FC2マニュアル をしばらく確認していなかったのですが、バックリンクがテンプレートで使用した素材サイト以外禁止になっていました。現在、詳細を FC2 へ問い合わせていますので、今回の３つ目のブログテンプレートは一時保留とさせて頂きます。

■制作メモ
文字サイズ変更ボタンの装備でせっかく prototype.js ライブラリーを使用しているので JavaScript の勉強を開始。Form 内の要素に prototype の独自機能などを利用してイベントハンドラの外部 js 化に挑戦。this の解釈が IE と Mozilla 系で違うところに苦戦。
結局 this の代わりに prototype の独自関数 $() で解決。今回書いた JavaScript コードを少しずつ効率的にすることが課題。

前回のエントリ「input に onfocus で背景色や文字を消す」や「トラックバックの１クリック」で紹介したイベントハンドラ（event handler）の一覧表です。

イベントハンドラとは JavaScript で記述された特定の処理を、ユーザーのマウス操作や特定の条件が発生した時に実行させる為の記述で HTML のタグに記述できる特殊な属性の１つです。

以下イベントハンドラ一覧表です。簡単に発生条件も記述してあります。

続きを読む ≫

検索窓やテキスト入力フォームなどの input 要素に使えるデザインの小技です。簡単な JavaScript で実装できるので皆さんも挑戦してみてはいかがでしょうか？
まずは下のサンプルをご覧ください。

カーソルを上の「サンプル検索窓」と表示されたテキストボックスに合わせクリックしてみてください。

どうでしょう？
検索窓にテキスト（文字）を入力可能な状態にすると「サンプル検索窓」と表示されていたテキストが消え、背景色が薄いグレイから白に変わったのが分かりましたか？また、選択状態を解除（他の部分をクリックで解除できます）で初期状態に戻ります。

なかなか地味な小技ですが、本当のお洒落とは地味なところで差がつくと誰かがどこかで言っていたような気がします・・・。
それはともかく、お洒落とは関係なく使い道によってはユーザビリティ（使いやすさ）も多少アップするのでは？なんて考えから、今回ご紹介させて頂くことにしました。

実はこの小技は JavaScript の onfocus と onblur を input 要素に適用して実現しています。

続きを読む ≫

S i M P L E * S i M P L E さんのページで、便利で簡単な JavaScript の小技を紹介されていました。

小技の内容は、トラックバックなどの URL を選択する際に「コピー＆ペースト」することが頻繁にあると思うのですが、その URL を1クリックで選択状態にする JavaScript です。

短いソースの追加で実装可能なので、私もこれからテンプレートに実装していこうと思います。

●サンプル（クリックしてみて下さい。）

●ソース

<input type="text" size="40" id="tb_url" value="http://hajimetedesign.blog77.fc2.com/tb.php/1-4e8384a2" onclick="this.select();" />

赤い部分のソースを既存のタグ内に追加で実装可能なので、皆さんもどうぞ。 とっくに実装済み！なんて方も、もう１度実装し直してみてはいかがでしょうか？

意味はないですが・・・

■追記 上記のソースの赤い部分 onclick はイベントハンドラの１つです。興味を持たれた方はイベントハンドラの一覧表をどうぞ。