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

投稿

WordPressのwp_get_archivesで月別リストを生成する際に<li>をカスタムする方法

【About】 WordPressの wp_get_archives('type=monthly') で月別のリスト<li>を生成する際に、特定の年月のアーカイブページを表示した際に<li>に特定のクラス（class="active"など）を設定する方法を記載します。また、おまけとして、functions.phpによらず、テンプレートで<li>をカスタマイズする方法も記載します。【通常の書き方】＜WordPress＞ーテンプレート <p>月別アーカイブ</p> <ul> <?php wp_get_archives('type=monthly')); ?> </ul> とすると＜HTML＞ <p>月別アーカイブ</p> <ul> <li><a href="http://hoge.com/2013/12/">2013年12月</a></li> <li><a href="http://hoge.com/2013/11/">2013年11月</a></li> </ul> などと生成されます。これを、ある月を表示しているときに、該当のリスト<li>に class="active" を追加したいとします。【カスタマイズ方法】＜WordPress＞ーテンプレート <p>月別アーカイブ</p> <ul> <?php wp_get_archives('type=monthly')); ?> </ul> （変更なし）ーfunctions.php functions.phpに以下を追加 <?php ・・・ function my_archives_link($link_html){ $my_month = '/'...

IE8でCSS3の「background-size: cover;」対策

【About】 CSS3で採用された「background-size」ですが、「cover」は画像の縦横比を維持したまま、背景領域を完全に覆うよう背景画像を配置（大概は縦か横が切り取られる）してくれるとても素晴らしいスタイルです。ところが残念なことにIE8では対応していません。しかしこんな便利なスタイルをたかがIE8のためにゆずるわけには行きません。デキる子にはベストエフォートを、デキない子には苦労をしてがんばってもらう。（ポリフィルというやつ）その方法を以下に提案します。【方針】モダンブラウザでは当然CSS3の「ackground-size:cover;」を指定。 IE8では、JavaScriptで幅に応じたそれぞれの背景画像を動的に変更する。（IE8用に複数の背景画像を用意する必要があります。）【HTML】  <script src="/path/to/jRespond.js"></script>・・・※ ・・・ <div id="myArea"></div>・・・ここに背景画像を表示・・・ ※　jRespond.js（IE8用に設置）ブレイクポイントを指定して、ブレイクポイント毎の動作を指定できるすぐれもの https://github.com/ten1seven/jRespond 【CSS】（モダンブラウザはこれで表示） #myArea { background: url(/path/to/image/back.jpg) no-repeat center top; background-size: cover; ・・・ } ・・・ @media (min-width: 1200px) { #myArea { height:500px; } } @media (min-width: 992px) and (max-width: 1199px) { #myArea { ...

PhotoSwipeでテキストリンクから特定の画像のPhotoSwipeギャラリーを起動する方法

【PhotoSwipeとは】スマホサイトで写真ギャラリーを設置したいときに使えるライブラリスワイプで画像がめくれて便利！レスポンシブサイトの画像ギャラリーにオススメ。（optionに、imageScaleMethod: "fitNoUpscale"　とすれば画像が最大100%で表示されるのでPCサイトでも使えます。） https://github.com/codecomputerlove/PhotoSwipe 【実現したいこと】通常は画像サムネイルのクリック（or タップ）でPhotoswipeギャラリーを起動します。それとは別に、新着情報などのテキストリンクから特定の画像のPhotoSwipeギャラリーを起動したい。【方針】 var instance = $("#Gallery a").photoSwipe(options); instance.show(0); で、最初のPhotoSwipeギャラリーを起動できることから、テキストリンクに任意の要素（data-swipeとする）と、クラス（.swipe-targetとする）を設置し、.swipe-targetの上から順番にdata-swipeに番号を振ってゆき、.swipe-targetがクリックされたら、data-swipeから番号xを取得し、instance.show（x）で目的のPhotoSwipeギャラリーを起動する。【HTML】ヘッダー（もしくはフッター）部分（jQueryバージョンを使用） <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.2.min.js"><\/script>')</script> <script src="/js/vendor/klass.min.js"...

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) { ...