Pinterest風レイアウトのWordPressテーマ「Gridly」の初期ロード時の崩れを修正

最初に体裁を整えるためのjQuery(masonry)が走っているのですが、機転のトリガーになるものが指定されていないので、

画像などが読み込まれた後(サイズなどが取得できた後)に動くよう、

/wp-content/themes/gridly/js/functions.js?ver=3.4.2

// masonry code
$(document).ready(function() {
  $('#post-area').masonry({
    // options
    itemSelector : '.post',
    // options...
  isAnimated: true,
  animationOptions: {
    duration: 400,
    easing: 'linear',
    queue: false
  }
  });
});
 
下記のように$(window).load()を追記
// masonry code
$(document).ready(function() { $(window).load(function(){
  $('#post-area').masonry({
    // options
    itemSelector : '.post',
    // options...
  isAnimated: true,
  animationOptions: {
    duration: 400,
    easing: 'linear',
    queue: false
  }
  });
 });
});

これで多少崩れにくくなりました。

レイアウトでinline要素がかなり使われているのでその辺りはCSSに手を入れていこうと思います。

GumroadにてガーリーなWordPressブログテーマを公開

Blogdesign 01
ガーリーなデザインのWordPressテーマをGumroadへ公開しました。
現状、Alpha版でとりあえず見える程度ですが、レスポンシブデザインでスマートフォンにも対応しているので背景画像とタイトルロゴファイルを変えて自分のデザインでといった時にも使えると思います。
海外のファッションブログなどを参考に、記事の幅100%で画像が表示されるようにしており、スマートフォン上でも画面幅に最適化されるようにリサイズ処理をCSSにいれています。
不具合な都度対応でbeta→正式版へとバージョンアップする予定です。
仕様はHTML5 / CSS3 / less.js / jQuery。
今のところ$5。
サンプル / ダウンロード($5)