お知らせバナーの設定・設置

お知らせバナー

更新日: 2018年9月30日

お知らせバナーはアクセスした瞬間に、サイトを薄暗くして、画面中央から、お知らせを拡大させながら表示します。やがて自動的に縮小し、画面上部に文字が噴き出してコピーになります。

お知らせバナーを見る

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

お知らせバナーは、以下のようなフォルダとファイルの構成になっています。

infoBannerフォルダ
  |-infoBanner.js (動きを制御するプログラムファイル)
  |-infoBanner.css (デザインファイル)
  |-setting (設定ファイル)
  |-image.xxx (お知らせ用画像ファイル)

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

お知らせ用画像の作り方

ルール

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

留意する点

  • 背景が薄暗い色なので、配色に注意する。
  • レスポンシブなので、スマフォの画面で見る場合、画像が強制的に縮小されることもある。

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

お知らせバナーの設定

設定項目は以下の通りです。

  • 表示開始日時
  • 表示終了日時
  • リンク先アドレス
  • お知らせ用画像の画像形式
  • コピー文
  • 1人につき1日1回表示調整するか/しないか
  • テストモード

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

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

お知らせバナーの設置

画像ファイルimage.xxxと設定ファイルsettingができたら、infoBannerフォルダに移動します。古い設定ファイルがある場合は、上書きします。

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

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

例)

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

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

wordpressに設置する場合

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

例)

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

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

設定のヒント

  • 設定項目は省略できません。
  • 表示終了日時は2017/03/01 23:59という形式で指定します。時分は省略できません。
  • 表示終了日時を過ぎると自動的に表示されないようになります。
  • リンク先がとくにない場合は、「#」と指定します。
  • コピー文が長いと、フォントサイズが小さくなります。
  • 1人につき1日1回表示するか/しないか調整できます。
  • 本番では必ず、テストモードを「本番モード」にします。
▲このページのトップへ