ポップアップして注意喚起する一行メッセージ

ポップアップして注意喚起する一行メッセージ
ランチョンセミナーへの参加申し込み、演題応募等の情報には締め切りが付きものです。ところが、こうした情報は最初にお知らせしただけでは、後から現れる最新情報に埋もれて、締め切りが忘れられてしまいます。締め切り間際に、自動的にメッセージがポップアップして、注意喚起してくれると便利なんですが・・・。

一行メッセージは、ホームページの特定のページにアクセスすると、数秒後に下からポップアップして、ユーザーに注意喚起するツールです。一行以内に書ける内容であれば何でも OK です。また、申し込みページなど関連ページにリンクを張ることもできます。

一行メッセージのサンプル

当ページの下に半透明のグリーンの色面にメッセージが出ています。クリックすれば当該ページにリンクします。これが一行メッセージです。左の × ボタンを押すと色面ごと消えます。

一行メッセージの特長

  1. 設定設置が簡単
  2. 色面が 5 種類から選べる
  3. 商用でも無料で使え、許諾不要

1. 設定設置が簡単

メッセージを読み込みたいページに3つのファイルを読み込み、ページのどこかに決められた書式にしたがって、リンク先アドレスと一行メッセージを書き込めば OK です。

2. 色面が 5 種類から選べる

色面は、赤、オレンジ、緑、青、紫の 5 色から、CSS クラスを指定することで選ぶことができます。CSS クラスを指定しない場合は、黒になります。

色面 クラス指定
class="red"
オレンジ class="orange"
class="green"
class="blue"
class="purple"
クラス設定なし

3. 商用でも無料で使え、許諾不要

一行メッセージは、デジタルエイドが開発し、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 で配布しています。
ですから、商用/非商用関係なく、無料でお使いいただけますし、許可を取る必要もありません。
また、プログラムを改変することもできます。ただし、改変したプログラムを利用または配布する場合は、オリジナルと同様に、CCライセンスの 表示 + 継承 を踏襲しなければなりません。
この場合、表示とは、ホームページ上にプログラムの著作権者を表示するのではなく、one-line.css や jquery.one-line.js の冒頭の著作権表示を消さないで残しておくだけで結構です。

一行メッセージの設定設置方法

一行メッセージは、jquery 3.2.1 に準拠して書かれています。よって、jQuery を読む込むことが前提です。
jQuery の読み込み方は、お使いの環境によって違うので詳細は省きます。

一行メッセージのフォルダとファイルの構成

one-lineフォルダ
|-jquery.one-line.js
|-one-line.css

one-line フォルダと中の2つのファイルの内容はまったく変える必要はありません。

html に設定する場合

  1. 作業をする前に、一行メッセージを設定したい html のバックアップを取っておきます。
  2. 1と同じ階層に、one-line フォルダを FTP でアップロードします。
  3. html の の直前に css ファイルを読み込むためのリンクを書きます。

    例)
    <link href="one-line/one-line.css" type="text/css" rel="stylesheet" />
    </head>

  4. </body> の直前に、 id="message-area" という div 要素を設定し、色指定をします。

    例)
    <div id="message-area" class="色">
    <a href="・・・リンク先アドレス・・・">一行メッセージの内容<a>
    </div>
    </body>

  5. 5. さらに </body> の直前に、jQuery と js ファイルへのリンクを書きます。

    例)
    <div id="message-area" class="色">
    <a href="・・・リンク先アドレス・・・">一行メッセージの内容<a>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="one-line/jquery.one-line.js" type="text/javascript"></script>
    </body>

  6. テストして意図通りになっていれば OK です。
  7. 意図通りになっていない場合は、html 内のパスを確認してください。

なお、複数ページに一行メッセージを設定する場合は、上位の階層に one-line フォルダをアップロードし、各 html から css ファイルや js ファイルへ正しくパスを通します。

WordPress に設定する場合

  1. 作業をする前に、必ず 現在のテーマフォルダ内の functions.php のバックアップを取っておきます。
  2. functions.php と同じ階層に one-line フォルダを、FTP でアップロードします。
  3. WordPress の管理画面にログインして、一行メッセージを設定したいページの末尾に id="message-area" という div 要素を設定し、色指定をします。

    例)
    <div id="message-area" class="green">
    <a href="・・・リンク先アドレス・・・">一行メッセージの内容</a>
    </div>

  4. functions.php に css ファイルと js ファイルを読み込むためのコードを書きます。
    以下は、xxxというスラッグのページから呼び出す場合の書き方です。

    例)
    function ol_enqueue() {
    if (is_single ('xxx')) {
    wp_register_style ('line_style', get_stylesheet_directory_uri()."/one-line/one-line.css");
    wp_enqueue_style ('line_style');
    wp_register_script ('line_script', get_stylesheet_directory_uri()."/one-line/jquery.one-line.js", array('jquery'), false, true);
    wp_enqueue_script ('line_script');
    }
    }
    add_action ('wp_enqueue_scripts', 'ol_enqueue');

  5. テストして意図通りになっていれば OK です。
  6. 意図通りになっていない場合は、バックアップしていた functions.php に戻し、技術担当者に設定を依頼しましょう。

設定に関する注意

  • 一行メッセージは表示される画面のサイズに合わせて、自動的に文字サイズを調整しますが、文が長すぎると、後ろの方が切れてしまうことがあります。
  • メッセージは 24字以内を推奨します。

一行メッセージの撤去

  1. 設定の際、上記コードを書き込んだファイルから設定コードをすべて削除します。
    ・jquery へのリンク
    ・one-line.css へのリンク
    ・jquery.one-line.js へのリンク
    ・id="message-area" の div 設定
    <div id="message-area" class="色"><a href="リンク先">一行のメッセージ</a></div>
  2. アップロードした one-line フォルダをすべて削除します。

一行メッセージのダウンロード


コメントを残す