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

【趣旨】 既にWordPressで構築済みのWEBサイトに、CloudFlareを導入して高速化（ついでにSSL化）する方法を解説します。 【CloudFlareの高速化の仕組み】 ざっくりですが、以下の仕組みによりWEBサイトの表示が高速化します。 CloudFlare公式サイト： https://www.cloudflare.com/ CloudFlareのCDN（高速に配信するために最適化されたネットワーク）に既存コンテンツをキャッシュさせる。 当該ドメインのネームサーバー情報を変更し、上記CDNを参照させるようにする これにより、いままでhttp://aaa.com/などとブラウザのアドレスに入力されると、ブラウザはDNS（ドメインと実際のサーバーの場所をひもづける賢い仕組み）に問い合わせて、既存サーバーにデータを取りに行っていましたが、CloudFlare導入後は、CloudFlareの高速で最適化されたCDNを見に行くようになり、表示が高速化されます。 【今回の前提環境】 以下の環境にCloudFlareを導入するものとします。 ・サーバー：エックスサーバー（X10プラン） ・CMS:WordPressで構築済み ・CloudFlare Pro版を購入 【既存サイト導入に対する問題点】 問題点１ 無料版の場合、SSL証明書発行にきっちり２４時間かかる。 =>Pro版を購入※すれば即時発行されます。今回は既にリリース済みサイトということもあり、Pro版を購入するものとします。 ※1サイト目は$20、2サイト目以降は、プラス$5 問題点２ ネームサーバーの浸透時間（ユーザーそれぞれの環境により異なる） =>どう問題か。以下に記載します。 ・ドメインのネームサーバーをCloudFlareのものに書き換える必要があるため、各ユーザーの環境次第で浸透時間に差がでます。 ・浸透早いユーザー（以下、早ユーザー）：CloudFlareのCDNにキャッシュされたコンテンツを見に行きます。 ・浸透遅いユーザー（以下、遅ユーザー）：エックスサーバーのコンテンツを見に行きます。 ・WordPressの設定（<?php bloginfo(...

【実現したいこと】 上の図において、要素１と要素２の下面を揃えたい。 【よく見る方法は...】 ・親要素に「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");...

【Affixとは】 サイドメニューなどを、画面と一緒にスクロールさせずに固定位置で表示するためのBootstrapのビルトイン便利JSです。 http://getbootstrap.com/javascript/#affix また、サイドメニューの上部高さとフッターの高さを指定すると、上部高さまで、および、フッターが表示されるとフッターに押されて画面と一緒にスクロールされます。 上部高さはoffsetオプションのtopで指定し、フッターの高さはoffsetオプションのbottomで指定します。 具体例は以下 $('サイドメニュー').affix({   offset: {     top: function () {       return (this.top = $('ヘッダー部分').outerHeight(true))     },     bottom: function () {       return (this.bottom = $('フッター部分').outerHeight(true))     }   } }); 【バグの事象】（v3.1.1で確認） スクロール中は動的にJSにより.affixクラスが付与され、position:fixed（自分でCSSに設定）となりサイドメニューの位置は固定され、bottom（フッター位置）までスクロールすると、動的にJSにより.affix-bottomクラスが付与され、position:absolude（自分でCSSに設定。top位置はJSが計算）となり画面と一緒に上に移動してゆきますが、スクロールで上部に切り返しても.affix-bottomが解除されず位置がフッターの上部に固定されたままになってしまいます。 （一旦、画面上部までスクロールすると.affix-topが付与され、サイドメニューは初期位置までジャンプします。その後画面下部にスクロールすると.affixが付与され正常動作（位置固定）しますが、bottomまでスクロールされると上記不具合（.affix-bottomクラスが付与さ...

Bootstrapのグリッドシステムで、カラムサイズがわかりづらいのでまとめてみました。 Bootstrap2.3 デバイス Phones Phones to Tablets Portrait Tablets Default Large Display ブレイクポイント 480px以下 767px以下 768px以上 980px以上 1200px以上 レイアウト幅 auto 見た目 724px 見た目 940px 見た目 1170px カラム数 N/A 12 1カラムの最大幅 auto（ブラウザ幅 - 20px - 20px） 42px 60px 70px カラムとカラムの隙間幅 N/A 20px（左にマージン） 30px（左にマージン） ネスト 可（再度rowかrow-fluidで囲う） オフセット （左空け） N/A 可 カラムオーダリング （右カラムと左カラムの入れ替え） N/A Bootstrap3 デバイス Extra Small Devices（Phones） Small Devices（Tablets） Medium Devices（Desktop) Large Devices（Desktop) クラスプレフィックス .col-xs- .col-sm- .col-md- .col-lg- ブレイクポイント 767px以下 768px以上 992px以上 1200px以上 レイアウト幅 auto（Max 767px） 750px（左右の15px×2含む） 970px（左右の15px×2含む） 1170px（左右の15px×2含む） 見た目 720px 見た目 940px 見た目 1140px カラム数 12 1カラムの最大幅 auto 60px（※１） 78px（※１） 95px（※１） 実際62px or 63px（※２） 実際80px or 81px（※２） 実際97px or 98px（※２） カラムとカラムの隙間幅 30px（左右に15pxずつパディング） ネスト （再度rowで囲う） 可 オフセット （左空け） N/A 可 カラムオーダリング （右カラムと左カラムの入れ...

【事象】 Bootstrap（v2.3）を使用したページに、jQuery gMap v3（http://www.smashinglabs.pl/gmap）を使用してGoogle Mapを表示したところ、コントロール画像が表示されない。 どうやら、imgタグに対するCSSがBootstrapとGoogle Mapで干渉している模様。 [BootstrapのCSS] img {     …     max-width: 100%;   <=これをコメントアウトすると表示されます。     … } 【対策】 Google Map用にCSSをオーバーライド #map .gm-style img {     max-width: inherit;  <=これを追加 } するとコントロール画像が表示されます。 【補足】 ちなみに、google map表示の設置方法 1.HTMLに空div用意 <div id="map"></div> 2.HTMLに必要なjsをロード <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="js/jquery.gmap.js"></script> （ソースは こちら ） 3.jsを記述 jQuery('#map').gMap({ address: '東京都◯◯◯□□□△△△', panControl: true, zoomControl: true, zoomControlOptions: {  style: google.maps.ZoomControlStyle.SMALL }, mapTypeControl: true, navigationControl: true, scaleContr...