ワイドレターの設定・設置

ワイドレター

更新日: 2018年9月30日

ワイドレターは画面下に表示領域(余白)を作り、そこに一文字ずつ破片が飛び込んできて、文字になってメッセージを伝えるサイト内バナーです。
コピーの他、文字の色、表示領域の高さと色と不透明度、リンク等を指定することができます。
コピー文の長さに応じてフォントサイズが自動的に変わります。

ワイドレターを見る

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

ワイドレターは、以下のようなフォルダとファイルの構成になっています。

wideLetterフォルダ
  |-wideLetter.js (動きを制御するプログラムファイル)
  |-wideLetter.css (デザインファイル)
  |-setting (設定ファイル)

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

ワイドレターの設定

  • 表示開始日時
  • 表示終了日時
  • コピー文
  • リンク先アドレス
  • 文字の色
  • 余白の高さ
  • 余白の色
  • 余白の不透明度
  • 1人につき1日1回表示調整
  • テストモード

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

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

ワイドレターの設置

設定ファイルsettingができたら、wideLetterフォルダに入れる。

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

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

例)

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

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

wordpressに設置する場合

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

例)

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

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

設定のヒント

  • 設定項目は省略できません。
  • 表示終了日時は2016/03/01 23:59という形式で指定します。時分は省略できません。
  • 表示終了日時を過ぎると自動的に表示されないようになります。
  • リンク先がとくにない場合は、「#」と指定します。
  • 文字の色など色はすべて16進法で指定してください。
  • 余白の高さは「フル画面」「下半分」「下4分の1」「最小画面」の中から選んでください。
  • ワイドレターの表示を1人につき1日1回に調整することができます。
▲このページのトップへ