SIRIUSにbxスライダーを実装してみよう - 初心者でもできる画像の編集+加工

ブログURL変更のお知らせ

いつも「初心者でもできる画像の編集+加工」をご覧いただきありがとうございます。

このたび、ブログURLを変更しましたのでお知らせいたします。新しいURLは以下のとおりです。

新URL:http://gazocustomize.xyz/

旧URLにアクセスしても新しいURLに転送されるようになっています。

今後も「初心者でもできる画像の編集+加工」をどうぞよろしくお願いします。

GIMP編集
無料画像編集ソフトGIMP2.8で画像の編集+加工の記事一覧はこちら

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SIRIUSにbxスライダーを実装してみよう

20151004-1.jpg
サイト作成システムSIRIUSにスライダーを実装してみよう。
まず、下記のサイトからbxsliderをダウンロードします。
http://bxslider.com/

SIRIUSにスライダーを実装する方法


先ほどダウンロードしたbxsliderのzipファイルを解凍します。
20151004-4.jpg

使用するプラグインは、
jquery.bxslider.css
jquery.bxslider.min.js
images
次に、PC⇒Cドライブ⇒ACES WEB⇒SIRIUS⇒data⇒スライダーを実装したいサイト名を開きます。
開いたら、右クリックで新しくフォルダを作ります。フォルダ名はjs
jsフォルダを開き、jquery.bxslider.min.jsをコピペして入れます。
次に、CSSを開きjquery.bxslider.cssをコピペして入れます。
続いて、imagesフォルダをコピーして貼り付けます。
20151004-3.jpg

次にjQueryを動かすために、テンプレート⇒HTMLテンプレート編集でhead内に下記のコードを書いてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

続いて、head内に下記のコードを書いてください。





これで、いったんHTML編集は終わりなので保存しておきます。

スライダーを表示したい記事内に下記を記述します。

シリウスの画像

シリウスの画像

シリウスの画像

シリウスの画像


あとはアップロードして確認してみます。
※imagesフォルダがアップロードされていないときは、FFFTPなどを使いアップロードしましょう。
これで、bxスライダーを実装することが出来ました。
シリウスのHTMLやフォルダをさわるので自己責任でお願いします。
お疲れさまでした。
デモはこちら

この記事を読んだ人はこんな記事も読んでます




Comment
非公開コメント

Track Back

http://gazocustomize.blog.fc2.com/tb.php/89-fd099515

スプレッドで比較

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。