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

投稿

Movable Typeのpagenate（プラグインはPageBute）で分割されたページ数をmetaタグのtitleとdescriptionに設定する方法

【趣旨】 Movable Typeのpagenate（プラグインはPageBute）で分割されたページ数をmetaタグのtitleとdescriptionに設定する方法を以下に記載します。 Movable TypeのプラグインPageButeを利用すると、ブログ記事リストが http://hoge/ http://hoge/index_2.php http://hoge/index_3.php ... とページ分割されます。 SEOの観点から、metaタグのtitleやdescriptionは一意のものを使いたい場合、以下のように設定します。 <!DOCTYPE html> <html> <head> ... <mt:SetVarBlock name="mypage" strip_linefeeds="1" trim="1"><?php $data = $_SERVER["REQUEST_URI"]; list($domain,$blog,$page) = explode("/",$data); preg_match('/[0-9]+/', $page, $m); if ($m[0]) { echo $m[0]; } else { echo "1"; } ?></mt:SetVarBlock> <title>タイトルタイトル｜<$mt:Var name="mypage"$>ページ目</title> <meta name="description" content="テキストテキストテキスト｜<$mt:Var name="mypage"$>ページ目"> ... 以上

Bootstrap2.3とBootstrap3のグリッドシステム比較（一覧表）とBootstrap3のPSDテンプレート無料ダウンロード

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 可カラムオーダリング（右カラムと左カラムの入れ...

Sass（SCSS）のTIPS

本体サイト http://sass-lang.com/ CSSをSCSSにコンバート http://css2sass.heroku.com/ チートシート http://sass-cheatsheet.brunoscopelliti.com/ ごちゃごちゃしてきたSCSSをきれいにするコマンド [コンソールで] $ sass-convert --from scss --to scss --in-place path/to/file.scss 以前書いたまとめ http://tomoosuzuki.blogspot.jp/2013/06/sassscsscompass.html

ajaxを使用し１ページで完結するお問い合わせフォームのコンバージョンの取り方（案）

[何についてのお話？] 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) { ...

BootstrapとGoogle Map Apiの干渉

【事象】 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...

MovableTypeでクエリーからGET値をPHPで取得して、そのパラメータで記事を動的に出力する方法

【実現したいこと】 MovableTypeで、クエリー（http://◯◯◯.com/?aaa=bbbの?以下）からパラメータをPHPで取得して、MovableTypeの変数に引き渡して、取得したパラメータで特定カテゴリの記事を動的に出力する。【呼び出し元】（ウェブページ、インデックステンプレートなどから） <a href="<$mt:BlogURL$>list/?category=hogehoge">カテゴリー「ほげほげ」の記事を動的に出力</a> ↓ 【呼び出し先】（インデックステンプレートなどで） <mt:Ignore></mt:Ignore> <mt:SetVarBlock name="mycategory" strip_linefeeds="1" trim="1"><?php $mycategory = $_GET['category']; echo $mycategory; ?></mt:SetVarBlock> <mt:Ignore></mt:Ignore> <mt:SetVarBlock name="mycategorylabel" strip_linefeeds="1" trim="1"><?php if ($mycategory == "hogehoge") { $my_category_label = "ほげほげ"; } else if ($mycategory == "fugafuga") { $my_category_label = "ふがふが"; } else if () { ... } echo $my_category_label; ?>...

自分がiframe内のコンテンツか、単独ウィンドウのコンテンツか判定する方法

入力フォームを、PCのときはfancyboxで表示し、スマホのときは単独ウィンドウで表示する要件があり、完了画面の閉じるボタンの処理をそれぞれで変更したい場合の方法（前者はfancyboxを閉じる、後者は単独ウィンドウを閉じる） $(document).ready(function () { $('閉じるボタン').click(function(){ if(window != parent){ parent.jQuery.fancybox.close(); // fancyboxを閉じる } else if (window == parent){ window.close(); // 単独ウィンドウを閉じる return false; } }); });