2012/09/02

jQuery無知でもスクロール矢印設置してみた♪


アメブロからBloggerへの移行にすっごく苦労したワケですが
私同様、知識無くて困ってる方に向けて、その話はまとめてお話するとして…



jQuery 使った「Topに戻る」矢印、無知なりに設置完了!
ちょっと画面スクロールしていただくと、出てきてクリックするとスルン!と…


設置にあたり、OZPAさんのサイトを参考にしまくりました。

コードの詳しい説明なんかもして下さってますので、ぜひご一読を♪

で、Bloggerに設置するには何処の何を改造すれば良いの?って話
以下、ど素人がまとめた内容ですのであしからず…。

★矢印画像をアップしてURLを取得しておく
矢印画像はご自身でアップロードして、画像URLを取得しておいて下さいませ
BloggerならPicasaにアップロードして取得するのが早いと思いますが
よく分からない場合はブログの投稿画面で画像を貼ってから
投稿画面を左上のボタンでHTMLに切り替えてみて下さい


その中にある http://~省略~.png の部分が画像のURLになります
pngの部分はjpgやgifなど、アップした画像の拡張子によりますのでご注意あれ
ちなみに私は50px×50pxのpng画像貼ってます(透明度は60%)

★BloggerのHTML編集画面を表示する


管理画面のテンプレートを開き「HTMLの編集」をクリック
コードとか無知な人には恐怖感すら感じる案内がでますが続行で(笑)編集画面がでてきます♪

で、で、で!何かあった時のために、出てきたコードはメモ帳か何かにコピペで保存を
上手くいかなかったら、ささっと戻せるようにねー

★ヘッダーに jQuery を読み込ませる
まずはBloggerでjQueryを動かせるようにならないとダメなので
開いた編集画面の<head></head>内に以下のコードをコピペ
私はブラウザの検索で</head>を検索して、その上に書き込みました

<script type="text/javascript" src="/jquery-1.7.1.js"></script>


★スクロール矢印のコードを貼ってみる
次に</body>の前にコードを貼ります。コチラも文字は検索して見つけました
で、私が貼ったコードを記載しようかと思ったのですが
他の方が書かれたコードが基本ですので記載はご遠慮させていただき…

上に貼らせていただいたOZPAさんのブログ記事をご参照下さいませ

位置やスクロールの速度なんかも詳しく説明してくれてますので
初心者の私にもわかりやすかったですよ♪

何か上手く設置できると、嬉しくて勉強意欲が湧きますね←単純
時間見つけてチョイチョイとカスタムに手を付けてみます♪

0 件のコメント:

コメントを投稿

ShareThis

LinkWithin

Related Posts Plugin for WordPress, Blogger...