広告&webデザイン
<b>作業メモ</b>

独学でホームページを作ってると、ちょっと情報が遅れがちですが・・・

ようやく私のところにも「jQueryを使おう」の波がやってきました(笑)

今回は基本ともいえるスライドショーを作るのに挑戦。

とはいえ、誰に教えてもらったのでもない、ネットで検索をかけながらの手探りなので、アプローチや結論なども間違ってるかもしれないけど、なんとか導入できたので、私と同レベルの超超jQuery初心者の方の参考になれば(^^;)そして明日の物忘れした私のために(爆)

今回導入してみたのはこちらのjQuery。

http://dev7studios.com/nivo-slider/

 

まずはjQueryのサイトからjQueryをダウンロードします。

今回、私は1.10.1をダウンロードしました。

そのまま「ダウンロード」を押すと、(私にとって)わけの分からない呪文(笑)がババ〜〜っとページに表示されます。

これをシンプルテキストなどにコピペしてもいいし、私の場合はダウンロードする時に「リンクされたファイルを”ダウンロード”に保存」を選択して、ファイルが保存されるようにしました。

そうすると「jquery-1.10.1.min.js」というjavaのデータが保存されます。

まずはこれをWP用のフォルダ内に「js」などという名前のフォルダ(任意で大丈夫と思います)を作り、その中に移動させました。

ここまでが準備1。

 

次にNivo Sliderのデータをダウンロードします。

http://dev7studios.com/nivo-slider/

のサイトの右上の「ダウンロード」をクリックすると、ダウンロードフォルダにデータ一式が保存されます。

この中身をざっくりとさっき作った「js」に移動。

(ほんとはいるファイルいらないファイルありそうですが、よく分かんないので全部^^;)

 

次にhtml側の書き込み

こちらはhtmlとcssの基本的な知識は必須です。

まず<head></head>内に

<script type=”text/javascript” src=”js/jquery-1.10.1.min.js“></script>
<script type=”text/javascript” src=”js/jquery.nivo.slider.js”></script>

と記入。

このとき自分のダウンロードしたjQueryバージョンで書き込みます。

その下に、

<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider(); });
</script>

と記入。

これでheadは終了。

 

そして<body></body>内の任意の場所に、

<div id=”slider” class=”nivoSlider”>
<img src=”画像パス” alt=”" title=”" />
<img src=”画像パス” alt=”" />
<img src=”画像パス” alt=”" title=”" />
<img src=”画像パス” alt=”" title=”" />
</div><!– /#slider –>

を書き込みます。

必要な枚数分<img>を増やせばいいと思います。

 

そしてcssの書き込み

さっきダウンロードしたnivo sliderのフォルダの中に「nivo-slider.css」というcssのデータがあるはずなので、それを自分のcssにざっくりとコピペ。

細かい設定は自分でできるのですが、実はここを触りまくってたら全然動かなくなったりしたので、超初心者はあまり触らない方がいいかも(>-<)

【追記】

私の場合はすでにデザインをがっつりcssで組み込んでて、その中にスライドショーを入れたので配布されたcssはほとんど触りませんでした。

でも、真っ白状態の人はそれなりにcssを設定して下さいね〜(^^;)

で、ここまでできたら一式をftpにアップロードしておしまい。

ちなみにテストページがこちら。

http://www.komorebinomori.net/komorebi/slide_test.html

写真とか仮なので適当ですが(^^;)

 

ここまで書くと、簡単にできたや〜ん、な感じなのですが、実は昨晩からいまいちうまくいかず、あれだこれだと悩んでました。

写真が変なところにボボ〜〜ンと表示されちゃったり。

それでcssをあれこれ触ったりしてみてたのですが、結果はなんにも触らずにftpに思い切って上げてしまったら、Web上ではちゃんと見れました。

うまくいかなかったのはローカルで見てたせいかもしれません。

 

で、jQueryがうまくいくことに安心したので、今度はこれをWPに導入です。

次回つづく。

 

▲top作業メモ|2013年6月27日|

コメントを残す