So-net無料ブログ作成

logo2.gif猫の気まぐれ便り

pro2.png 元webデザイナーが話題のトレンドキーワードや役に立つデザイン情報をお届けします♪ なるべく有益な情報をお届けするつもりなので今後共よろしくお願いします^^

neko1.gif
neko2.gif
neko4.gif

So-netブログでjquery ぬる っとスクロール実装 [jquery]


So-netブログ jquery ぬる っとスクロール実装

SnapCrab_NoName_2014-12-5_19-5-44_No-00.gif

前回jqueryの設置を完了した君

今回はぬるっとページトップにスクロールする方法は伝授致します。

まずはどう言う仕組みかみてもらった方が早いのでデモページをご用意しました

デモページ

ぬるっと行くでしょ?w

では一緒にやっていきましょう^^

まだjquery設置出来ないって方は前回の記事をご覧下さい↓。

So-netブログに jquery 設置方法 すごくわかりやすく解説します!

 



スポンサードリンク


1:管理画面を開く

2014-12-05_01h12_05.gif

管理画面のデザインをクリックして下さい

 

2:編集ボタンをクリック

2014-12-05_19h55_32.gif

HTML編集、上級者モードで設置したいファイルの編集ボタンをクリックします。

デフォルトHTMLを使用されている場合は編集ボタンはありませんので

右にあるHTML追加で作成して下さい。

 

3:ぬるっとスクロールを実装するスクリプトコードを貼り付ける

2014-12-05_19h57_51.gif

こちらにあるコードをコピーして下さい↓

 

 

そして<script src="http://code.jquery.com/jquery-latest.js"></script>の下に

貼り付けて下さい。

さてここまでできたら半分はできましたのでもう少しがんばりましょう^^

 SnapCrab_NoName_2014-12-5_20-38-28_No-00.gif

 

4:ページトップを作る

So-netブログにはページトップの機能がありませんので

作っていきましょう

2014-12-05_19h53_24.gif

まずはこちらのコードをコピー下さい





そして一番したまでスクロールしたら

</div>

</div>

の間に貼り付けましょう

ここまでできたら保存をしましょうね

 

4:最後に適用画面を押して終わり

最後にもう一度テンプレート画面に戻り

適用ボタンクリックしましょう作っても適用をチェックしないと

サイトに反映されませんので注意してください。

 

5:ページトップに装飾を施すcss中級者向け

またこのページトップにはstylecssも書いているのでカスタマイズが可能です




 

このコード部分のstyle~から始まる記述です

サイズを大きくしたり色を変更したり移動させたりなど

cssを書いたコードは全部で5です

font-size: 1.1em; 数字を変更すると大きさが変わります。

font-weight: bold; 太さを変更出来ます現在は太くしていますが細かくしたいなら

100、200、300、400、500、600、700、800、900で調整が可能です

 

text-align: right; rightで右に centerで真ん中 leftで左に移動できます。

padding: 0 20px 0 0; 少し説明が難しいので下記参照下さい↓

padding指定方法

color:;好きな色(例)red,buleなどの英語でまたはカラーコードで表記#ff0000

 

以上で、終わりです

また何か実装できたらその時は教えます^^

 

追記1:申し訳ありませんぬるっと動く動作ですが

実装するコードをテンプレート画面の編集に貼り付けると言いましたが

別の方法もございました・・

こちらの方ががテンプレートデータを汚さすにすむので次回教えたいと思います・・

記事ができましたのでこちらからどうそ

So-netブログでjquery ぬる っとスクロール実装 カスタムペイン編  

追記2: 次回はトップページの右上にふわふわしてる物体がありますが

それを教えていきたいと思います

 

SnapCrab_NoName_2014-12-5_21-10-7_No-00.gif

関連記事

So-netブログに jquery 設置方法 すごくわかりやすく解説します!

So-netブログでjquery ぬる っとスクロール実装 カスタムペイン編 

jquery ふわふわ サンプル サイトのアクセントに

 




スポンサードリンク

DTP|WEB情報のリンク共有フォローはこちら↓

話題のトレンド|芸能ゴシップ情報のリンク共有フォローはこちら↓


nice!(1)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 1

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

トラックバック 0

トラックバックの受付は締め切りました


ページトップ
(c) 2015 nikukyu-petsuki.

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。