先頭に戻る 【 ありのごとくあつまりて 】

共有テンプレートユーザーさん向けに、私の設定（そのまま）を紹介します。 それ以外のテンプレートでも IE7以上のブラウザ では「入れる場所さえ探せば」簡単に適応すると思いますが．．． IE6以下の設定部分は テンプレート毎に手直しが必要になると思います。

テンプレートへ追加

• テンプレートの一番下辺りにある </div><!--/id=container--> の真上に入れます。（※ari_seoシリーズ の場合です。 その他の場合は、適応する場所を探す...etc）
• href="#top"　は javascript OFF の場合用です。 通常のリンクを入れておきます。
• onfocus="this.blur();"　は入れなくてもOKですが、クリックした後に 点線 が残るのが気になるので... フォーカスが当たらないようにしています。
• onclick="scrollTo(0,0); return false;"　このようにしておくと、javascript ON の状態の場合、ページ先頭に戻る動作の 「履歴」 が残らない （閲覧しているページのアドレスが 「ページ先頭に戻る」 をしても変わらない） 状態になります。
• <a> </a> の間には テキスト を追加してもOKです。（※画像非表示 の場合も考えると、本来はテキストも入れておくのがベストだと思います。）

スタイルシートへ追加

• 赤文字部分 が IE6以下では反映されない設定です。 ■色文字部分 は WinIE4～6、MacIE4～5用 の設定になるので、それ以外のブラウザには影響しません。
• IE6 などでのテスト環境が無い場合は、設定が難しいかもしれないので．．．
  * html #ttop { display:none; }　だけ設定して、IE6以下 ではその範囲を 表示しないようにしちゃうというのも簡単です。（今回は オマケ的な機能 だと思うので）
• 画像は何でもOKです。（芋虫とかでも可愛い!?）　私の使っている 画像 を使いたい方は DLして加工するなりご自由にどうぞ。 左側の 白（#ffffff）部分を 透過処理 しています。
• 私の使用している画像は 横41px × 縦150px です。 width と height には 使用する画像サイズ以上 を設定してください。

私の設定での欠点

• 左利き（左マウス操作）の方には使いづらい。（･･･と言う以前に、サイト全体が「右利き仕様」です。 左利きの方、ごめんなさい。。。）
• 画面サイズ（ビューサイズ） が小さい状態では このリンクを使えない。 min-width（最小幅） などを設定する方法も考えましたが、不必要に横スクロールバーが表示されるのもイマイチな気がしたので．．．設定せず。

参考にさせてもらったサイト，他

こういうものを使う際、悩みどころは 「IE6以下への対応」 をどの程度にしようかってことですよね。。。私は、IE6以下では単にページ下に表示 という方法を選びましたが、同じようにしたいという場合、CSSハックや条件分岐，javascript などを上手く組み合わせると、色々な方法が見つかりそうです。