• メニュー
  • メニュー
WordpressPinterest風グリッドレイアウト

【一瞬で完成】WordPressで投稿をPinterest風グリッドレイアウトを作る方法

PinterestはPin止めできるピンボードのようなウェブサイトです。 WordPressでPinterest風グリッドレイアウトを実現する方法をご紹介いたします。

Pinterestはイベントだったり写真だったりお気に入りをピンしていくことであなたのコレクションを作ることができますが、ここではとりあえず投稿をグリッドレイアウトをする方法を解説したいと思います。

WordPressの新エディタGutenbergで
Pinterest風を実現

前まではPinterest風のグリッドレイアウトを表示させようと思ったら、自分でJQueryのJavascriptコードを書くか、グリッドレイアウトできるプラグインを利用する方法でした。

だが、しかし!

WordPress5.0から導入された新エディタのGutenbergとそのプラグインを利用することで、めちゃくちゃ簡単に実現できるようになりました。

あー、Wordpressってほんと進化しました。出たての1.xから使ってる身としてはこの進化には驚きですね。

ただ、標準のGutenbergではピンタレスとのようなグリッドレイアウト表示はできませんので、プラグインを使います!

おすすめは、
【Ultimate Addons for Gutenberg】になります。


Ultimate Addons for Gutenbergを
インストールしよう

まずは、Gutenbergの機能を強化するプラグイン「Gutenberg Blocks – Ultimate Addons for Gutenberg」をインストールしましょう。紫でUGとなっているプラグインです。

インストールすると、ブロック追加のところで、Ultimate Addons Blocksという項目が現れます。

クリックすると使用できる機能がアイコンで表示されます。


UAGのPost Masonryを使う

UAGってUltimate Addons for Gutenbergの頭文字をとった略だよ

ブロックを作成するのに+マークを利用しますが、+マークをクリックして、Ultimate Addons Blocksを開きます。

Wordpressで投稿をPinterest風グリッドレイアウト

このようにいろいろなメニューが出てきますね。

Wordpressで投稿をPinterest風グリッドレイアウト

ここで、Post(投稿)の表示に

・Post Grid
・Post Masonry
・Post Carousel

という3つのメニューがあります。

それぞれ下記の通りの表示になります。

  • Post Grid ⇒ 整列グリッド
  • Post Masonry ⇒ Pinterest風グリッド
  • Post Carousel ⇒ スライド風

Pinterest風グリッドにするには、「Post Masonry」を選びます。ポストメイソンリーと呼びます。Masonryとは石積みとか、ブロック工事という意味があります。記事投稿が石のように積まれていく様子がイメージできますね!!

折角なので、実際にいろいろ試して見ましょう。ただし記事に表示しているので横幅が狭いため、あまりピンタレスト風に見えないかもしれません。あしからず。。。


Post Masonry表示

サムネイルとタイトルだけで、横2列でMasonry表示してみました。


Post Grid表示

サムネイルなし、抜粋(Excerpt)ありでグリッド表示してみました。Gridだとすべてが同じ高さや幅で整列された形になります。

No post found!


Post Carousel表示

記事がスライドするカルーセルで表示してみました。すべてデフォルト設定です。

書いた人や日付、コメント、抜粋などすべてWordpress記事投稿時の右側のメニューから設定することができます。カルーセルの場合は、自動でスライド、何秒でスライドするかなども指定することができます。

動画ダウンロード

【超シンプル&使いやすい】VideoSolo 究極動画ダウンローダーを使ってみた

動画ダウンロードソフト「VideoSolo 究極動画ダウンローダー」を使ってみましたのでレビューしたいと思います。超シンプルで使いやすい、というのが率直な使用感です。ただホームページに書いてあるダウンロードサイトのすべてがすべてダウンロードできるわけではなかったので注意も必要です。 余計な機能がなく、ネットの動画ダウンロード専門!という使い勝手の良いソフトでした。 VideoSolo 究極動画ダウンローダーを使ってみた VideoSoloは別名InoVideoという名前で、ソフトの名前はこの名前になっています。 15日間完全版として試用することができるのでぜひ一度試してみてください。月額のサブスクで980円、年間の場合2980円、永久の場合は4980円になります。 断然永久ライセンス4980円がお得ですね。 ・VideoSolo(Inovideo)の公式サイト→ https://www.inovideoapp.com/ja/ シンプルこそ正義! インターフェース(ソフトの画面)が非常にシンプルで使いやすいが最初の印象です。 ダウンロードサイトからURLをコピーして、Inovideoのリンクに貼り付けるだけです。 分析をクリックして、解像度を選ぶとダウンロードが始まります。 この画面には、ダウンロード中とダウンロード完了の2つしかりません。めちゃくちゃ簡単ですね。 URLをコピペして分析・解像度を選ぶだけ 動画によっては解像度を選ぶことができます。144pから1080pまで選ぶことができます。YoutubeだとHDの解像度から選べるケースが多いです。 ダウンロードの形式に動画と音声を選ぶことができます。フォーマットには、mp4やwebmを選ぶことができます。 動画を動画(mp4)としてでも音楽(mp3)としてもダウンロード可能 Inovideoは動画と音楽を選択することができ、Youtubeの動画などをmp3としてダウンロードすることができます。 意外とこの機能がシンプルに備わっていないソフトって多いんですよね。 Youtubeの高画質動画もmp3の音楽としてダウンロードすることができます。 ミスチルとかまとめ動画をmp3でダウンロードもいいですよね。なんでミスチルだけ削除されないんだろう?? ダウンロード可能サイトを検証してみた 公式ページには以下のように記述がありましたので試してみました。 VideoSolo 究極動画ダウンローダーはYoutube、Twitter、Facebook、Pornhub、ニコニコ動画、FC2動画、Xvideo、Dailymotion、Hulu、Gyao、ThisAV、Avgleなどの1,000以上の動画配信サイトに対応して、元動画のオリジナル品質でこれらのサイトから8K、4K、1080Pなどの動画をMP4でダウンロードできます。複雑な操作が必要なし、動画再生ページのURLがあれば手軽にダウンロードすることができます。 結果は以下の通りになりました。正直かなりあれこれ細かいことをしても難しいサイトがそのままできなかった感じでした。 しかし、Youtubeや主要SNSは簡単にダウンロードができました。 Youtube→ 解像度の選択も含め、かなり高画質でダウンロードできましたTwitter→ かなり高画質でダウンロードできましたFacebook→かなり高画質でダウンロードできましたPornhub→かなり高画質でダウンロードできましたニコニコ動画→うまくいきませんでしたFC2動画→うまくいきませんでしたXvideo→ダウンロードできましたDailymotion→かなり高画質でダウンロードできましたHulu→うまくいきませんでしたGyao → うまくいきませんでしたThisAV→うまくいきませんでしたAvgle → 短いサンプルしかダウンロードできませんでした 永久ライセンスがたったの4980円。 ダウンロードをよくするあなたにとってこのソフトはダウンロード生活をめちゃくちゃ簡単にしてくれるツールになると思います。 それもたったの4980円です。 月額だと980円でちょっと割高なので買うならば永久ライセンスを購入することをお勧めします。お試しだとしても月額で購入はお得ではないので止めておきましょう。 買うなら買う、買わないなら買わない。 1000サイト以上のダウンロードが可能とありますが一部制限がある中では優秀なソフトだと思いますので試してみてください。 ライセンスをゲットしたら登録コードにメールアドレスと一緒に入力するだけでOKです。 まとめ: ネットからダウンロードだけで完結したい場合は、VideoSolo(Inovideo)はおすすめできるソフトウェアです。冒頭にも書きましたがシンプルは正義!だと思っています。 URLを貼り付けるだけで簡単に世界中の動画がダウンロードできるなんて幸せの真骨頂ですね。動画編集やPCの画面録画を利用しないならば、VideoSolo(Inovideo)を永久ライセンス購入がおすすめですよ。
Read More

設定はすべて右のメニューできます

投稿画面の右側にブロックを詳細を設定するところがあります。はい、あると思います。

ここでいろいろ細かく設定することができます。ざーっとですか以下のようなものが設定可能です。是非いろいろ弄ってみてください。

  • Post Type (何を表示するか)
  • タクソノミー(カテゴリーかタグか)
  • カテゴリーorタグ(どの項目を表示するか)
  • 項目数(表示する投稿の数)
  • Order by (何順に並べるか)
  • 並び順(昇順、降順)
  • カラム(何列にするか(最大4まで)、高さを揃えるか)
  • Crousel(カルーセルの設定、表示や送りスピードなど)
  • 画像(サムネイル、アイキャッチ画像は表示するか)
  • Content(日付や抜粋などのメタを表示するか)
  • Read More Link(Read moreの表示を変える、新しいタブにするか)
  • Typography(文字の設定)
  • Colors(色の設定)
  • Spacing(グリッドのマージンやパディング設定(余白設定))
Ultimate Addons Blocksの設定

ギャラリーやポートフォリオサイトにも使える

設定次第で写真ギャラリーやポートフォリオサイトにすることもできます。

これは写真ギャラリーのように見えますが、ContentをすべてOFF、タイトルの文字サイズを0、READ MOREも表示オフ、パディングもすべて0、 Blog Background Colorの色を白にして、以下のように表示することができます。

投稿、固定ページ、メディアと表示するものを選ぶことができて、メディアを選ぶと同様のことができると思うのですが、なぜかメディアの画像名が表示されるので(こういう仕様?ほんとに?)、投稿や固定ページのアイキャッチを表示する形で実現しています。

アイキャッチだけを追加して、本文には大きな画像を載せたページを作り、ギャラリーというカテゴリを作ってあげてそれだけを表示すれば、写真ギャラリーページを作ることができそうです!

個人の写真販売サイトだって作れるし、カメラマンの実績などにも使うことができますよね!

容易にあんなことやこんなことができてしまうGugenbergは創造力を掻き立てるすごいエディタだと思っています。


Pinterest風グリッド表示まとめ

Pinterestのようにハートマークを付けてあなたの好みに表示させる機能はありませんが、そのようにMasonryの形で表示しました。

好みの表示にするには全く別の仕組みが必要になりますのでこれは別で記事にしたいと思います。

今日のまとめです。

  • Gutenbergの拡張だけで実現できる!
  • 拡張はUltimate Addons for Gutenbergプラグインがおすすめ


有益情報も流しているのでツイッターもぜひフォローお願いします。


参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です