アフィリエイト広告を利用しています

広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「 Big Bang 」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

FC2ブログでクルクルスクロール

ブログでクルクルスクロール のFC2 ブログ編です。

smoothscroll.jsを例に、 FC2 ブログ でスクリプトファイルをアップロードして使う方法を
書きます。

作業には3つの手順が必要です。

手順1.smoothscroll.jsをダウンロードする
手順2.スクリプトファイルをブログにアップロードする
手順3.テンプレートの変更

この3つの手順を終えるとクルクルとスクロールするようになります。

手順1.smoothscroll.jsをダウンロードする

http://www.kryogenix.org/code/browser/smoothscroll/ のページを開くと、上の方に

To apply this effect to your own pages, simply download smoothscroll.js and include it in the of your page like any other JavaScript, using something like <script src="smoothscroll.js"></script>.

と書かれた行があるので、その行の smoothscroll.js というリンクからダウンロードします。
各ブラウザでのやり方は下の通りです。

Internet Explorerでのダウンロード方法

smoothscroll.js というリンクを左クリック。

「ファイルのダウンロード - セキュリティの警告」というメッセージボックスが出てくるので、「保存」をクリック。

「名前を付けて保存」というメッセージボックスが出たら、左側の一覧から「デスクトップ」をクリック。下の「ファイル名」はそのままで「保存」をクリック。

Google ChromeまたはMozilla Firefoxでのダウンロード方法

smoothscroll.js というリンクを 右クリック

「名前を付けて保存」を選択。

「名前を付けて保存」というメッセージボックスが出たら、左側の一覧から「デスクトップ」をクリック。下の「ファイル名」はそのままで「保存」をクリック。

Safariでのダウンロード方法

確認はWindows版でしか行なっていません。mac版は多少違うかもしれません。てか、Macって右クリックないんだっけ。

smoothscroll.js というリンクを 右クリック

「リンク先のファイルを別名で保存...」を選択。

「名前を付けて保存」というメッセージボックスが出たら、左側の一覧から「デスクトップ」をクリック。下の「ファイル名」はそのままで「保存」をクリック。

これでデスクトップ画面に smoothscroll.js が保存されます。

手順2.スクリプトファイルをFC2 ブログにアップロードする

1.管理画面の左側にある「ツール」の中の「ファイルアップロード」をクリック。FC2 ブログ管理画面

2.右側の画面の「ファイル」と書かれた行にある「参照」をクリック。FC2 ブログ管理画面2

3.出てきたウインドウで左のデスクトップをクリック。
  右の大きい枠から smoothscroll(拡張子付ならsmoothscroll.js) を選択。
ウインドウ

4.先ほどの参照ボタンの下のほうにある「アップロード」をクリック。


5.押したボタンの下にアップロードしたファイルのURLが赤い字で現れるのでコピーして下の入力欄に貼り付ける。

6.コピーしたURLを下の入力欄に貼り付ける。  貼り付けたのがコピーしたURLであることを確認して「変換」を押す。

入力:
結果:

「結果」欄に表示されたのが、あなたがアップロードしたスクリプトを使うためのタグです。これをコピーして手順3へ進んでください。

手順3.テンプレートの変更

1.管理画面の左側「環境設定」の中にある「テンプレートの設定」をクリック。FC2設定画面

2.表示された画面右側の下のほうに「 (あなたのテンプレート名) のHTML編集」という場所が
  あるので、その中で「 < / head> 」( < の次に / があってhead> )と書かれた行を探す。
  もし「 < / head> 」と書かれた行がなかったら、そのスキンは壊れています。

3.「 < / head> 」と書かれた行の上に、コピーしたタグを貼り付けてください。

コピーしたタグのソース
</head>

4.貼り付けたら「更新」ボタンを押す。

これで作業はおしまいです。他の修正は一切いりません。
同じページへの リンク をクリックするとクルクルスクロールします。

同じページへのリンクの貼り方は別記事「 ページの途中にリンクする 」を見てください。

新ブログ「Big Bang」で続きを読む

×

この広告は30日以上新しい記事の更新がないブログに表示されております。

Build a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: