はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

祝!3つ目の FC2 ブログテンプレート完成!

2007/08/29 Wed [Edit]

3つ目のデザインブログテンプレート

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

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

只今、承認中です。

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

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

スポンサーサイト

イベントハンドラ一覧表

2007/07/11 Wed [Edit]

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

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

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

続きを読む ≫

input に onfocus で背景色や文字を消す

2007/07/09 Mon [Edit]

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


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

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

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

実はこの小技は JavaScriptonfocusonblurinput 要素に適用して実現しています。

続きを読む ≫

トラックバックの1クリック

2007/03/20 Tue [Edit]

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

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

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

●サンプル(クリックしてみて下さい。)

●ソース

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

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

意味はないですが・・・

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

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。