この記事に含まれるタグ （Keyword） :
先頭に戻る テンプレート
新しい記事を書く事で広告が消せます。
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。
URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html
--/--/-- ～ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |
ページ右下などに常に 『ページ先頭に戻る』 リンクが表示されるもの。 これまで、「少しぐらい無駄な動きをしてもらう というのも逆にいいんじゃない？？」 という思いもあり、設置してはいませんでしたが．．． ちょっと遊んでみたくなり 実装してみました。
画面右端ではないですが、外枠の右下にピタッとくっついて表示されます。
Sleipnir2， Firefox3， Opera9， （IE8）， IE7， IE6， （IE5.5）， Google Chrome4 で動作確認済みです。 （IE6 と IE5.5 では ページ一番下までスライドさせた時の状態で 同じように表示されます。 色々試して... これでいいかなと。）
これだけのことをするのに かなり色々と調べたので、参考にした情報の紹介も兼ねて記事に残しておきます。 最終的な私の設定は 遊び的要素 ＞ 機能性 になっていますが、画面右下に固定 とか 枠内に表示とか．．． アレンジ次第では 使いやすいものになると思います。
常に表示される 「ページ先頭に戻る」 リンクの設定方法
共有テンプレートユーザーさん向けに、私の設定（そのまま）を紹介します。 それ以外のテンプレートでも IE7以上のブラウザ では「入れる場所さえ探せば」簡単に適応すると思いますが．．． IE6以下の設定部分は テンプレート毎に手直しが必要になると思います。
テンプレートへ追加
<div id="ttop"><a href="#top" class="page_top" onfocus="this.blur();" onclick="scrollTo(0,0); return false;" title="このページの先頭へ"></a></div>
</div><!--/id=container-->
- テンプレートの一番下辺りにある </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です。（※画像非表示 の場合も考えると、本来はテキストも入れておくのがベストだと思います。）
<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();" は不要です。 記事タイトル下のリンクは減らしてよいかもしれません。。。お好みで。
スタイルシートへ追加
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? | ↑ ページ先頭へ ↑ |いつもおせわになっております
返信始めた時におっしゃられてた
「大変そうー」が・・・ずばり命中して
返信を終了しました（笑） アメです|｡・ω・｡|
</div><!--/id=copyright-->
</div><!--/id=footer-->
<div id="ttop"><a href="#top" class="page_top" onfocus="this.blur();" onclick="scrollTo(0,0); return false;" title="このページの先頭へ"></a></div>
</div><!--/id=container-->
</div><!--/id=wrapper-->
</body></html>
</div><!--/id=container-->の上ペーストして
スタイルシートもコピペ（一番下に）したのですが 表示してくれません
助けてくださいー
あと「テンプレートの 4箇所 を変更」は
このＰＡＧＥTOPがある為 重複になるので
消してもＯＫって意味でしょうか？
それとも今回の「href="#top"」じゃないやり方に
変えたらくださいって意味でしょうか？
画像ファイル、何か入れてみてくださいね。（何も入っていませんよ～）
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;" とは動作がちょっと異なるんです。
ちょっとややこしいですが、「どちらかに統一した方が（訪問者が）分かりやすいでしょう。」 という意味です。 なので可能な場合は修正してね。ということ。。。
数はこれまでより 「ちょっと」 減らしてもいいのではということです。
♪ ∧,＿∧
(´･ω･`) )) 出来ましたーー ありがとうございますー
(( ( つ ヽ、 すみません 初歩的な所でつまづいて・・・・
〉 とノ ))) /#topの意味がわかりましたよ
（__ノ^(＿) 全部変更しちゃいました♪
また時間あるときにでも ちょっとイジッテみます画像加工
そういえば 私の横幅でかいんですよねー忘れてました
たぶんディスプレイの関係で見れない人もいるでしょうねっ
サイドバーはなんとか １７０⇒１８０⇒１９０と 大きくやりくりできましたよ！！ やはり小さすぎたので・・・▂█▀█●
paruparuさん、こんばんは！( ･∀･)ﾉぐいぶに
しっかりしたCSS解説ですねー。
おされな感じだし。
すごいッス。
勉強になります。
それから、アクセスランキングの画像の件、
教えていただき、ありがとうございます。(´▽`)♪
先ほど、50×50の画像をプロフィールでアップしたら、
ちゃんと表示されるようになりました。ヾ(*´∀｀*)ノわーい
KumaCrowさん、こんばんは！
アクセスランキング、可愛く目立っていますね～。またまた訪問者が増えちゃうかしら？？
私も、またいつか．．．KumaCrowさんのサイトと並べる 上位3枠 を狙って頑張ります！！
ページ先頭に戻る．．．早速記事にしてみましたが、私の方法はそのままで適応するテンプレートがちょっと限られちゃいますよね。。。自分用中心で考えてみました^^;
リンク、張らせていただいたので宜しくお願いします。
どうもどうもーですー
＞上のナビゲーションに トップページに戻るリンク（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 »
↑これいいなーと思い 探して設置しました。 ふふふふ♪
固定じゃないけど、↓ こんな感じで良いかと思います。
<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
も参考にどうぞ。
ﾍ⌒ヽﾌ 出来ました出来ましたー ありがとうございますー
（ ・ω・） これでカスタム終了です 後は本家に持っていって微調整です
/ ~つと） 折りたたみもありがとうー こちらのソースに変えましたー
フッター部分はたしかに重複してるなーと思い スッキリさしましたー
IE6の次にメイリオって言葉が嫌いになりそうです・・・▂█▀█●
こんばんは、はじめまして。
ページ先頭に戻る、を常に表示するのはどうすればよいのか
と検索して、こちらにたどり着きました。
なんとなく実装できました。どうもありがとうございましたー。
（IE6は、環境がないのでちょっとパスしてしまいました。。）
fc2ブログはいろいろとカスタマイズ面白そうですね。
ほかの記事も参考にさせていただきます！
コメント、ありがとうございます。 他のテンプレートでも ちゃんとキレイに
入ったことを教えてもらえると 私も何だか嬉しいです♪
FC2ブログの記事が多いですが、また遊びに来てくださいね！
追記： リンク、張って頂いたようでありがとうございます。
onclick="scrollTo(0,0); return false;" 私のテンプレでも Sleipnir と IE ではズーム機能を使ってしまうと、ちょっと変な位置に戻ってしまいます。 Firefox などでは大丈夫みたいですが．．．左右の位置を維持できないのが ちょっと問題ですよね。。。
以前はいろいろユーザーフォーラムにてありがとうざいました。
で、ユーザーフォーラムにて｢環境に合わせて画面いっぱいに｣という質問をしたのですが多分既出だったんでしょうねぇ…どなたの返答もなく削除してきました（＾＾；
結局前のテンプレを諦め共有の方からリキッドタイプで好みのテンプレを探してそれに変更しました。HTMLやCSSをいじったりしたのですが、記事の最後に「TOPへ」というのを入れたかったのですが結構HTMLもCSSも他には見ないものだったので入れることができませんでした。そしてここへたどり着きました(´▽｀)
しかしいざやってみたのですが編集してたパソコンがノートで16：9画面でいじったのですが、4：6の画面(画面の比率間違ってたらすいません)になったらページトップの画像が見えなくなってしまいました。(今日16：9画面で少しいじりましたが今のところ4：6画面での確認は出来ず)
やはりリキッドタイプだと右からの位置を決めてしまうので無理なのでしょうか？もし打開出る方法があれば教えていただけるとありがたいです…。
ちなみにテンプレは共有テンプレートの｢aquaria｣というものです
作者さんのサイトに行ってみたのですが無期限停止になっていました…(涙)
私の記事のものだと、「ある基準の位置からその位置までの左・・・」
のようなものを設定しているので リキッドタイプのテンプレート に適応させると今のような状態にやっぱりなってしまうと思います。
参考のところに載せた
「ページトップへ戻る」リンク・改 - Country Netlife
http://st0272.net/cn_blog/2009/10/post-32/
などであれば、常に画面右下 という表示になるのでそれを利用しても良いと思います。
jQuery を既に使っているようなので簡単に対応できると思います。
若しくは、単に 記事の最後に「TOPへ」 というリンクが欲しいのであれば、
<a href="#header" title="このページの先頭へ">↑ TOP ↑</a>
↑ これをその場所に入れれば良いだけです。 これを追加してレイアウトが崩れてしまうなどということは無いので ここかな？と思う場所に追加してみてはいかがでしょうか？
早速のお返事ありがとうございました。
試行錯誤の上やっと設置できました(最初はjsファイルをアップすることが解らなくて書き込みして頭混乱してました(＾＾；
明日には4：6画面で確認することができるので、どうなるか確かめておきますね。ありがとうございました。
表示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様、はじめまして。いつも参考にさせていただいている者です。
大変丁寧で詳しい解説をしてくださっているので、カスタマイズに明るくない私でも何とか設置する事が出来ました！
ありがとうございました。
IE6対策については試せる環境がないので何となく適当な数値を入れてしまいましたが、現状で大満足です。
クリックで画像が変化する仕掛けもしてあるのです☆
Qlookの詳細解析や重複タイトル回避等の他、携帯版テンプレートも使わせていただいてます。
（原型を留めない程いじってしまいすみません）
これからもお世話になりたいと思います。更新楽しみにしていますねノシ
サイト拝見させていただきました。 凄く可愛いですね！！
「先頭に戻る」も、つい無意味にクリックしてみたくなっちゃうかも。。カワイイ♪
今度 IE6 でのテストしてみますね。（もし気づいたことがあればお知らせします。）
携帯用テンプレートも 可愛くカスタマイズして使っていただけて嬉しいです。
テンプレユーザーさんリンク のページがあるのですが、是非そこで紹介させてくださいね！
とは言っても 作業が遅いのでちょっと先になるかも知れませんが。。。(^_^;)
これからも宜しくお願いします。
こんばんは。
見に来てくださったんですね！ありがとうございます、感激です☆
扱っているテーマが好き嫌い分かれるブログなので、紹介していただいちゃっていいのでしょうか、ちょっと心配で…
もう全然、気長ーに楽しみにしてますね。
こちらこそ、宜しくお願いします＾＾
リンクは URL ↓ の記事に追加させていただきました。
「紹介」なんてオーバーな表現しちゃってすみません。。。 あ、でも 携帯用では初 です。
この記事、結構見てもらっているので 他の方の参考にしてもらえたらいいなと思っています。
早速紹介していただき、有難うございました！
「画像だけたくさん見たい」という読者様が多くおられるようなので、あのようにリンク表示を外させていただいたのです。
実は先ほど、「このページのTOPへ画像をクリックしてもTOPへ戻らないのでお知恵をお貸しください」という内容のコメントを書かせていただいたのですが、たった今自己解決したので削除しました。
ソースの中の【onclick="scrollTo(0,0); return false;"】の部分を削除したところ、無事にページの一番上まで戻りました！
もし先ほどのコメントを既にご覧になっていたら申し訳ないと思ったので、念のため。。。お騒がせして申し訳ありませんでした。
このコメントは管理人のみ閲覧できます
はじめまして。 質問の件ですが... ショップのページ全部に ということですよね？
テンプレートなど 特に決まりなくカスタマイズできるのであれば 設置は可能だと思いますが、今の構造を見てみないとちょっと何とも言えないです。 ショップのアドレスを教えていただければ もう少しコメントできるかと思います。
どのページも同じような構造になっているのであれば、コピペで出来ると思うのですが。。
はじめまして。
このサイトを参考につけさせて貰ったのですが
「外枠の右下にピタッって表示する方法」が上手くいかず
ブラウザーのサイズを変えると違う位置にいってしまうんです。
このサイトにあるようにピタって固定するにはどうしたらよろしいのでしょうか。
もしよかったら教えて下さい。
ブログはライブドアブログを使っています。
このコメントは管理人のみ閲覧できます
はじめまして。 サイズを変えるとずれてしまう件、
私もテストしてみたのですが... スミマセン上手く表示させる方法が見つかりませんでした。
何となく、左にあるアクセス解析のボタン用の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様ありがとうございます。至れり尽くせりで涙が出そうです。
アドバイス参考にして、ブログの方もちょっと直してまた覗きにきたいと思います。
ホームページリニューアル中にここを見つけて使おうと思っているのですが、lightboxのような写真表示のjavascriptと一緒だとうまく動作しないようなのですが、javaを使っているページでも動作する方法はあるでしょうか？
javaを使っていないページではうまく動作しています。
＞ lightboxのような写真表示のjavascriptと一緒だとうまく動作しない
写真表示のjavascript は種類が多いので、それにもよると思いますが、関連しているのかもしれないですね。。 私も jQuery lightBox を使っていますが、それでは問題なく動くみたいです。
jQuery lightBox グループ化を操る3つの方法http://arinogotokuatumarite.blog19.fc2.com/blog-entry-142.html
先頭に戻る を実装する方法は scrolltopcontrol.js 他、色々あると思いますので干渉しないものを探すか、今使っているもののソースを1つずつ見直すかしかないかもしれません。。
コメントを投稿する 記事: 右下に 「ページ先頭に戻る」 リンクを常に表示
お気軽にコメントをどうぞ。
ソースコード等の < と > は （実態参照に変換されるので） そのまま使ってOKです。 & は 全角 に変えて使ってください。
![【送料無料】0さいー4さい こどもずかん (4冊セット)英語つき [よしだじゅんこ]](http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d80x80)
共有テンプレート PC用：3作， スマートフォン用：3作， 携帯用：2作 を公開しています。
-27 Comment