WordPressプラグイン

ピンタレスト風のMasonryレイアウトを作成できるWordPressプラグイン「Masonry Layout」

ピンタレストはMasonryレイアウトといって、画像を積み重ねるように表示させるレイアウトになっています。

画像や写真などを表現させたいサイトの場合、このレイアウト構成を使いたいですよね。

Masonry Layoutは、そんなピンタレスト風のレイアウトをショートコードで簡単に作成できるプラグインです。

プラグインの特徴

  • Masonryレイアウトをショートコードで簡単に作成できる

プラグインのダウンロード

プラグインのダウンロードは下記のリンク先からもできますしWordPress内で「Masonry Layout」と検索してもダウンロードが可能です。現在のバージョンは「1.8」。

プラグインの使い方

管理画面の場所

「メインサイドメニュー」>「WP Masonry」から設定ができます。

wp-masonry1

プラグインの設定

プラグインを導入したら、「WP Masonry」をクリックして次の画面から基本設定を行います。その後にショートコードで貼り付けるという流れです。

wp-masonry2

Create Shortcodes

Reference Name : レイアウトの名前を任意で設定します。(5文字以上必要です。)

Generic Shortcode : 無料版の場合はここのチェックは出来ません。

Layout Theme : 無料版はDefaultレイアウトのみ利用可能です。

Columns : カラム数を選択できます。

Post Type : 投稿タイプを「投稿」か「固定ページ」から選択します。(投稿を選択するとカテゴリー選択が表示されてそちらも設定できます。固定ページを選択すると任意の固定ページを選択できます。)

Thumbnail Image Size : 表示されるサムネイル画像のサイズを設定します。

Post Per Load : 最初に画面を開いた時に何枚の画像を表示させるかの選択です。

Order By : どの順番で画像を並べるかの設定です。defaultは投稿日時順に並べます。

Order : 昇降の設定です。

Responsive : レスポンシブの設定です。ここは「YES」にしましょう。

Pagination Style : 「Post Per Load」で設定した枚数以上に画像を読み込みたい場合に「Ajax Lord More Button」は読み込みボタンを押すことで次の画像を読み込ませることが出来ます。プロ版を利用すると「infinity Scroll」が選択でき、自動で読み込みができる無限スクロールの設定ができます。

Use Lazy Loading : Lightboxを使うかどうかの選択ですが、プロ版のみ使用可能です。

Custom Query : 「Lazy Loading(画像の遅延読み込み設定」ですが、これもプロ版のみ使用可能です。


設定が終わったら「Save」をして、次のショートコードを投稿したいページに貼り付けて完成です。

wp-masonry3

設定完了

ショートコードを貼り付けて表示させると次のようにちゃんと表示されました。

wp-masonry4

使ってみた感想のまとめ

僕の画面サイズだと2カラムぐらいがちょうどいいですね。

おもったより簡単に設定できたし、表示もちゃんとされたので良かったです。

テーマに区切った画像を一覧で表示したい時に使えるなって思いました。

是非試してみてください。

最新の更新を
プッシュ通知で購読しよう



関連記事

  1. サイトの読み込み状況を視覚的に表示できるプログレスバープラグイン…
  2. WordPressにPush7の購読ボタンをショートコードで簡単…
  3. WordPressカテゴリー一覧のチェックボックスが移動しないよ…
  4. リンクにアイコンを付けるWordPressプラグイン「Exter…
  5. よく読まれている人気記事をランキング形式でウィジェットに表示でき…
  6. 画像をクリックするとフワッと大きく表示されるLightboxプラ…
  7. WordPressウィジェットをビジュアルエディタでカスタマイズ…
  8. アニメーションのカウントダウンタイマーを設置できるWPプラグイン…

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

おすすめ記事

LPテンプレートColorful(カラフル)をおすすめする9つの理由

この記事では、LPを簡単に作ることができるLPテンプレートColorful(カラフル)がどんな人にお…

WordPressにGoogleタグマネージャーを設定できる「DuracellTomi’s Google Tag Manager for WordPress」

WordPressにタグマネージャーを設定できるプラグインってないのかな〜と思っていたらありました。…

WordPressからプッシュ通知を自動で配信できる公式プラグイン「Push7」

Push7の購読者にWordPressを更新すると同時に自動通知できるプラグインが「Push7」です…

WordPressでメルマガ登録を促せるCTAプラグイン「WordPress Call To Action Plugin」

ブログを読み終わった後に「Ebookを無料でプレゼント」というボックスを見たことがある人は多いですよ…

パソコンが苦手な人がパソコンを好きになるための5ステップ

「パソコンの前に座るのが苦痛だな〜。パソコンってすごく難しいからいやだな〜。」と思っているそこのあな…

プッシュ通知を購読

Twitter でフォロー

PAGE TOP