画像型ステッカーの設定・設置

画像型ステッカー

更新日: 2018年9月30日

画像型ステッカーは画面右下からスライドインして、画像でメッセージを伝えるサイト内バナーです。
ユーザーは左右の三角ボタンで拡大/縮小することができるので、長期間にわたって、同じメッセージを発する場合、他のコンテンツの邪魔になったり、ユーザーを煩わせたりしません。

画像型ステッカーを見る

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

画像型ステッカーは、以下のようなフォルダとファイルの構成になっています。

graphicsStickerフォルダ
  |-graphicsSticker.js (動きを制御するプログラムファイル)
  |-graphicsSticker.css (デザインファイル)
  |-setting (設定ファイル)
  |-graphics.xxx (メッセージ用画像)

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

メッセージ用画像の作り方

ルール

  • 画像サイズは自由。
  • ファイル名を image ではじめる。
  • 画像形式はpng、jpg、gif のいずれかにする。
    ファイル名はimage.png、image.jpg、image.gif のいずれかになる。

できた画像はgraphicsSticerフォルダに入れます。

画像型ステッカーの設定

設定項目
画像ステッカーの設定項目

  • 表示開始日時
  • 表示終了日時
  • メッセージ用画像のファイル形式
  • リンク先アドレス
  • フレームの色
  • フレーム内の背景色
  • ボタンの色
  • 2回目以降の自動スライドインの有無

弊社会員の方は、下記、設定ファイル生成ページで簡単に設定ファイルを生成・ダウンロードできます。

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

画像型ステッカーの設置

画像ファイルgraphics.xxxと設定ファイルsettingができたら、graphicsStickerフォルダに入れます。

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

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

例)

<link href="graphicsSticker/graphicsSticker.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="graphicsSticker/graphicsSticker.js" type="text/javascript">
</script>
</head>
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

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

wordpressに設置する場合

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

例)

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

CMSサイトへの設置は、エンジニアに依頼するようにしましょう。

設定のヒント

  • 設定項目は省略できません。
  • 表示終了日時は2016/03/01 23:59という形式で指定します。時分は省略できません。
  • 表示終了日時を過ぎると自動的に表示されないようになります。
  • リンク先がとくにない場合は、「#」と指定します。
  • リンクボタンはありません。画像全体がリンクします。
  • リンクボタンが必要なときは画像に描き込んでください。
  • フレームの色など色はすべて16進法で指定してください。
  • 「2回目以降の自動スライドインの有無」は初期設定では「スライドインしない」になっており、右端に三角のボタンが覗いているだけです。1回目のようにスライドインさせる場合は、「スライドインする」を選びます。なお、最後にアクセスして24時間以上たつと、カウントが1回目に戻ります。
▲このページのトップへ