テロップ付スライドショーの設定・設置

テロップ付スライドショー

更新日: 2018年9月30日

テロップ付スライドショーは、スライドの1枚1枚にテロップのつくスライドショーです。画像 + テロップで内容が補強されるので、スライドショーの印象が深まります。

テロップ付スライドショーを見る

フォルダとファイルの構成

テロップ付スライドショーは、以下のようなフォルダとファイル構成になっています。

slideshow フォルダ
  |-slideshow.js (動きを制御するプログラムファイル)
  |-slideshow.css (デザインファイル)
  |-setting (設定ファイル)
  |-gazou.xxx (スライド用画像) 
  |-・・・

このうち、カスタマイズが必要なのは、設定ファイルと画像ファイルだけです。

スライド用画像の作り方

ルール

  • スライドの縦横のサイズはすべて同じにしてください。
    横位置写真に縦位置写真がまじっている場合は、タテ位置写真に左右の余白をもうけるなどして、サイズを合わせてください。
  • ファイル名は半角英数字にしてください。
  • 画像形式はpng、jpg、gif のいずれかにしてください。
    複数の画像形式が混在してもかまいません。
  • スライドの表示枚数には制限がありませんが、スライドショーはすべての画像をロードしたあとに始まりますので、枚数が多い場合は、最初のテロップが表示されるまで少し時間がかかるかもしれません。

できた画像はslideshowフォルダに移動します。

設定ファイルの作り方

弊社会員サイトで、テロップ付スライドショーの設定ファイルを生成して、ダウンロードします。設定項目は以下の通りです。

  • スライド用画像のファイル名
  • スライド用テロップ
  • スライド1枚の表示秒数

スライド1枚ずつに、画像のファイル名とテロップを指定します。

設定ファイルの生成とダウンロード

設定ファイルができたら、slideshowフォルダに移動します。

テロップ付スライドショーを見せるページの設定

テロップ付スライドショーを見せるページがHTMLの場合、ソースファイルを開きます。
Wordpressなら、スライドショーを見せたい投稿ページまたは固定ページを開き、テキストモードにします。
スライドショーを見せたい位置に <div id="show-area"></div> を埋め込みます。このタグの中には何も書き込まないでください。
スライドショーの周囲に余白を入れるなどデザインしたいときは、#show-area に直に指定せず、外側を別のタグで囲んで、そのタグをCSSで指定してします。

テロップ付スライドショーの設置

通常のhtmlファイルに設置する場合

  1. 作業をする前に、テロップ付スライドショーを呼び出す html のバックアップを取っておきます。
  2. slideshowフォルダを、テロップ付スライドショーを呼び出したいページと同じ階層にアップロードします。
    |-
    |-html (テロップ付スライドショーを呼び出したいページ)
    |-slideshow フォルダ
        |-slideshow.js 
        |-slideshow.css
        |-setting 
        |-gazou.xxx  
        |-・・・ 
    
  3. テロップ付スライドショーを呼び出したい html の </head> の直前に、cssファイル、jquery.js、jsファイルへのリンクを書きます。

例)

<link href="slideshow/slideshow.css" type="text/css" rel="stylesheet" />
<script src="https://
ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" 
type="text/javascript"></script>
<script src="slideshow/slideshow.js" type="text/javascript"></script>
</head>
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

なお、スタンドアローンではテストできません。

wordpressに設置する場合

  1. 作業をする前に、必ず functions.php のバックアップを取っておきます。
  2. slideshowフォルダを、themesフォルダ中の現在のテーマフォルダにアップロードします。
    themes フォルダ
      |-
      |-current-theme (現在のテーマフォルダ)
          |-
          |-functions.php
          |-slideshow フォルダ
              |-slideshow.css
              |-slideshow.js
              |-setting
              |-gazou.xxx 
              |-・・・ 
    
  3. テロップ付スライドショーを呼び出すために、テーマフォルダ内の functions.php にcssファイルとjsファイルへのリンクとslideshowフォルダへのパス(slidePath)を書きます。
    以下は、xxxというスラッグのページから呼び出す場合の書き方です。

例)

function cb_enqueue(){
  if (is_single ('xxx')) {
    echo '<script type="text/javascript">var slidePath 
="'.get_template_directory_uri()."/slideshow/".'";</script>';
    wp_enqueue_script ('slide_script', 
get_template_directory_uri()."/slideshow/slideshow.js", 
array('jquery'), false, true);
    wp_enqueue_style ('slide_style', 
get_template_directory_uri()."/slideshow/slideshow.css");
  }
}
add_action ('wp_enqueue_scripts', 'cb_enqueue');
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

CMSサイトへの設置は、サイト管理者に依頼するようにしましょう。

▲このページのトップへ