カウンセラーのための 「あなたに相談したい！」と言われる、集客／顧客獲得型ホームページの作り方

趣旨 iframe（親）に異なるドメインのページ（子）を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する 方法 普通にやると、 「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com".  Protocols, domains, and ports must match. 」 などと怒られてしまいますのでこちらを参考に http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascript コード hoge.com（親） <html> <head>     <title>親</title>     <script src="js/jquery.js"></script>     <script>         window.addEventListener('message', function(e) {         var iframe = $("#fugapage");         var eventName = e.data[0...

趣旨 レスポンシブサイトで（PCサイトと構造を共通にする関係で）、ヘッダー部にロゴやらテキストやらバナーやらを配置する必要があり、スマホ時の ファーストビューの大部分をヘッダー部が占拠 してしまい、コンテンツまでが遠くなってしまうことは多々あります。 その場合、グローバルナビゲーション部分にアンカー（<div id="gnavi"等）を作っておいて、ページ遷移時にそのアンカーにリンク（<a href="/page/#gnavi"等）し、グローバルナビゲーションが画面の最上部に表示されるようにする（ヘッダー部分は上部にスクロールすれば見える）のもひとつの方法です。 しかしスマホサイトのみでの仕組みのため、 ソースコードはいじりたくありません。 そんなときに、JavaScriptで画面の幅を判定し、スマホ時のみリンクアドレスに動的にアンカー名を追加してしまう方法を記載します。 方法 方法は簡単で、以下のコードでOKなはずです。 $(document).ready(function () {     if ($(window).width() < 768) {         $('a').click(function(e) {             if ($(this).attr('href') && !$(this).hasClass("in-page-link")) {                 $(this).attr('href', $(this).attr('href') + "#gnavi");             }         });     } }); 解説 特に難しいところはないと思いますが、注意点としては、上記を実装すると、ブラウザの幅が　768px未満のときは、全てのリンクにアンカー名（ハッシュ、#gnavi）が追加...

【趣旨】 HTMLで、あるページ（page1.html）から別のページ（page2.html）の特定の場所にリンクさせる場合 あるページ page1.html <a href="page2.html#anchor">アンカーの位置へジャンプ</a> （以降、アンカーリンクと呼びます。） 別のページ page2.html <div id="anchor">アンカーの場所</div> などと記載しますが、これだとpage1から、『 一瞬で 』page2の特定の場所に移動してしまい、（page2のヘッダー部分が見えないだったりすると特に）ユーザーが迷子になりやすいです。 また、コンバージョンに向けてストーリーでページ遷移を設計している場合も、そのアンカーリンクでストーリーが途切れてしまい、コンバージョン率の低下を招きます。（きっと） そこで今回はアンカーリンクで何が起ったのか、自分がどのページのどこにいるのかをユーザーに認識させる、ユーザーにやさしい方法を記載します。 【実装】 page1.html <a href="page2.html?ancid=anchor">アンカーの位置へジャンプ</a> page2.html <div id="anchor">アンカーの場所</div> （従来どおり） jQuery $(document).ready(function () {     // ------------------------------     // 別ページへのやさしいアンカーリンク     // ------------------------------     var url = $(location).attr('href');     if (url.indexOf("?ancid=") != -1) {         setTimeout(function(){           va...

【趣旨】 WordPressのショッピングカートプラグイン「Welcart」に、メールマガジン「acmailer」（無料で使えるメール配信CGI）を連動させる。 【既出の方法】 http://tukuruder.com/archives/1449 http://www.be-friend.biz/201204/ などにすばらしい記事がありますが、方針としてはいずれも ・登録はWordPressの「functions.php」に、Welcart登録完了時のフックにアクションフック（もしくはフィルターフック）して登録（acmailerのreg.cgiにパラメータを渡してPHPの file_get_contents を実行） ・削除と更新はjQueryでacmailerのreg.cgiにパラメータを渡して$.ajaxを実行 としています。 【今回の方法】 どうせなら、WordPressのfunctions.phpに手を加えることなく、すべてjQueryでやってしまったほうが気持ちがいいということで、登録もjQueryで行います。 【WordPressの設定】 functins.php => 特に記載なし 【jQuery】 （削除、変更は上記URLのブログご参照） $(function(){   //登録   $('.customer_form_entry input[name="regmember"]').click(function () {       // メールアドレス、パスワードを1回のみ入力にするために値設定（オプション。HTML側はhiddenにしておきます。）     $('.customer_form_entry #mailaddress2').val($('.customer_form_entry #mailaddress1').val());     $('.customer_form_entry #password2').val($('.customer_form_entry #password1').val());       //メールアドレス...

【実現したいこと】 上の図において、要素１と要素２の下面を揃えたい。 【よく見る方法は...】 ・親要素に「position:relative;」 ・子要素に「position:absolute;」、「bottom:0;」 とすると、左右のdivの高ささえ揃えておけば、下面を合わせられますが、BootstrapなどのCSSフレームワークを使用していたりして、既存のスタイルと干渉してしまう場合に、JavaScript（jQuery）で実現する方法を記載します。 【JavaScriptでの実現方法（考え方）】 上の図において、スクリプトを使用し、「A」、「B」、「C」を高さを取得し、計算により「D」の高さを取得します。 「D」=「A」-「B」-「C」 この「D」を要素２の「margin-top」に追加してあげます。 今回は、レスポンシブ（RWD）に対応するため、ウィンドウの幅を変えた時にも「margin-top」を設定し直す仕様とします。 【実装】 jQuery(document).ready(function() {   adjustPosition();     $(window).resize(function () {     adjustPosition();   });   function adjustPosition(){       var heightA = $("要素１").outerHeight();       var heightB = $("テキスト部").outerHeight();       var heightC = $("要素２").outerHeight();       var heightD = heightA - heightB - heightC;       if (heightD > 0) {         $("#要素２").css("margin-top", heightD + "px");...

【やりたいこと】 トップページと下層ページで共通のJavaScriptを使用している場合で、相対パスで記述している場合に、ファイル名「hoge.jpg」を「fuga.jpg」に変更したい。 【HTML】 下層ページの場合： <img src="../img/hoge.jpg" id="myHogeImg" alt=""/> トップページの場合： <img src="img/hoge.jpg" id="myHogeImg" alt=""/> 【JavaScript】（jQuery） $(document).ready(function () {   $("#myHogeImg").attr('src', $("#myHogeImg").attr("src").replace(/^(.*img\/)(.+)$/, "$1fuga.jpg")); }); 【解説】 replace( /^(.*img\/) (.+)$/ , "$1fuga.jpg" )の部分の解説 /^(.*img\/) src="img/ もしくは src="../img/ （imgの前は何でも良い） => $1 に格納 (.+)$/ hoge.jpg（img/ 以降の任意の文字） => $2 に格納（使用はしない） "$1fuga.jpg" img/fuga.jpg もしくは ../img/fuga.jpg に変更 以上です。 本年もスキルを磨くとともに、日々の業務で得た知見を公開してゆきたいと思います。 よろしくお願いします。

[何についてのお話？] ajaxを使用し、１ページで完結するお問い合わせフォームを設置している場合に、Google Analytics等のコンバージョンをどのように取得するようにするかというお話です。 ajaxで実装する場合、javascript（jQuery）はだいたい以下のようになるかと思います。 [フォーム送信ボタン押下時に動かすスクリプトの例] jQuery(document).ready(function ($) {     $('フォーム').submit(function () {         // 値のバリデート（省略）               if (バリデートNG) {             return false;         } else {             var str = $(this).serialize();                       $.ajax({                 type: "POST",                 url: "mailpost.php", // メールを送信するPHP                 data: str,                 success: function (msg) {              ...

HTML <img src="tel.png" alt="0123-45-6789"  data-tel="0123-45-6789"/> （<span data-tel="0123-45-6789">0123-45-6789</span>とかでもOK） JavaScript $(document).ready(function () {     // 実際は初回とウィンドウリサイズ時に実行（※1）     if ($(window).width() <= 480) {         $("[data-tel]").each(function(){             if ($(this).parent().get(0).tagName.toLowerCase() != "a") {                 var tel = $(this).attr("data-tel");                 $(this).wrap("<a href=" + 'tel:' + tel + "></a>");             }         });     } else {         $("[data-tel]").each(function(){             if ($(this).parent().get(0).tagName.toLowerCase() == "a") {                 $(this...