一行メッセージのダウンロードと設定設置

一行メッセージのダウンロードと設定設置

本ページでは、下からポップアップして注意喚起する一行メッセージをダウンロードできます。あわせて、ダウンロードした一行メッセージの設定設置のしかたについて詳しく解説します。

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

本ページの下のほうで、圧縮ファイル one-line.zip がありますので、ダウンロードしてください。その one-line.zip を解凍すると、以下のフォルダが現れます。

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

これらのフォルダやファイルの内容は、まったく変える必要はありません。
なお、jquery.one-line.js は jQuery のプラグインとして書かれています。
jquery.js 3.x を読み込んでください。

設定設置の流れ

  1. 一行メッセージを設定するページ(ファイル)のバックアップを取る。
  2. 一行メッセージを設定する。
  3. 設定ファイルからプログラム等にリンクを張る。
  4. one-line フォルダ等をアップロードする。
  5. テストする。

ここでは、通常の html に設置する場合と 代表的な CMS WordPress に設置する場合に分けて、具体的にコードを例示しながら解説します。

通常の html に設定する場合

通常の html とは、プログラムで生成されたものではなく、html と css というプログラム言語で書かれたホームページのことです。

  1. 作業をする前に、一行メッセージを設定したい html のバックアップを取っておきます。
  2. 一行メッセージを設定したい htmlファイル の </body> の直前に、id="message-area" という div 要素を設定して、その中にメッセージを書き込みます。
    例)
    <div id="message-area">学術CD/DVD製作費1万円割引クーポン発行中</div>
    </body>
    メッセージにリンクを張ることもできます。
  3. 同じ div 要素にクラスで色を指定をします。
    例)
    <div id="message-area" class="色">学術CD/DVD製作費1万円割引クーポン発行中</div>
    なお、色のクラス指定は次のようになります。
    カラーエリアクラス指定
    class="red"
    オレンジclass="orange"
    class="green"
    class="blue"
    class="purple"
    クラス設定なし
  4. さらに、</body> の直前に、jQuery と jquery.one-line.js を読み込むリンクを書きます。
    例)
    <div id="one-line" class="色"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js">
    </script>
    <script src="one-line/jquery.one-line.js" type="text/javascript">
    </script>
    </body>
  5. 同じファイルの </head> の直前に one-line.css を読み込むリンクを書きます。
    例)
    <link href="one-line/one-line.css" type="text/css" rel="stylesheet" />
    </head>
  6. 上記の設定の終わったファイルを保存し、FTPソフトでアップロードして、既存のものに上書きします。
  7. 同時に one-line フォルダを設定ファイルと同じ階層にフォルダごとアップロードします。
  8. テストして意図通りに動けば OK です。

意図通りにいかない場合は、設定ファイル内のパスを確認してください。
ファイル名やパスをミスすると、動きません。
どうしてもうまくいかないときは、専門家に任せましょう。

WordPress に設定する場合

  1. 作業をする前に、現在のテーマフォルダ内の functions.php のバックアップを取っておきます。
  2. WordPress の管理画面にログインして、一行メッセージを設定したいページを開きます。
  3. html で編集できるモードにし、末尾に id="message-area" という div 要素を設定し、その中にメッセージを書き込みます。
    例)
    <div id="message-area">学術CD/DVD製作費1万円割引クーポン発行中</div>
    </body>
    メッセージにリンクを張ることもできます。
  4. 同じ div 要素にクラスで色を指定をします。
    例)
    <div id="message-area" class="色">学術CD/DVD製作費1万円割引クーポン発行中</div>
    色のクラス指定は、上記「通常の html に設定する場合」の 3 をご参照ください。
  5. functions.php に css ファイルと js ファイルを読み込むためのコードを書き、保存します。 以下は、xxxというスラッグのページから呼び出す場合の書き方です。
    例)
    function cb_enqueue() {
    if (is_single ('xxx')) {
    wp_register_style ('oneline_style', get_template_directory_uri()."/one-line/one-line.css");
    wp_enqueue_style (oneline_style');
    wp_register_script ('oneline_script',
    get_template_directory_uri()."/one-line/jquery.one-line.js",
    array('jquery'), false, true);
    wp_enqueue_script ('one-line_script');
    }
    }
    add_action ('wp_enqueue_scripts', 'cb_enqueue');
  6. FTP ソフトで one-line フォルダを、 上記の functions.php と同じ階層にフォルダごとアップロードします。
  7. テストして意図通りに動けば OK です。

意図通りにいかない場合は、バックアップしていた functions.php に戻し、技術担当者に設定設置を依頼してください。

一行メッセージの撤去

  1. 設定の際、上記コードを書き込んだファイルから設定コードをすべて削除します。
    • jquery へのリンク
    • one-line.css へのリンク
    • jquery.one-line.js へのリンク
    • id="message-area" を設定した div 要素
  2. アップロードした one-line フォルダをすべて削除します。

一行メッセージの使用条件

一行メッセージは、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 です。
jquery.one-line.js と one-line.css 冒頭の弊社のクレジットは消さないでください。
プログラムの改変は自由ですが、改変したプログラムは、本プログラムと同様、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 で公開しなければなりません。
なお、商用/非商用関係なく、許可なく、お使いいただけます。

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

下記のダウンロードボタンから一行メッセージが入手できます。

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


コメントを残す