Home > FC2ブログ > basic_white > basic_whiteテンプレート ホーム・下部・隣の記事等にページ移動するボタンを設置

basic_whiteテンプレート ホーム・下部・隣の記事等にページ移動するボタンを設置

 basic_whiteテンプレートの右下に固定表示されているページトップに移動するボタン(リンク)にフッターやホーム、隣の記事に移動するボタンを追加する方法です。

コードを作成する

 必要な項目を選択してコードを指定の場所に貼り付けてください。必要ない項目はチェックを外します。「右端に寄せる」をチェックするとウインドウの右端にくっつくようにして配置されます。

順番表示

■HTML

■スタイルシート

 

 

 

 設置した後で色やサイズを変更する時はスタイルシートのみ上書きしてください。

変更手順

1:HTML

 変更場所はCtrl+Fキーで『animate』を検索。

jQuery( "#pagetop" ).click(function() {
  jQuery("body, html").animate({scrollTop: 0}, 800);
  return false;
});

 上記を丸ごと以下に変更。

jQuery("#pagetop").find(".scroll_top,.scroll_footer,.scroll_form").click(function() {
  jQuery("body, html").animate({
  scrollTop: jQuery(this.href.replace(/^.*#/,'#')).offset().top}, 600);
  return false;
});

2:HTML

 変更場所はCtrl+Fキーで『id="pagetop』を検索。以下の部分を作成したコードと入れ替え。

<div id="pagetop"><a href="#container" title="<%template_go_top>"><%template_go_top></a></div>

↓変更

作成したHTMLのコード

3:スタイルシート

 変更場所はCtrl+Fキーで『fixed』を検索。以下の部分を作成したスタイルシートのコードと丸ごと入れ替え。

#pagetop {
  position: fixed;
  right:200px;
  bottom:50px;
  z-index: 100;
}
#pagetop a {
  display: block;
  width: 58px;
  height: 58px;
  background: #EEEEEE url(http://blog-imgs-43.fc2.com/t/e/m/templates/page_top.png) no-repeat 13px 13px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  opacity: 0.7;
  filter: alpha(opacity=70);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#pagetop a:hover {
  opacity: 1;
  background-position:13px -48px;
}

 以上で完成です。使用されている画像(basic_white_tpage_top.png)はご自身のブログにアップロードしてご利用ください。こちらで用意した画像にアクセスできなくなった時に表示されなくなります。

 このリンク(basic_white_tpage_top.png)を右クリックしてリンク先の画像を保存&アップロード。

background: #aaaaaa url(アップロードしたファイルのアドレス) no-repeat 4px 6px

位置の調整

 「right:数字px;」「bottom:数字px;」の数字を変更すると位置が変わります。

#pagetop {
  position: fixed;
  right:50px; /* 右端からの距離 */
  bottom:30px; /* 下からの距離 */

 上記のように変更すると右から50px、下から30pxの位置に表示されます。

背景色の変更

 「background: #●●●●●●」の値を変更すると色が変わります。

background: #●●●●●● url(http://blog-imgs-59.fc2.com/f/c/2/fc2blogtemplates/basic_white_tpage_top.png) no-repeat 4px 6px;

 「background-color: #●●●●●●」の値がカーソルを重ね合わせた時の背景色になります。

ページ上部に移動する時の速度を速くする

HTML

scrollTop: jQuery(this.href.replace(/^.*#/,'#')).offset().top}, 600);

 「600」の数値を「400」などに減らすとページ上部に速く移動します。逆に増やせばゆっくり移動します。数値には半角数字を指定してください。

画像の代わりにテキストを表示

 テキストで表示したい「home/prev/next/footer/form」各項目のスタイルに「text-indent: 0; text-align: center; background-image: none;」を追加します。

スタイルシート

#pagetop .scroll_home {
  text-indent: 0; text-align: center; background-image: none;
  background-position: 4px -320px;
}

 上記のようにするとHOMEの文字が表示されます。

カーソルを重ねた時のツールチップ文字を変更

HTML

 下記のようにするとHOMEアイコンにカーソルを重ねた時に「ホームに戻る」が表示されます。

<a href="./" title="ホームに戻る" class="scroll_home">HOME</a>

 中のテキストを変更すると画像の代わりにテキストを表示した際の文字が変わります。

<a href="./" title="ホームに戻る" class="scroll_home">ホーム</a>

関連記事
スポンサー リンク
コメント
#97 : No title
ありがとうございます。

無事できたんですが、ボタンの色が何故かメチャメチャ薄いんです。カーソルを合わせるとちゃんと色が変わるんですが、通常のボタンは意識して見ないと気付かないレベル。

「background: #EEEEEE url(http://blog-imgs-43.fc2.com/t/e/m/templates/page_top.png) no-repeat 13px 13px;」の部分に、自分がアップした画像のURLを貼り直せばいいんですよね?どっか自分が設定を間違えたのかなーと。

あとできれば、最初からボタンの色が鮮やかなままだと嬉しいです。カーソルを合わせたら色が変わらなくてもいいので。
#99 : 丸ごと入れ替え
コンバンハ。
3:スタイルシートは該当部分を“丸ごと入れ替え”です。
plginのすぐ上に“元からある"pagetop部分”がまだ残っていると思われますのでそれを削除してください。
「#pagetop a {~}」「#pagetop a:hover {}」
追加したコードが下にある元のコードに上書きされて無効になっている状態だと思います。
#101 : No title
#99
そこを削除することで無事解決いたしました!
お騒がせしましたです~
#191 : No title
ありがとうございます。
無事できたのですが、表示が若干崩れてしまいました。何かやってしまったでしょうか?
お助け下さい。
http://gakukansetuchiryou.blog.fc2.com/
#192 : #191:崩れ
コンニチハ。
テンプレートに追加した最新トラックバックの下にある(サイドバー最下部)広告の</div>が不足しているようです。<!--/sidemenu-->の前に</div>をもう一つ追加してみてください。

<div align="center"><a href="~
(広告省略)
</div>

</div><!--/sidemenu-->
#213 : No title
ありがとうございます!言われた通りにしたらできました!いつも大変参考になっています。
#256 : No title
画像が切れてて残念です。
可能ならば、是非画像をお願いしたいのです。
なぜか、私がやると上手く行かない(涙)
#360 : No title
上下ボタンは表示されるのですが、HOMEボタンが表示されません。なにが原因なのでしょうか。
#361 : No title
#360です。
こちらの勘違いで、正常に表示されました。申し訳ありませんでした。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered