[WordPress] CSSを使用してMasonryグリッド形式でブログ記事の一覧を表示する

Masonryは、JavaScriptグリッドレイアウトライブラリとして、まるで石の壁を作成するときに、石を石工 - (Mason)が造り上げたように、適切な垂直方向の間隔を置きながら隙がなく配置する形式です。 図式化すると次の図のように表すことができます。

Source:http://smashinghub.com/
Source:http://smashinghub.com/

これらの形式で 文+図要約を配置するサイトがあります。 このウェブサイトでMasonryレイアウトのサイトのサンプルを確認することができます。 そして この記事でグリッド形式の WordPress テーマを調べることができます。 (現在使用中のこのブログのテーマもこの種類に対応します。)

WordPressの場合Masonryグリッド形式で文のリストを整理するテーマを選択すると、すっきりとしたレイアウトのサイトを実装することができます。 しかし、インターネットに記載されているMasonryソースを活用して、この機能を実装することも可能です。

下のスクリーンショットは、 態度 テーマにこの記事に記載されているMasonryソースを適用してMasonryグリッド形式でブログのリストを表示した様子です。

Mansonry in Attitude  -  WordPress AttitudeをMansonryグリッド形式で変更する

この場合は、次のような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レイアウトのギャラリーを作成することができます。

メモ:


コメントを残す

*メールアドレスは公開されません。