SIRIUSで作成したサイトにスライダーを挿入してみよう

SIRIUS スライダー,シリウス スライダー

SIRIUSでサイト作成している方で、広告をスライダーで表示させたいという方が多いのではないでしょうか。
という私も、昔苦労して表示させたものでした。

 

私のこの「アダルトアフィリエイトを始めよう」にも何名か教えていただけなしでしょうかというお問合せいただくようになり、今回まずはTOPページに表示させてみました。
アダルトアフィリエイトは画像を多く使用しますから、少ないスペースで多くの画像を表示できるのはいいですよね。
この程度でしたら簡単に表示できますので、参考にTRYしてみてください。

 

スライダーにはbxSliderを使用します

bxSliderをダウンロード

bxSliderは英語表示が多いので心配になりますが大丈夫です。私の書いている通りに進めれば簡単にダウンロードできます。
無料ですのでご安心ください。
まずはこちらからダウンロード→bxslider

SIRIUS スライダー,シリウス スライダー

上記の画像が表示されたら赤色のボタンをクリックします

SIRIUS スライダー,シリウス スライダー

 

SIRIUS スライダー,シリウス スライダー

少しスクロールするとこの画面が出てきますので、少しわかりずらいですが「Download jquery.bxslider.zip here」をクリックします

SIRIUS スライダー,シリウス スライダー

 

 

SIRIUS スライダー,シリウス スライダー

「bxslider-4-4.2.12」という圧縮フォルダーがインストールされますので、クリックして解凍してください。
そのフォルダーの中から
dist→vendor→「jquery.easing.1.3
src→css→「jquery.bxslider
この2つのプラグインを使用します

 

 

SIRIUSのサイト保存先にインストール

ご自分のパソコンの中の
たぶん皆さんのwindows(C)の中にSIRIUSのデーターが保存されていると思います

 

※保存データーの中に「ACES WEB」があると思いますのでクリック→「SIRIUS」をクリック→「data」をクリック→スライダーを表示させたいサイトをクリック

SIRIUS スライダー,シリウス スライダー

 

SIRIUS スライダー,シリウス スライダー

@jsというホルダーの中に先ほどダウンロードしておいた「jquery.easing.1.3」をコピー&ペーストしてください。
Acssというホルダーのなかにも、同じく「jquery.bxslider」をインストールします。
(インストール方法は先ほどダウンロードしておいたものを右クリックしてコピーをすれば、あとはインストール先にマウスを持っていき右クリックで張り付けをクリックすればインストールできます)

 

これで、まずは下準備は終了です。
次に、「テンプレートの編集」にjQueryのコードを記載していきます

 

SIRIUSのテンプレートにjQueryコードを記入

SIRIUSの上部メニュー「テンプレート」から「HTMLテンプレート編集」を選択

 

SIRIUS スライダー,シリウス スライダー

 

「トップページ」「カテゴリーページ」「エントリーページ」のそれぞれに、<head></head>内、赤い枠の部分に下記のオレンジの枠内をコピーして貼り付けてください。
自分のサイトのURLを記入する部分が2か所あります。
※注)間違えるとサイトのテンプレートが崩れてしまうのでコピーして元を控えておいてください。もし、壊れても責任は負えませんので自己責任でお願いしますね(#^.^#)

 

SIRIUS スライダー,シリウス スライダー

 

 

<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://自分のサイトのURL/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="https://自分のサイトのURL/css/jquery.bxslider.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
var obj = $('.bxslider').bxSlider({
auto: true, //自動再生有効
pause: 5000, /* 表示間隔 */
onSlideAfter: function () { obj.startAuto(); }
});
});
</script>

 

いよいよサイトに表示させる設定です

あとは、自分のサイトの表示させたい部分(記事作成の部分でOKです))に下記のオレンジの枠内の部分をコピーして貼り付ければ完了です。
2カラムであれば、サイド広告掲載部分に直接貼り付けてもOKです。
ただし、画像は同じサイズのものを用意して置くことできれいに表示されます。
画像の数は増やすことも減らすことも、この部分で好きなように変更してください

 

<pcc>
<div class="bxslider">
<div class="slide">ここにリンクを付けて画像を挿入(ASPのタグでもOK)</div>
<div class="slide">ここにリンクを付けて画像を挿入(ASPのタグでもOK)</div>
<div class="slide">ここにリンクを付けて画像を挿入(ASPのタグでもOK)</div>
</div>
</pcc>

 

どうでしょう?
表示されましたでしょうか
私のサイトではこれで表示されています。

 

私が試したところでは、ドメインに記号が入っていたり、日本語ドメインの場合に表示されないケースがありました。
また、スマホには表示されないようです。
SIRIUSとの相性があまりよくないのかもしれません。

 

スマホにも表示させたいときには、自分でjQueryを作って見てください。

 

時間短縮にモジュールを活用

私は作業の効率化も図れるのでモジュールを使用しています。
「サイト全体設定」→「モジュールの設定」→「新規追加」

SIRIUS スライダー,シリウス スライダー

 

「モジュール名」には自分が分かりやすい名前を付けます。今回はトップページへの表示でしたのでこのようにしました。
記事作成の部分には、表示させたいpccで始まるコードを記入します。最後にOKすれば完了です

SIRIUS スライダー,シリウス スライダー

 

後は、表示させたい部分にカーソルを持っていき右クリックすると「モジュールの挿入」という表記があるので、そこで挿入したい項目を選んでクリックすれば完了です。

 

モジュールは、コード表記だけでなく、同じ文面だとか同じ広告などを使いまわすときに登録しておくと時間短縮になりますので活用してみてください

 

以上でSIRIUSにスライド広告を表示させる方法の説明は終了です。
テンプレートやドメインなど、様々な要因で表示されないケースも多々あるようですがTRYしてみてくださいね