右下に「ページ先頭に戻る」リンクを常に表示【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

右下に「ページ先頭に戻る」リンクを常に表示

2010/03/08 (月) カテゴリー： FC2共有テンプレート

ページ右下などに常に『ページ先頭に戻る』リンクが表示されるもの。これまで、「少しぐらい無駄な動きをしてもらうというのも逆にいいんじゃない？？」という思いもあり、設置してはいませんでしたが．．．ちょっと遊んでみたくなり実装してみました。

画面右端ではないですが、外枠の右下にピタッとくっついて表示されます。
Sleipnir2， Firefox3， Opera9，（IE8）， IE7， IE6，（IE5.5）， Google Chrome4 で動作確認済みです。（IE6 と IE5.5 ではページ一番下までスライドさせた時の状態で同じように表示されます。色々試して... これでいいかなと。）

これだけのことをするのにかなり色々と調べたので、参考にした情報の紹介も兼ねて記事に残しておきます。最終的な私の設定は遊び的要素＞機能性になっていますが、画面右下に固定とか枠内に表示とか．．．アレンジ次第では使いやすいものになると思います。

常に表示される「ページ先頭に戻る」リンクの設定方法

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

テンプレートへ追加

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

※ari_seoシリーズでは「ページ先頭に戻るリンク」は単に　href="#top"　だけを設定しています。今回、この上のソースを使うのであれば、他の部分も同じように変更するのが自然だと思うので、探せる方はテンプレートの 4箇所を変更してください。

~~<a href="#top" title="このページの先頭へ"> ↑ </a>~~　場所？
<a href="#top" onclick="scrollTo(0,0); return false;" title="このページの先頭へ">↑ ページ先頭へ ↑</a>　場所？
<a href="#top" onclick="scrollTo(0,0); return false;" title="このページの先頭へ">↑ ページ先頭へ ↑</a>　場所？
<a href="#top" onclick="scrollTo(0,0); return false;" title="このページの先頭へ">↑ ↑ ↑</a>　場所？

↑ この4箇所では　onfocus="this.blur();"　は不要です。記事タイトル下のリンクは減らしてよいかもしれません。。。お好みで。

スタイルシートへ追加

#ttop {
position:fixed;
bottom:100px;
left:auto;
margin:0 0 0 904px;   /* マージン：上右下左 */
width:41px;
height:390px;
background:url(http://・・・・・/t_ptop.png) no-repeat left bottom;
}
/* IE6以下用 */
* html #ttop {
margin:0 0 -390px 0;
position:relative;
bottom:490px;   /* 上で設定した ttopの高さ390px＋下100px */
left:904px;
}
#ttop:hover {
background-position:0 230px;   /* 画像の高さによって適当に調整 */
}
a.page_top {
display:block;
width:41px;
height:390px;
}

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

私の設定での欠点

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

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

[ 参考：ブログが作りたい！「ページの先頭へ戻る」の常駐表示：CSS小技 ]
[ 参考： Snow*Materia　expression() > 仮想-position:fixed ]
[ 参考：「ページトップへ戻る」リンク・改 - Country Netlife ] jQuery
[ 参考： HIMAJIN-JavaScript　リンク画像を右下に固定 ] javascript
[ 参考： IE6でmin-widthを実装する方法のまとめ - Webtech Walker ]

[ 関連： CSSハックを使わずIEのバグに対処する方法 - ［ホームページ作成］All About ]

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

キーワード検索：先頭に戻るテンプレート

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-116.html

2010/03/08 ～ | Comment (27) tweet? | ↑ ページ先頭へ ↑ |

@arinogotoku

paruparu (arinogotoku) on Twitter
ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

CATEGORY : テンプレ・FC2マニア » FC2共有テンプレート

この前の記事： FC2ブログ仕様変更に伴う、ソース修正のお願い
この次の記事：共有テンプレートサポート専用窓口（2）

27 Comment

いつもおせわになっております
返信始めた時におっしゃられてた
「大変そうー」が・・・ずばり命中して
返信を終了しました（笑）　アメです|｡・ω・｡|

</div>
</div>
<div id="ttop"><a href="#top" class="page_top" onfocus="this.blur();" onclick="scrollTo(0,0); return false;" title="このページの先頭へ"></a></div>
</div>
</div>
</body></html>

</div>の上ペーストして
スタイルシートもコピペ（一番下に）したのですが　表示してくれません
助けてくださいー

あと「テンプレートの 4箇所を変更」は　
このＰＡＧＥTOPがある為　重複になるので
消してもＯＫって意味でしょうか？
それとも今回の「href="#top"」じゃないやり方に
変えたらくださいって意味でしょうか？

ｱﾒ | 2010/03/09 (火)　[ 編集 ] No.339

アメさん!! ははは^^

画像ファイル、何か入れてみてくださいね。（何も入っていませんよ～）
http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/t_ptop.png
とりあえずこれ入れれば表示出来ますが、（↑ この画像は私の気分で変えるかもしれないので）以降はDLしたものか、何か別の画像を入れてみてください。
ちょっと説明不足のところがあったかもしれないので、記事補足しておきます。
アメさんのサイトは幅が広いので、位置修正したければまたコメントください。

共有テンプレートにはデフォルトで 4箇所
<a href="#top" title="このページの先頭へ">　としてある部分があって、このままでも問題はないのですが、このリンクを使ってページ先頭に戻ったものは
://arinogotokuatumarite.blog19.fc2.com/#top
のようなアドレスになります。履歴が残るものなので、ブラウザの「戻る」を押すと、そのクリックした位置に戻ることになるので．．．
onclick="scrollTo(0,0); return false;"　とは動作がちょっと異なるんです。

ちょっとややこしいですが、「どちらかに統一した方が（訪問者が）分かりやすいでしょう。」という意味です。なので可能な場合は修正してね。ということ。。。

数はこれまでより「ちょっと」減らしてもいいのではということです。

paruparu | 2010/03/09 (火)　[ 編集 ] No.341

♪　 ∧,＿∧
　　 (´･ω･`) ))　　　　出来ましたーー　ありがとうございますー
　(( (　つ　ヽ、　　　　　すみません　初歩的な所でつまづいて・・・・
　　　〉とノ　)))　　　　　/#topの意味がわかりましたよ
　　（__ノ^(＿)　　　　　全部変更しちゃいました♪

また時間あるときにでも　ちょっとイジッテみます画像加工

そういえば　私の横幅でかいんですよねー忘れてました
たぶんディスプレイの関係で見れない人もいるでしょうねっ
サイドバーはなんとか　１７０⇒１８０⇒１９０と　大きくやりくりできましたよ！！　やはり小さすぎたので・・・▂█▀█●

ｱﾒ | 2010/03/09 (火)　[ 編集 ] No.342

CSSで「ページ先頭に戻る」

paruparuさん、こんばんは！( ･∀･)ﾉぐいぶに

しっかりしたCSS解説ですねー。
おされな感じだし。

すごいッス。
勉強になります。

それから、アクセスランキングの画像の件、
教えていただき、ありがとうございます。(´▽`)♪

先ほど、50×50の画像をプロフィールでアップしたら、
ちゃんと表示されるようになりました。ヾ(*´∀｀*)ノわーい

KumaCrow | 2010/03/09 (火)　[ 編集 ] No.343

またまた目立っちゃいますね♪

KumaCrowさん、こんばんは！
アクセスランキング、可愛く目立っていますね～。またまた訪問者が増えちゃうかしら？？
私も、またいつか．．．KumaCrowさんのサイトと並べる上位3枠を狙って頑張ります！！

ページ先頭に戻る．．．早速記事にしてみましたが、私の方法はそのままで適応するテンプレートがちょっと限られちゃいますよね。。。自分用中心で考えてみました^^;
リンク、張らせていただいたので宜しくお願いします。

paruparu | 2010/03/09 (火)　[ 編集 ] No.344

どうもどうもーですー
＞上のナビゲーションにトップページに戻るリンク（HOME）を入れることは・・・
この件断ったのですが・・・　ナビじゃなく　この記事の「△△PEGETOP」　みたいな
ブログ横に設置してはどうかなーと思いまして
試してみたのですが・・・・
IE6で　すごく　ズレまくりで　断念しました
お助けください　

こんな感じにしたいのですが
http://blog-imgs-34.fc2.com/a/m/e/ametodark/CAP0329-01.jpg
ホーム◎　◎いらないよねー　家のマークですよね？
http://blog-imgs-29.fc2.com/a/m/e/ametoaa/t_phome01.gif
またテストブログです　現在　失敗した　「ホーム◎」は撤去しています
http://ametodark.blog52.fc2.com/

記事カテゴリー
List OPEN »
↑これいいなーと思い　探して設置しました。　ふふふふ♪

アメ | 2010/03/29 (月)　[ 編集 ] No.398

アメさんへ

固定じゃないけど、↓ こんな感じで良いかと思います。

<div class="t_left" style="position:relative; left:904px; width:41px; margin-bottom:-150px"><a href="./"><img src="http://blog-imgs-29.fc2.com/a/m/e/ametoaa/t_phome01.gif" width="41" height="150" alt="ホーム" title="トップページへ" /></a></div>

<div id="content">　← この直前に入れてください。

あと、フッター部分メイリオで見るとはみ出しているので、「ありのごとく」の画像は入れずに、文字数ももう少し減らした方が良いと思います。
この部分のリンクとか．．．普通の規約通りのリンクだけ残せばいいですよー

それと、List OPEN のスクリプト（本体）は1つだけで機能します。
私が使っているものはちょっと手を加え、スクリプトOFFでも閲覧できるものなので．．．
http://arinogotokuatumarite.blog19.fc2.com/?mode=edit&rno=104
も参考にどうぞ。

paruparu | 2010/03/29 (月)　[ 編集 ] No.400

　ﾍ⌒ヽﾌ　　出来ました出来ましたー　ありがとうございますー
（　・ω・）　　　これでカスタム終了です　後は本家に持っていって微調整です
/ ~つと）　　　　折りたたみもありがとうー　こちらのソースに変えましたー

フッター部分はたしかに重複してるなーと思い　スッキリさしましたー
IE6の次にメイリオって言葉が嫌いになりそうです・・・▂█▀█●

アメ | 2010/03/29 (月)　[ 編集 ] No.402

はじめまして！

こんばんは、はじめまして。
ページ先頭に戻る、を常に表示するのはどうすればよいのか
と検索して、こちらにたどり着きました。
なんとなく実装できました。どうもありがとうございましたー。
（IE6は、環境がないのでちょっとパスしてしまいました。。）
fc2ブログはいろいろとカスタマイズ面白そうですね。
ほかの記事も参考にさせていただきます！

memo | 2010/04/07 (水)　[ 編集 ] No.432

memoさん、はじめまして！

コメント、ありがとうございます。他のテンプレートでもちゃんとキレイに
入ったことを教えてもらえると私も何だか嬉しいです♪
FC2ブログの記事が多いですが、また遊びに来てくださいね！

追記：リンク、張って頂いたようでありがとうございます。
onclick="scrollTo(0,0); return false;" 私のテンプレでも Sleipnir と IE ではズーム機能を使ってしまうと、ちょっと変な位置に戻ってしまいます。 Firefox などでは大丈夫みたいですが．．．左右の位置を維持できないのがちょっと問題ですよね。。。

paruparu | 2010/04/07 (水)　[ 編集 ] No.433

お久しぶりです

以前はいろいろユーザーフォーラムにてありがとうざいました。

で、ユーザーフォーラムにて｢環境に合わせて画面いっぱいに｣という質問をしたのですが多分既出だったんでしょうねぇ…どなたの返答もなく削除してきました（＾＾；
結局前のテンプレを諦め共有の方からリキッドタイプで好みのテンプレを探してそれに変更しました。HTMLやCSSをいじったりしたのですが、記事の最後に「TOPへ」というのを入れたかったのですが結構HTMLもCSSも他には見ないものだったので入れることができませんでした。そしてここへたどり着きました(´▽｀)

しかしいざやってみたのですが編集してたパソコンがノートで16：9画面でいじったのですが、4：6の画面(画面の比率間違ってたらすいません)になったらページトップの画像が見えなくなってしまいました。(今日16：9画面で少しいじりましたが今のところ4：6画面での確認は出来ず)
やはりリキッドタイプだと右からの位置を決めてしまうので無理なのでしょうか？もし打開出る方法があれば教えていただけるとありがたいです…。

ちなみにテンプレは共有テンプレートの｢aquaria｣というものです
作者さんのサイトに行ってみたのですが無期限停止になっていました…(涙)

やめっち | 2010/07/18 (日)　[ 編集 ] No.616

やめっちさんへ

私の記事のものだと、「ある基準の位置からその位置までの左・・・」
のようなものを設定しているのでリキッドタイプのテンプレートに適応させると今のような状態にやっぱりなってしまうと思います。

参考のところに載せた
「ページトップへ戻る」リンク・改 - Country Netlife
http://st0272.net/cn_blog/2009/10/post-32/
などであれば、常に画面右下という表示になるのでそれを利用しても良いと思います。
jQuery を既に使っているようなので簡単に対応できると思います。

若しくは、単に記事の最後に「TOPへ」というリンクが欲しいのであれば、
<a href="#header" title="このページの先頭へ">↑ TOP ↑</a>
↑ これをその場所に入れれば良いだけです。これを追加してレイアウトが崩れてしまうなどということは無いのでここかな？と思う場所に追加してみてはいかがでしょうか？

paruparu | 2010/07/18 (日)　[ 編集 ] No.618

ありがとうございます

早速のお返事ありがとうございました。
試行錯誤の上やっと設置できました(最初はjsファイルをアップすることが解らなくて書き込みして頭混乱してました(＾＾；

明日には4：6画面で確認することができるので、どうなるか確かめておきますね。ありがとうございました。

やめっち | 2010/07/19 (月)　[ 編集 ] No.619

やめっちさんへ

表示OK・・・と思ったのですが、今の状態はちょっとマズイかもしれません。
DOCTYPE が 2つ， jQuery が 3つ（実際には2つ）など重複して設定されています。

1．まず、DOCTYPE はテンプレートの一番上に設定済みですので、2つ目の
<!DOCTYPE html PUBLIC ～省略>　と　<html xmlns ～省略>　を削除してください。

2．jQuery本体も1つでOKです。お使いのテンプレートには元々 jQuery本体＋CSS Selector Engine をセットしたもの？ を作者さんのファイルサーバーから読み込んでいるようですので、今回追加した以下の記述は不要だと思います。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blog-imgs-46.fc2.com/m/c/o/mcott/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js">
/***中略 ***/
</script>
ちなみにこの 2つ目3つ目は FC2ブログでは存在しないパス（追記： FC2ブログのファイルサーバーではファイル名にドットが入ったものは使えません）なので実際には無効だとは思いますが．．．余計なものは入れないほうが良いと思います。

3．<script type="text/javascript" src="http://blog-imgs-46.fc2.com/m/c/o/mcott/scrolltopcontrol.js"></script>
この設定は jQuery本体より下の位置に配置しないと多分機能しないので、 ↑ 2. のものを削除したら、テンプレートで元々設定している jquery.js のすぐ下に移動してください。

必ずバックアップをとってから作業してください。

paruparu | 2010/07/20 (火)　[ 編集 ] No.620

paruparu様、はじめまして。いつも参考にさせていただいている者です。

大変丁寧で詳しい解説をしてくださっているので、カスタマイズに明るくない私でも何とか設置する事が出来ました！
ありがとうございました。

IE6対策については試せる環境がないので何となく適当な数値を入れてしまいましたが、現状で大満足です。
クリックで画像が変化する仕掛けもしてあるのです☆

Qlookの詳細解析や重複タイトル回避等の他、携帯版テンプレートも使わせていただいてます。
（原型を留めない程いじってしまいすみません）

これからもお世話になりたいと思います。更新楽しみにしていますねノシ

AZu. | 2011/01/14 (金)　[ 編集 ] No.891

AZu.さん、はじめまして！

サイト拝見させていただきました。凄く可愛いですね！！
「先頭に戻る」も、つい無意味にクリックしてみたくなっちゃうかも。。カワイイ♪
今度 IE6 でのテストしてみますね。（もし気づいたことがあればお知らせします。）

携帯用テンプレートも可愛くカスタマイズして使っていただけて嬉しいです。
テンプレユーザーさんリンクのページがあるのですが、是非そこで紹介させてくださいね！
とは言っても作業が遅いのでちょっと先になるかも知れませんが。。。(^_^;)

これからも宜しくお願いします。

paruparu | 2011/01/14 (金)　[ 編集 ] No.892

こんばんは。
見に来てくださったんですね！ありがとうございます、感激です☆

扱っているテーマが好き嫌い分かれるブログなので、紹介していただいちゃっていいのでしょうか、ちょっと心配で…

もう全然、気長ーに楽しみにしてますね。
こちらこそ、宜しくお願いします＾＾

AZu. | 2011/01/17 (月)　[ 編集 ] No.902

AZu.さんへ

リンクは URL ↓ の記事に追加させていただきました。
「紹介」なんてオーバーな表現しちゃってすみません。。。あ、でも携帯用では初です。
この記事、結構見てもらっているので他の方の参考にしてもらえたらいいなと思っています。

paruparu | 2011/01/17 (月)　[ 編集 ] No.904

ありがとうございました

早速紹介していただき、有難うございました！
「画像だけたくさん見たい」という読者様が多くおられるようなので、あのようにリンク表示を外させていただいたのです。

実は先ほど、「このページのTOPへ画像をクリックしてもTOPへ戻らないのでお知恵をお貸しください」という内容のコメントを書かせていただいたのですが、たった今自己解決したので削除しました。
ソースの中の【onclick="scrollTo(0,0); return false;"】の部分を削除したところ、無事にページの一番上まで戻りました！

もし先ほどのコメントを既にご覧になっていたら申し訳ないと思ったので、念のため。。。お騒がせして申し訳ありませんでした。

AZu. | 2011/01/18 (火)　[ 編集 ] No.914

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- | 2011/04/18 (月)　 No.1011

非公開コメント Uさんへ

はじめまして。質問の件ですが... ショップのページ全部にということですよね？
テンプレートなど特に決まりなくカスタマイズできるのであれば設置は可能だと思いますが、今の構造を見てみないとちょっと何とも言えないです。ショップのアドレスを教えていただければもう少しコメントできるかと思います。
どのページも同じような構造になっているのであれば、コピペで出来ると思うのですが。。

paruparu | 2011/04/19 (火)　[ 編集 ] No.1015

外枠の右下にピタッって表示する方法

はじめまして。

このサイトを参考につけさせて貰ったのですが

「外枠の右下にピタッって表示する方法」が上手くいかず
ブラウザーのサイズを変えると違う位置にいってしまうんです。

このサイトにあるようにピタって固定するにはどうしたらよろしいのでしょうか。
もしよかったら教えて下さい。
ブログはライブドアブログを使っています。

メロン | 2011/05/27 (金)　[ 編集 ] No.1033

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- | 2011/05/27 (金)　 No.1034

メロンさんへ

はじめまして。サイズを変えるとずれてしまう件、
私もテストしてみたのですが... スミマセン上手く表示させる方法が見つかりませんでした。

何となく、左にあるアクセス解析のボタン用のCSS が関係しているような気はするのですが... ちょっと見ただけでは見つけられなかったのであくまでも予測です。

No.1034 のコメントに書かれているように、今の状態で使うなら別の方法を使うしかないかもしれません。。お力になれず申し訳ありません。

それで、別件ですが Firefox などで見た時にセレクトメニュー部分（プルダウン）の横幅が指定されていないため枠からはみ出してしまっているようなので、横幅をスタイルシートで 160px 程度に固定しておいた方が良いのではないかと思いました。
http://www.tagindex.com/stylesheet/form/width_height.html

↓ 今の状態だとこんな見え方になっています。参考まで。
http://blog-imgs-44.fc2.com/a/r/i/arinogotokuatumarite/comment_melon.png

あと、スタイルシートの中でコメントを使う場合には  ではなく、
/* (コメントの中身) */ を使うので変更しておいた方が良いかと思います。
http://allabout.co.jp/gm/gc/23866/2/

paruparu | 2011/05/28 (土)　[ 編集 ] No.1035

わー

paruparu様ありがとうございます。至れり尽くせりで涙が出そうです。
アドバイス参考にして、ブログの方もちょっと直してまた覗きにきたいと思います。

メロン | 2011/05/28 (土)　[ 編集 ] No.1036

javaと一緒じゃダメですか？

ホームページリニューアル中にここを見つけて使おうと思っているのですが、lightboxのような写真表示のjavascriptと一緒だとうまく動作しないようなのですが、javaを使っているページでも動作する方法はあるでしょうか？
javaを使っていないページではうまく動作しています。

takehiko | 2011/06/30 (木)　 No.1063

takehikoさんへ

＞ lightboxのような写真表示のjavascriptと一緒だとうまく動作しない

写真表示のjavascript は種類が多いので、それにもよると思いますが、関連しているのかもしれないですね。。私も jQuery lightBox を使っていますが、それでは問題なく動くみたいです。

jQuery lightBox　グループ化を操る3つの方法http://arinogotokuatumarite.blog19.fc2.com/blog-entry-142.html

先頭に戻るを実装する方法は scrolltopcontrol.js 他、色々あると思いますので干渉しないものを探すか、今使っているもののソースを1つずつ見直すかしかないかもしれません。。

paruparu | 2011/07/01 (金)　[ 編集 ] No.1064