gosign
GosignトップCSSWORDPRESSweb素材音楽素材NEWSGAMEお問合わせデザインホームページ

Stinger3カスタマイズ「JQueryスライドショーbxSlider」を入れてみよう。

公開日: : 最終更新日:2014/10/13 wordpress , , , ,

トップページに動的コンテンツを入れると画面が華やいでみえますよね。今回は「Java Script」のスライダーを埋め込んでみたいと思います。このページのトップにも使っています。

用意するもの

 bxSlider

画面右上の「Download」からjquerybxslider.zipをダウンロードします。
※この記事を書いている時点でのレイアウトですので、DLの場所が変わる場合もあります)
bxslider01

これらをWORDPRESSindex.php同階層に「js」フォルダを作り、その中にアップロードします。

index.php
js/images/
js/plugind/
js/bower.json
js/jquery.bxslider.css
js/jquery.bxslider.js
js/jquery.bxslider.min.js
js/readme.md

このような感じになります。

それとindex.phpと同じ階層に「img」フォルダを作り
s001.jpg
s002.jpg
s003.jpg
をテスト用に作り「img」フォルダ内にアップロードしておきます。
※横幅は542ピクセルで作ってみてください。

 

Stringer3のカスタマイズ

home.phpを編集します。
一行目の

<?php get_header(); ?>

の直後の2行目から下記ソースを記入

<!--slider-->
<link rel="stylesheet" href="./js/jquery.bxslider.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="./js/jquery.bxslider.min.js"></script>
<div id="slider1">
<div><img src="img/s001.jpg" title="01" alt="01"></a></div>
<div><img src="img/s002.jpg" title="02" alt="02"></a></div>
<div><img src="img/s003.jpg" title="03" alt="03"></a></div>
</div><!--end of #slider-->
<script>
jQuery(function($){
$('#slider1').bxSlider({
auto:true,
pause:6500,
captions: true
});
});
</script>

動作サンプル

bx002

 

bxSliderのカスタマイズ

bxsliderはいろいろなスライド方法を設定できます。
スライダーのカスタマイズのまとめは下記サイトがまとまっていますので参考にしてみてください。

jQueryスライドショー「bxslider」の使い方まとめ

 

Stinger3カスタマイズ、Bxslider導入まとめ

いかがでしたでしょうか?使い方次第で様々な魅せ方ができるスライダー機能。ぜひいろいろカスタマイズして使ってみてください。

関連記事

Stinger3カスタマイズ「サイドバーの記事タイトル下の出だし」を消去する方法

正式名称はなんて言うのかはよくわからないですが、Stinger3のサイドバーの「NEW ENTRY」

記事を読む

Stinger3カスタマイズ「続きを見る」「もっと見る」の背景色を変更

スティンガー3を使い始めて、真っ先に思ったのは「続きを見る」の背景色が目立たなくて、デザインに埋もれ

記事を読む

ワードプレス「続きを見る」を押しても続きが読めない現象の対処法

筆者がまだワードプレスを初めて1週間の頃。何気に自分のサイトの「続きを読む」を押してみたところ、いく

記事を読む

Stinger3カスタマイズ「favicon.ico」を置き換えてブックマークを華やかに

URLの先頭に出てくるアイコンは通称「favicon.ico」と呼ばれています。読み方はファヴィコン

記事を読む

Stinger3カスタマイズ・サイドバーの左右位置を変える

近年左右2カラム型のCSSテーマでは左側に広い記事エリア、右側に狭めなリンクエリアを設けるものが増え

記事を読む

Stinger3カスタマイズ・記事タイトル色を変更して目立たせよう!

Stinger3は、そのまま使っても十分優秀なテーマなんですが、使っているとやっぱり、黒文字だらけだ

記事を読む

no image

同じディレクトリ内に「index.php」と「index.html」を置いたときに.htmlファイルが優先されて表示するのを変更する方法

wordpress導入で「index.php」と「index.html」を同じディレクトリに置く必要

記事を読む

Stinger5カスタマイズ・サイドバーの左右を位置を変更する

いまだマイナーチェンジが続くStinger5ですが、骨子となる部分は固まってきた様子なので思い切って

記事を読む

PAGE TOP ↑