シリウスでスライドショーを設置|実装編|WOW Slider

スライドショーをシリウスに実装する手順

スライドショーが完成したらいよいよシリウスの編集画面に設置します。

まず書き出しで「フォルダーに書き出し」を選択、書き出しを行います。

WOW Slider書き出し画面

「Index.html」を開く

するとデスクトップに書き出した場合、デスクトップ上に以下の4つのフォルダやショートカットが生成されます。

その中から「Index.html」を開きます。画像でいうと右から二番目。(下図参照)

インターネットブラウザが起動しスライドショーが表示されます。

生成される4つのフォルダ・ショートカット

<head>部分のHTMLをコピーする

スライドショーが表示されたら、右クリック→「ページのソースを表示」を選びます。(下図参照)

スライドショーのHTMLが表示されますので

<!-- Start WOW Slider.com HEAD section --><!-- add to the <head> of your page -->
から
<!-- End WOW Slider.com HEAD section -->

までをコピーします。(下図参照)
HEAD sectionのコピー

シリウスで設置したいページの<head>内に貼り付ける

トップページに貼り付ける

トップページにスライドショーを設置したい場合はシリウスの記事編集画面で「編集」→「HTMLテンプレート」をクリックします。(下図参照)
「HTMLテンプレート」の位置
トップページの<head>~</head>内に貼り付けます。</head>の手前にでも貼り付けておきましょうか。改行で1行空けて貼り付ければOKです。(下図参照)

WOW SliderのHEAD sectionを貼りつける場所

カテゴリーページ、エントリーページに貼り付ける

カテゴリーページやエントリーページにスライドショーを設置したい場合はシリウスの記事編集画面左側にある「サイト構成」より設置したいページを選んで右クリック→「詳細設定」→「上級者向け設定」→</head>タグに貼り付けます。(下図参照)
この方法でお好みのページの<head>内にWOW Sliderの<head>タグを設置できます。

「サイト構成」画像

「上級者向け設定」画像

<body>部分のHTMLをコピーする

再度index.htmlを開き、<body>部分の
<!-- Start WOW Slider.com BODY section --> <!-- add to the <body> of your page -->
から
<!-- End WOW Slider.com BODY section -->
までをコピーします。(下図参照)
「上級者向け設定」画像

シリウスで設置したい箇所に貼り付ける。

コピーしたWOW Sliderのタグをシリウスの<body>~</body>内(記事1~記事10の設置したい部分)に以下の手順で貼り付けます。(トップページ、カテゴリーページ、エントリーページ共通)

①記事編集画面で右クリック→「タグ挿入」→「改行無視エリア」

普通に貼り付けてしまうと自動的に改行されてしまう為、記事編集画面で右クリック→「タグ挿入」→「改行無視エリア」をクリックして下さい。
以下のような<noReturn></noReturn>タグが出てきます。このタグに囲まれた部分では改行が適用されません。
<noReturn></noReturn>の間にWOW Sliderでコピーしたタグを貼り付けます。(下図参照)

<noReturn>
<!-- Start WOW Slider.com BODY section --> <!-- add to the <body> of your page -->
から
<!-- End WOW Slider.com BODY section -->
</noReturn>

WOW SliderBODY部分のコピー箇所

ファイルをアップロードする

最後にファイルをアップロードします。
ここではシリウスのFTPを使用して、WOW Sliderのファイルをアップロードします。
アップロードするのは下図の左2つ。「engine」フォルダと「data」フォルダです。
「engine」フォルダにはスライドショーを動かすためのjava scriptファイル等が入っています。フォルダ名にもあるようにスライドショーのエンジン部分です。
「dataフォルダ」にはスライドショーで使用した画像ファイルが入っています。

生成される4つのフォルダ・ショートカット

この2つのフォルダを設置したいページと同じ階層に放り込みます。
少しわかりにくいかもしれませんが階層を図で示すと下図のようになります。

階層解説

他のページでも少し触れましたが、トップページなど/(スラッシュ)で終わるURLで、実際に画面に表示されるのはindex.phpやindex.htmlといったファイルです。例えばTakezoes Webのトップページで言えば

http://takezoes-web.net/
とは
http://takezoes-web.net/index.php
にアクセスしている状態です。

これはカテゴリーページにも言えることで、トップページやカテゴリーページにスライドショーを設置する際はindex.phpやindex.htmlと同じ階層に「engine」フォルダと「data」フォルダを設置します。

以下画像で説明しますのでサイト生成先フォルダを開いてみましょう。

画像解説-トップページにスライドショーを設置する場合

設置するページ名・会社のホームページを自分で作成する為のサイト(トップページ)
設置するページのURL・http://takezoes-web.net/

画像解説-トップページにスライドショーを設置する場合

画像解説-カテゴリーページにスライドショーを設置する場合

設置するページ名・シリウスでスライドショーを設置|準備編|WOW Slider
設置するページのURL・http://takezoes-web.net/wowslider/

画像解説-カテゴリーページにスライドショーを設置する場合

画像解説-エントリーページにスライドショーを設置する場合

設置するページ名・テンプレートを選ぼう
設置するページのURL・http://takezoes-web.net/hp_sakusei/templete.php

画像解説-エントリーページにスライドショーを設置する場合

以上で設置完了です。シリウスのFTP機能を使ってアップロードしましょう。「全てのファイル」でアップロードすればサイト生成先フォルダに設置したWOW Sliderのファイルも一緒にアップロードされます。

スライドショー設置完了~まとめ~

これでスライドショーのシリウスへの設置作業は完了となります。
しかしながら、ページの最初の方でも書きましたが、ここまでご紹介してきたのはWOW Slider設置の基本的な方法です。
これでとりあえずサイト上にスライドショーは表示されますが、基本的な設置方法のみでスライドショーを表示させると、SEO的にマイナスになる可能性が高いですので注意が必要です。(たけぞー自身体験済み)。

原因の解説、対処法、SEO的にプラスにする方法、また、スライドショーをヘッダー部分に設置する方法は、大変恐れ入りますがたけぞうからシリウスを購入頂いたお客様への特典サービスとなっております。

まとめ

  1. WOW Sliderを購入、ダウンロードする。
  2. 起動後、登録キーを入力する。
  3. スライドショーを作る。
  4. スライドショーをデスクトップに書き出す。
  5. デスクトップに書き出した中から「Index.html」のソースを開き、HEAD部分、BODY部分にあるHTMLをコピー。
  6. 5のHTMLをシリウスのHEAD部分、BODY部分にそれぞれ貼り付ける。
  7. engineファイルとdataファイルを表示したいページのファイルと同じ階層にアップロードする。