BooksホームWebデザインjQueryPinterestっぽいレイアウトを作ってみるAdsjQuery2012.03.19以前、レンガ風に要素を配列するレイアウトを凄くよく見かけるようになり、それから一種のブームのように様々なリソースが出回りました。最近はあまり見かけなかったのですが、Pinterestの登場で、また似たようなレイアウトのリソースが出てきている印象です。masonryっていうプラグインがあるのですが、同じようなプラグインでWookmark-jQueryというのを昨日見かけましたので、空いた時間になんとなくPinterestっぽいレイアウトを作ってみる事にしてみました。Sampleソース調べるほど真面目な記事でもないので見た目を勘に頼って似せただけ。※あくまで「っぽい」です。});</script>imagesloaded.jsは無くても動きます。ボックスにはちょっと影を付けます。rgba(0,0,0,0.4);で、スクロールしたら付いてくるやつ。}});スクロールしてclass=”box”の要素が最上部に来たらclass=”follow”を追加してfixedさせます。z-index:9999;}ただ、IE8以下で動かないのでこのコードじゃダメですね。今回は面倒なのでこれで。あとはちょこちょこcssいじって終わりです。変わってねーじゃねーかっていう。雑感やはりmasonryのようなレイアウトは画像コンテンツとの相性が凄く良いですね。綺麗に配列されるので写真がとっても映えるし、画像のサイズが異なっても一定のスペースを保てますので、ページ全体のバランスもうまく取れる気がします。逆に、テキストコンテンツとの相性はとても悪いです。基本的にテキストコンテンツは左から右へ、真横に目線が流れますので、このようなレイアウトではその法則を乱します。「読ませるレイアウト」ではないですが、「ざっと流し見するレイアウト」としては最適かもですね。個人的には結構好きですが、テキストがあるとやっぱり見る気がしないですね・・使いどころには注意した方が良さそうです。余談Pinterestって本当に流行ってるのかな、っていう疑問も無くは無かったのでちょっとページビュー調べて見ました。数値は推定ですけど尋常じゃないPV数です。著作権の問題も出始めていますし、どうなるか分かりませんが、いろいろと注目しておきたいです。広告はありませんが、ユーザーに追加されるコンテンツの中心の一つに「ギフト」があり、この辺でマネタイズしてるっぽいです(※ちゃんと調べてない以上、個人的なメモでした。ワーク・Chibiのご紹介。"http://kachibito.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js-end");/*]]>*/タイトルとURLをコピーしました。