当サイトは旧サイトで2024年12月更新をストップいたしました。
新サイト・新ページには新たなコンテンツを盛りだくさんで運用しております。新サイト・新ページは semlaboratory.jp/column/ にアクセスいただきますようよろしくお願いいたします。
REMODALは、モーダルウィンドウを出力するjQueryプラグインです。
って、「そもそもモーダルウィンドウって何？」という方は、REMODALを組み込み済みのサンプルページをチェックしてください。
組み込み済みサンプルでは、フッターにあるバナーの部分に仕込んでいまして、フッターのバナーをクリックしますと、コンテンツが浮き上がるように出てきます。
そのウィンドウのことをモーダルウィンドウと言います。
モーダルウィンドウは、ログインフォームをページ遷移せずに出力するような、ページ遷移をせずに特定のコンテンツを出力する際に使われることが多いですよね。
ですので、そういう場合は、全ページ共通で出力されることが多いと思います。
モーダルウィンドウの特徴ではないでしょうか。
今回のスクリプトは、簡単手軽に組み込めるのが特徴な反面、普通にHTMLで実装するとURLに引数を付けることになるため、注意が必要です。
javascriptでの実装も出来るようですが、今回はjavascriptでの実装は致しません。
出来ないことはないんですが、冒頭でも書いたように不明瞭な点があるため、HTMLでの実装で進めたいと思います。
それではすすめていきたいと思います。
以下が本家サイトとGitHubです。
諸々のファイルはGitHubeでダウンロードして頂けます。
phptemp_rm_160809.zip
サンプルです。
フッターのバナーにモーダルウィンドウを呼び出すリンクを仕込んでいますので、フッターにあるバナーをクリックしてみてください。
当サイト内の「SEOの基礎知識」の中のコンテンツです。
REMODALは、HTMLタグに特定記述することでウィンドウを出力することが出来、また、javascriptでイベントをトリガーにしてウィンドウを出力することが出来ます。
ここでは、HTMLに特定記述をする方法だけを紹介しています。
javascriptでイベントを拾って・・・という方法は、オプションを駆使し幅広いケースに対応する場合に用いるには有用だと思いますが、そこまでの規模は想定していませんし、そこまでモーダルウィンドウを多用するのはどうかと考えた次第です。
また、本件では、ヘッダ内でcanonicalの指定を入れています。
というのも、HTMLに記述してウィンドウを出力する時、URLに引数をつけているため、重複コンテンツのような状態が出来てしまうため、引数がつかない元URLを明示しておかなければいけないという流れです。
GitHubからダウンロードしてきたフォルダから「/dist/remodal.css」と「/dist/remodal-default-theme.css」と「/dist/remodal.js」を適宜必要フォルダに移動してください。
そして、それらを設定ファイルに記述して読み込ませるようにしてください。
本件では、「/_set/css.php」、「/_set/js.php」に記述し、全ページ共通にしています。
jQueryファイルは本家で記述されていたバージョンのjQueryファイルを使用していますので、お間違いなくお願い致します。
次に、「/_set/head.php」と「/_set/foot.php」に以下の記述をしてください。
※最上段に記述してください。
<div class="remodal-bg">
※foot.phpの内容全てです。
<div id="foot"> <div id="flink"> <div class="flinkw"> <ul> <li><a href="/column/web/160809/01/"><?php echo "$pankuzu_top"; ?></a></li> <li><a href="/column/web/160809/01/cate_01/"><?php echo "$cate_01_linkname"; ?></a></li> <li><a href="/column/web/160809/01/cate_02/"><?php echo "$cate_02_linkname"; ?></a></li> <li><a href="/column/web/160809/01/cate_03/"><?php echo "$cate_03_linkname"; ?></a></li> <li><a href="/column/web/160809/01/cate_04/"><?php echo "$cate_04_linkname"; ?></a></li> </ul> </div> <div class="flinkw"> <ul> <li><a href="/column/web/160809/01/sitemap.php"><?php echo "$oth_page_01_linkname"; ?></a></li> <li><a href="/column/web/160809/01/privacy.php"><?php echo "$oth_page_02_linkname"; ?></a></li> </ul> </div> <div class="flinkbnr"><a href="#modal"><img src="/column/web/160809/01/img/fbnr.gif" alt="" /></a></div> // aタグの内容を変えています。 <div class="flinkbnr"><a data-remodal-target="modal"><img src="/column/web/160809/01/img/fbnr.gif" alt="" /></a></div> // aタグの内容を変えています。 </div> </div> <div id="footdisc"><h4><?php echo "$footdisc"; ?></h4></div> <div id="footad"> <address>Copyright © <?php echo "$sitename_a"; ?> All Right Reserved.</address> </div> // モーダルウィンドウ内に出力するコンテンツここから <div class="remodal" data-remodal-id="modal"> <button data-remodal-action="close" class="remodal-close"></button> <h1>Remodal</h1> <p>Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.</p> <br> <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button> <button data-remodal-action="confirm" class="remodal-confirm">OK</button> </div> // モーダルウィンドウ内に出力するコンテンツここまで </div> // head.phpに記述した「class="remodal-bg"」の終了タグです。
書き換えたaタグのリンク先とデータの指定で使っている「modal」は任意の文字列で問題ありません。
モーダル内に出力するコンテンツ内容を二つ用意し、それぞれ「modal_01」「modal_02」に分けて使って頂くことも出来ます。
その場合、モーダルウィンドウ内に出力するコンテンツの外枠にある「data-remodal-id="modal"」の”modal”の部分を適宜変えてくださいね。
最後に、全ページに、それぞれのページのURLをcanonicalで明示してください。
例えばですが、「/sitemap.php」でしたら、canonicalで「/sitemap.php」と記述してください。
$pageurl = '/***.php'; // 重複コンテンツ対策
<link rel="canonical" href="<?php echo "$pageurl"; ?>" />
最後のcanonicalの指定をしないと、Search Console内で”重複するメタデータ”とか出てくると思われます。
そうなると重複コンテンツになりますからね、注意したいところです。
上記で設定が完了です。
後は、修正したファイルをアップすれば、正常に動作します。
jsでオプション設定をすることが出来たりしますので、その点については、本家サイトを見てみてください。
オプション設定をするとモーダルウィンドウの演出を少々変えることが出来るようです。
補足ですが、head.phpに記述した「class="remodal-bg"」は無くても大丈夫ですが、「class="remodal-bg"」を記述することによって「class="remodal-bg"」に囲まれているコンテンツが、モーダルウィンドウが出ている時にエフェクトがかかるようになっています。
本件でのサンプルでは「pagetop」の部分だけはエフェクトがかからず、そのほかのコンテンツ部分はエフェクトがかかっています。
もし、全てのコンテンツにエフェクトをかけたいと思われましたら、「<body>」の直後に「class="remodal-bg"」、「</body>」の直前に閉じタグをそれぞれを入れて頂くとベターです。
WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。
いかがでしたでしょうか？
jsを使いだすと若干面倒かもしれませんが、一個所や二個所でモーダルウィンドウを使う程度でしたら、十分に機能的で軽いスクリプトですね。
モーダルウィンドウを使った時に厄介なのは、モーダル部分のコンテンツが多いと、隠しコンテンツになってしまうというところなんですね。
そして、その分量が多く全ページで共通して使われているコンテンツだと、サイトの評価に大きな影響を与えてしまうことになります。
そのため、検索エンジンがクロール出来る範囲でモーダルを設置する場合は、コンテンツ量とその範囲に十分に気を付けなければいけないことを、忘れないでおきたいところです。
執筆 : 清水 隼斗
「モーダルウィンドウを出すjQueryプラグイン「REMODAL」の使い方と注意点」のシェアをお願い致します！