ページ内リンクをスクロールで魅せる JavaScript

今日はページ内のリンクをスムーズにスクロールさせる JavaScript のご紹介です。

多くの Web ページの下の方に「ページのトップに戻る」なんてリンクがあります。通常はクリックするとページの先頭に「ドン！」と一瞬にして戻りますが、今回の JavaScript を使用することで「シュルルルルル〜♪」とページの先頭に戻ると言うアクションに視覚効果を与えられます。

ユーザビリティの向上にも繋がりますし、簡単に導入できるので試してみてはいかがでしょうか？

それでは早速どのような代物か JavaScript のサンプルページで実際の動きをご確認ください。

いかがでしたでしょうか？

この Smooth scrolling を導入してみよう！と言う方は続きをどうぞ。

タグクラウドの簡単なCSSでの作り方

CSS でタグクラウド作りました。

既に FC2ブログにはユーザータグを簡単にタグクラウドに変身させるプラグインがあったのですが、ソースを表示させた時に JavaScript が HTML 内にガーーーっと書かれているのが、なんとなく気になったので CSS だけで作れないかな？なんて思いから生まれたタグクラウドです。

CSS だけで作ったので機能はシンプル（お粗末）ですが、HTML には最低限しかソースを増やさずにタグクラウドを設置できますよ。

つまり SEO 的に多少メリットがある・・・のかな？

FC2ブログを使用中の方、もし宜しかったら「タグクラウドの簡単な CSS での作り方」でシンプルなタグクラウド作ってみませんか？
※ブログの記事数（タグの使用回数）が多い方は、この先を読む前に何が書かれていても怒らないと約束できる方だけどうぞ。

Osaka font アンチエイリアス OFF でも奇麗に使う for OSX

上の図を見て「ピン」とか「！」マークとかでた方は続きをお読みください。

ワンランク上のおっさんはお洒落なメール＠アドレスアイコンをサラリと１０秒で作れるぅーー！

前々から他の方のブログを夜な夜なカサコソカサコソとドラミちゃんが嫌いな虫のように徘徊していると、Gメールなどのメールアドレスのアイコンがプロフィールの下に貼ってあるのが気になっていたので今回ちょっと調べてみました。

すると、記事のタイトルにある通り、お洒落なメール＠アドレスアイコンをサラリと１０秒で作れることが判明。別にワンランク上のおっさんじゃなくても大丈夫ですが、興味のある方はワンランク上を目指すおっさんのような気持ちでどうぞ。

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

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

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

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

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

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