そらいろくらげが浮き輪で海に浮いているイラスト

スクロールすると現れるトップへ戻るボタンを、FC2ブログに設置する

毎日ひっそりとブログを改良しています。今回は、”TOPへ戻るボタン”を設置します。

TOPへ戻るボタンは、長い記事やトップページの記事一覧を多く表示させているときに非常に便利です。ぽちっと押せばすっと一番上に戻ってくれます。
今回は、最近いろんなブログでよく見かける、画面をスクロールすると現れてすーっと滑らかなに動いてくれるものに変えることにします。

ただし、FC2のプラグインにはないのでGoogle先生にすがってみたところ、jQeryで動かせるものを見つけました。

jQuery:各ページのトップにぬるぬるっと戻るボタンを設置する 

引用元:jQuery:各ページのトップにぬるぬるっと戻るボタンを設置する

jQueryとは、Javascriptというwebアプリを動かすプログラミング言語のライブラリです。と言われてもなんのこっちゃですが、要するに複雑怪奇な呪文を書かなくても、ちょっとしたコードを書くだけで動きのあるサイトなどが作れちゃいます。

とはいっても、ふだんコードを書いたことも見たこともない人にとっては、難しく感じるかもしれません。そこで、ほぼ初心者のくらげがわかりやすく設置方法を書いてみます。

まずは画像を用意する

これが一番の悩みどころだったりします。
カンタンなものでしたら、Flat icon
矢印デザインなどのフリー素材がおすすめです。

素材が見つかったら、まずはFC2ブログにアップロードします。
ファイルマネージャー

jQueryをダウンロードする

次に、jQueryの公式サイトからライブラリファイルをダウンロードします。

Downloadと書いてあるオレンジの部分をクリック。
jQuery_02.png
赤く囲ってある、”production”というタイプのファイルをダウンロードします。ダウンロードする場所は、トップページなどのわかりやすい部分にしておきます。

ファイル名はそのままだと”jquery-1.11.2.min.js”となっていますが、”.”の入ったファイル名だとFC2ではアップロードできないため、”jquery-1112min.js”というように、リネームしておきます。ただし、jsの前の”.”は取ってはいけません。

リネームしたら、FC2にアップロードします。

もう一つjsファイルをダウンロード

今度は、Dynamic Drive DHTML scriptsから、真ん中あたりにあるボタンをクリックします。
scroll.png

ダウンロードしたプラグインを書き換える

クリックするとすぐにブラウザ上でファイルが開くので、右クリックで”名前を付けて保存”でデスクトップなどに保存します。名前は変更しないで大丈夫です。

保存したファイルを、今度はテキストエディタで開きます。テキストエディタがなければ、WindpwsならTeraPad、Macならmiあたりがいいと思います。

テキストエディタをダウンロードして起動し、”scrolltopcontrol.js”をテキストエディタに持っていけば開けます。
ファイルをテキストエディタで開いたら、FC2ブログに戻ってファイルマネージャーを開きます。そして、先ほどアップした画像のアドレスをコピーします。
ファイルマネージャ_02

コピーしたらテキストエディタに戻って、12行目の”up.ping”というところを今コピーしたアドレスに書き換えます。そのままペーストすれば大丈夫です。アドレス横の”width”と”height”は画像の横幅と縦幅です。デフォルトだと小さかったので、100px×100pxに変更しました。持ってきた画像そのままの大きさで使用したい場合は、この記述を消してしまってもかまいません。

var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="<span style="color:#FF0000"><strong>http://kuragemoyou.com/wp-content/uploads/Go-to-Top.png </strong></span> width:<span style="color:#FF0000"><strong>100</strong></span>px; height:<span style="color:#FF0000"><strong>100</strong></span>px"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},

書き換えて保存したら、FC2にアップロードします。

ブログテンプレートのhtmlを書き換える

これで最後です。アップロードした2つのjsファイルを読み込ませてちゃんと働かせるためのおまじないを書きます。

FC2ブログメニューのテンプレート設定をクリックします。テンプレートのHTML編集欄で、
<head></head>という記述を探します。Ctrl+Fで検索できます。
記述が見つかったら、<script type=”text/javascript” src=””></script>というコードを、
<head></head>内のどこでもいいので貼ります。どこがいいのかわからない場合は、</head>の上でも大丈夫です。

次に、ファイルマネージャーを開いて、アップロードした”scrolltopcontrol.js”のアドレスをコピーします。
そして、今貼ったコード<script type=”text/javascript” src=””></script>の””内にアドレスをペーストします。

これで完成です!
ちょっとややこしいところもありますが、実際に動いているところを見るとうれしくなりますよ。

コメントを残す


goToTop