SIRIUSのサイトにスライダー広告を入れる方法

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

「SIRIUS」は２０２２年５月に販売終了致しました。
そして、新『SIRIUS２』として生まれ変わりました！
新しい機能満載で使いやすくなった「SIRIUS２」
ご覧ください→SIRIUS2

以下の記事は、SIRIUSの解説になります。

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

私のこの「アダルトアフィリエイトを始めよう」にも何名か
教えていただけなしでしょうかというお問合せいただくようになり、

アダルトアフィリエイトは画像を多く使用しますから、
少ないスペースで多くの画像を表示できるのはいいですよね。
この程度でしたら簡単に表示できますので、参考にTRYしてみてください。

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

bxSliderをダウンロード

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

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

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

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

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

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

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

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

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

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

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

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

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

<script src="https://自分のサイトのURL/js/jquery.bxslider.min.js"></script>

<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を作って見てください。