サブマリン型バナーの設定・設置

サブマリン型バナー

更新日: 2018年9月30日

ユーザーがある程度、コンテンツを読み進むと、画面下方から小さな潜水艦(サブマリン)が浮上します。潜水艦が水平になると、その下にお知らせ画面を表示します。

サブマリン型バナーを見る

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

サブマリン型バナーは、以下のようなフォルダとファイル構成になっています。

submarineフォルダ
   |-submarine.js (動きを制御するプログラムファイル)
   |-submarine.css (デザインファイル)
   |-setting (設定ファイル)
   |-red.png (潜水艦のカラーバリエーション)
   |-・・・

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

サブマリン型バナーの設定

カラーバリエーション
設定項目は以下の通りです。

  • 表示開始日時
  • 表示終了日時
  • リンク先アドレス
  • タイトル(13文字以内)
  • サブタイトル(17文字以内)
  • 本文
  • ボタン名
  • 潜水艦のカラーバリエーション(赤/紫/緑/黄/青/オレンジ)

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

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

サブマリン型バナーの設置

設定ファイルsettingができたら、submarineフォルダに移動します。古い設定ファイルがある場合は、上書きします。
以下、通常のhtmlファイルに設置する場合と、Wordpressに設置する場合に分けて、設置の仕方を説明します。

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

  1. 作業をする前に、サブマリン型バナーを呼び出す html のバックアップを取っておきます。
  2. submarineフォルダを、潜水艦を呼び出したいページと同じ階層にアップロードします。
    |-
    |-html (サブマリン型バナーを呼び出すページ)
    |-submarine フォルダ
        |-submarine.css
        |-submarine.js
        |-setting 
        |-red.png 
        |-・・・
    
  3. 潜水艦を呼び出したい html の </head> の直前に、cssファイル、jquery.js、jsファイルへのリンクを書きます。

例)

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

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

wordpressに設置する場合

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

例)

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

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

アンカーの張り方

htmlならソースファイルを開きます。Wordpressなら潜水艦を呼び出したい記事(固定ページ)を開き、テキストモードにします。
潜水艦を呼び出したいあたりの文末に <span id="anchor"></span> と書き込みます。これは表示されません。

設定のヒント

  • 設定項目は省略できません。
  • 表示終了日時は2017/03/01 23:59という形式で指定します。時分は省略できません。
  • 表示終了日時を過ぎると自動的に表示されないようになります。
  • リンク先がとくにない場合は、「#」と指定します。
▲このページのトップへ