Masonryは、JavaScriptグリッドレイアウトライブラリとして、まるで石の壁を作成するときに、石を石工 - （Mason）が造り上げたように、適切な垂直方向の間隔を置きながら隙がなく配置する形式です。 図式化すると次の図のように表すことができます。
これらの形式で 図や 文+図要約を配置するサイトがあります。 このウェブサイトでMasonryレイアウトのサイトのサンプルを確認することができます。 そして この記事でグリッド形式の WordPress テーマを調べることができます。 （現在使用中のこのブログのテーマもこの種類に対応します。）
WordPressの場合Masonryグリッド形式で文のリストを整理するテーマを選択すると、すっきりとしたレイアウトのサイトを実装することができます。 しかし、インターネットに記載されているMasonryソースを活用して、この機能を実装することも可能です。
下のスクリーンショットは、 態度 テーマにこの記事に記載されているMasonryソースを適用してMasonryグリッド形式でブログのリストを表示した様子です。
この場合は、次のようなCSSコードを追加してボックス形状が表示されるようでした。 （上の図は、原稿を縮小した形なので、境界線が正しく表示されないですね。実際に見ると非常にすっきり見えます。）
.blog .entry-meta-bar.clearfix {
border: 0px;
}
.blog section {
border: 0px!important;
}
.blog article {
border: 1px solid #DDD;
padding: 12px;
}
.blog #content > section {
margin-bottom: 0px;
padding-right: 2px;
padding-left: 2px;
background-clip: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
テストでCSSコードのみ適用してみました。 jQueryのバージョンが正しく適用されないですね。 jQueryのバージョンは このサイトを参考に実装すると思われる。 参考までに Tumblr Photoset Grid / Masonry Gallery for WordPress プラグインを使用すると、Masonryレイアウトのギャラリーを作成することができます。
コメントを残す