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_0-11-34_No-00.gif

みなさんこんばんわ!

今回はjQueryの設置方法について初心者でもうろたえず

なるべくわかやすく解説致しますので最後までどうぞよろしくお願いします^^

それでは一緒に準備致しましょう♪



スポンサードリンク


jQueryとは

Mozilla Corporationで、John Resig氏によって作られた

様々な処理を短く簡単に書ける、読み込みが軽量なJavaScriptライブラリです。

AjaxやJavaScriptのDOM操作等を簡単に記述できるようになる。


頭が痛くなりそうですが要は少ないコード且つあまり時間をかけないで

JavaScriptのコードが実行でき様々なアニメーションを簡単作ることが出来ます^^

なのでこれを気に皆さんもまずは設置方法クリアーしましょう^^

 

1:So-netブログ管理画面にはいる

まずはソネットブログにログイン後

管理画面に入りデザインのメニューボタンをクリックします。

 

2:テンプレート管理を選択します

テンプレート管理を選択します

デザイン画面に入ったら

テンプレート管理を選択します。

 

3:任意のテンプレート編集ボタンをクリック

任意のテンプレート編集ボタンをクリック

テンプレート管理画面にはいったら

上級者用の下にある編集と言う文字をクリックします

※今回はわかりやすくjquery設置用と言うhtmlで制作していますので

皆さんはお使いのテンプレート編集をボタンをクリックして下さい。

※もしデフォルトHTMLで編集している場合はHTML追加で作成して下さい

 

4:スクリプトコードを設置

スクリプトコードを設置

でましたプログラムコード・・

いじったことがない人は吐きそうになるかと思いますが

余計な暗号無視して下に表示されてる



 スクリプトコードをコピーして下さい

こちらのコードがjQuery動かすための核となる部分です

この核なるソースコードはいくつかバージョンがあるのですが

こちらのコードは常に最新バージョンを使う事が可能になります。

そして





スクリプトコードに下に貼り付けを行いましょう。

もしこちらのソースが見当たらない場合は

画像参照していただくか

windowsであればCtrl+Fで検索して下さい

macであればcommnd+Fです

核となる部分は設置を完了しました お疲れ様です^^

ですがまだソースを記述したい場所を設置していませんので

もう一息頑張りましょう

SnapCrab_NoName_2014-12-5_21-27-3_No-00.gif

 

5:プログラム記述する場所を配置

2014-12-05_01h39_14.gif

先ほど貼り付けた

<script src="http://code.jquery.com/jquery.min.js"></script>

の下に

こちらのコードを記述しましょう。

これでいつでもコードを書くことできます^^

しかし一点注意点,ソースを書く時は必ず

<script src="http://code.jquery.com/jquery.min.js"></script>

の下で記述するようにしましょう

そうでないとただしく動作しません

ぁ後は保存はちゃんとしましょうね!

 

5:適用ボタン押してサイトに反映させる

2014-12-05_21h23_21.gif

テンプレート画面まで戻り編集でいじったHTMLを適用させましょう

これで反映されているはずです

ちなみにですが

私はこれを設置した後、一番下までスクロールしてもらうと

ページトップがありますよね?

それを押してもらうとぬるっとベージ上にスクロールします

俺もやってみたい!私もやってみよう!思う方は次回お教えますので

またよろしくお願いします。

最後まで見てくださってありがとうございました^^

関連記事

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

 




スポンサードリンク

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

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


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

nice! 0

コメント 0

コメントを書く

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

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

トラックバック 0

この記事のトラックバックURL:
※ブログオーナーが承認したトラックバックのみ表示されます。


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