masonry

jQuery(function($){

$(window).on(‘load’, function() {

$(‘.grid’).masonry({
// options
itemSelector: ‘.grid-item’,
columnWidth: ‘.grid-item’,
stagger: 30
});
});

});

画像の読み込みが終わってから動かさないと、外側の縦幅の計算がうまくいかない。
親要素のクラスに「grid」、子要素のクラスに「grid-item」(上のサンプルだとそうなる)と設定すること。

http://cly7796.net/wp/javascript/started-with-masonry/

GAの目標にContactForm7をトラッキング

//無料体験レッスンの送信をGoogleアナリティクスへ
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
ga( ‘send’, ‘event’, ‘Contact Form’, ‘submit’ );
}, false );

GAには、3番目をカテゴリ、4番目をアクションとして登録すれば良い。
カテゴリ:Contact Form
アクション:submit

MW WP Form エラー発生箇所にスクロールする

エラー発生箇所にスクロールする。

//問い合わせのエラー発生時にエラー箇所へスクロールさせる
$(document).ready(function(){
if ( $(‘.mw_wp_form .error’)[0] ) {
var errorEl = $(‘.mw_wp_form .error’).eq(0);
var position = errorEl.parent().offset().top;
$(‘body,html’).delay(200).animate({scrollTop:position}, 600, ‘swing’);
}
});

FlexBox

親要素に、display:flex;
子要素に、flex:(数字);

(数字)は、幅のpxなどを指定するのではなく、比率を指定する。
子要素が3つある場合、flex:1;flex:2;flex:1; と指定すると、真ん中の要素は両脇の要素の2倍の幅になる。

IE10,11で子要素から中身がはみ出す時 「-ms-flex: 0 1 auto;」