グリッドレイアウトを取り入れた WordPress デザインテーマ25選

この記事について

今回は WordPress テーマの中からグリッドレイアウトを利用しているテーマをご紹介いたします。
全体がグリッドでレイアウトされているものから極一部にだけ採用されているものまでバラエティに富んでいます。
紹介する中には有料のテーマもございますのでご利用の際はご注意ください。

デザインテーマの紹介

Aggregator

Aggregator - Thumbnail
テーマ全体がグリッドレイアウトになっている。
写真や動画コーナーはその中で更にグリッド化されている。

PICK UP「トップページ下部」

Aggregator - PICK UP


Paragams

Paragams - Thumbnail
縦に大きい画像を配置できるレイアウト。
グリッド部分にマウスオーバーすると背景色が変わるようになっている。

PICK UP「グリッド部分のロールオーバー」

Paragams - PICK UP


MyPhoto

MyPhoto - Thumbnail
写真ギャラリー用のテーマ。
各要素間に十分な余白をとったレイアウトになっている。

PICK UP「カテゴリー別ページ」

MyPhoto - PICK UP


Seven Five

Seven Five - Thumbnail
写真一覧部分と動画一覧部分がそれぞれ大きさの違うグリッドでレイアウトされている。
写真はロールオーバーで拡大画像が表示される。

PICK UP「動画一覧部分」

Seven Five - PICK UP


gRID!

gRID! - Thumbnail
1枚の特集記事写真以外は全て均等に配置されている。
写真はロールオーバーで詳細情報に切り替わる。

PICK UP「写真のロールオーバー」

gRID! - PICK UP


Bookcase ($30)

Bookcase - Thumbnail
メニュー部分以外は全てグリッドレイアウト化されている。
画像をクリックすると JavaScript により様々な動作が可能な状態になる。

PICK UP「画像クリック時の状態」

Bookcase - PICK UP


Zincious

Zincious - Thumbnail
個別記事一覧エリアがグリッド化されている。
カラフルな付箋が貼られているようなデザインになっている。

PICK UP「トップページ下部」

Zincious - PICK UP


Photoria

Photoria - Thumbnail
写真を大きく見せるグリッドレイアウト。
各マス目はロールオーバーで背景色が変化する。

PICK UP「マス目のロールオーバー」

Photoria - PICK UP


Smashing Multimedia

Smashing Multimedia - Thumbnail
写真コンテンツ掲載用のテーマ。
レーティングやコメント数も表示できる。

PICK UP「写真のロールオーバー」

Smashing Multimedia - PICK UP


Video

Video - Thumbnail
個別記事一覧エリアがグリッド化されている。
詳細なメタ情報が特徴。

PICK UP「個別記事一覧エリア」

Video - PICK UP

Theme Page: Video | Templatic

Suburbia

Suburbia - Thumbnail
特集記事エリアとそれ以外の部分がそれぞれ違う大きさのグリッドでレイアウトされている。
ブログのメタ情報エリアまでグリッド化されているのは珍しい。

PICK UP「マス目のロールオーバー+ブログのメタ情報エリア」

Suburbia - PICK UP


Showcaser

Showcaser - Thumbnail
ミニマルなギャラリー用テーマ。
各要素間に十分な余白をとったレイアウトになっている。

PICK UP「グリッドの拡大図」

Showcaser - PICK UP


Blocco ($75)

Blocco - Thumbnail
記事一覧画面がグリッドでレイアウトされている。
個別記事ページの写真もグリッド風に表示される。

PICK UP「個別記事ページ」

Blocco - PICK UP


Breza ($29.50)

Breza - Thumbnail
特集記事エリアがグリッドでレイアウトされている。
News 部分はスライダーになっていて横に続くグリッドスタイルになっている。

PICK UP「News 部分のスライダー」

Breza - PICK UP


Flex for WordPress ($20)

Flex - PICK UP
沢山のコンテンツが1ページに表示できるようになっている。
画像をクリックすると拡大画像が表示される。

PICK UP「画像拡大画面」

Flex - PICK UP


Tantalumize

Tantalumize - Thumbnail
ポートフォリオサイト用ではない、通常サイト用のテーマ。
特集記事エリアがグリッドレイアウト化されている。

PICK UP「特集記事エリア」

Tantalumize - PICK UP


Artistica ($69)

Artistica - Thumbnail
密度の高いレイアウト。
文字情報の少ないミニマルなデザインになっている。

PICK UP「グリッドエリア」

Artistica - PICK UP


GUMBALL SPECIAL

GUMBALL SPECIAL - Thumbnail
それぞれのマス目が豊富な情報を持つグリッドになっている。
タイトルとページナビゲーター以外は全てグリッドでレイアウトされている。

PICK UP「トップページ下部」

GUMBALL SPECIAL - PICK UP


Snippet ($65)

Snippet - Thumbnail
個別記事一覧エリアがグリッド化されている。
縦幅をゆったりと取っていて窮屈さを感じないデザインになっている。

PICK UP「トップページ下部」

Snippet - PICK UP


Imbalance

Imbalance - Thumbnail
大きい9枚の画像で構成されるグリッド。
画像はロールオーバーで記事の情報が見れるようになっている。

PICK UP「画像のロールオーバー」

Imbalance - PICK UP


Fotos

Fotos - Thumbnail
画面を広く使いたくさんの要素を配置できるようになっている。
それでいて画像を大きく見せられるようにスペースを割り振っている。

PICK UP「グリッドの拡大図」

Fotos - PICK UP


Gallery - Thumbnail
シックな配色で色彩の豊かが写真が映えるようになっている。
用途を表すテーマ名の通り画像サイズは大きめ。

Gallery - PICK UP

Theme Page: Gallery – WPZOOM

On Demand ($75)

On Demand - Thumbnail
写真を含む記事と動画を含む記事がグリッドで表示される。
ロールオーバーで枠の色が変化する。

PICK UP「グリッドエリア」

On Demand - PICK UP


Piego ($29.50)

Piego - Thumbnail
特集記事の部分がグリッド化されている。
画像はロールオーバーで個別記事ページにジャンプするか画像を拡大するかが選べる。

PICK UP「特集記事エリア」

Piego - PICK UP


Diabolik ($35)

Diabolik - Thumbnail
ポートフォリオページがグリッド化されている。
画像はロールオーバーで詳細情報が表示されるようになっている。

PICK UP「ポートフォリオページ」

Diabolik - PICK UP

MakeLeaps

MakeLeapsは見積書・納品書・請求書の発行管理クラウドソリューション。このブログでは、国内のフリーランスや中小企業の読者の悩み解決・成長に役立つ情報やMakeLeapsのニュースなどをお届けします!

MakeLeapsの他の記事