タグ: レイアウト

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

blog.cdbk.net

最初に体裁を整えるための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に手を入れていこうと思います。

このブログのデザイン、トップレイアウトを変更。

blog.cdbk.net


このブログのデザイン、トップページのレイアウトを変更しました。
トップは記事が見えるのではなく、一枚画像のサムネイルが並ぶ形にしてCSS3によるシャドウなどをいれています。
これからHTML5が本格的になるとCSSは現状メインの2.1から３にシフト。ちょっとしたアニメーションやエフェクトが簡単に付けられるようになるので一足早くこのブログにも導入。ということで今後も少しずつ取り入れていきます。
そして、実験的に広告を取り去ってみました。
一部記事に入れているものは残っていますが、しばらく広告はとります。