Gutenbergのカラムブロックでポートフォリオページを爆速で作る

Gutenbergでポートフォリオページ(製作実績のページ)を作ってみたらめちゃくちゃ簡単・便利だったのでご紹介します。

写真やイラストなどをたくさん並べて表示するポートフォリオページやギャラリーページとカラムブロックは相性ピッタリです。

目次

カラムブロックの挿入方法

Gutenbergのブロック追加+でレイアウト要素>カラムと進み追加します。

カラム数の変更は下の動画をご参照下さい。

Gutenberg 6.0.0 以降

Gutenberg 6.0.0 ではカラムがもっと操作しやすくなっています。

SANGOでポートフォリオページを作ってみた。

まずはこのブログでも使っているWordPressテーマSANGOでポートフォリオページを作ってみました。

ページ属性>テンプレートで1カラム(サイドバー無し)を選ぶ

ポートフォリオページはサイドバーなしのシングルカラムのページレイアウトがオススメです。

カラムブロックを追加

カラム数は3~4くらいに設定します。

カラムに画像やリンクを挿入

画像へのリンクはエディター右メニューでリンクURLを設定できます。

こんな感じになります

出来たページはこんな感じです。

テキストリンクはなく画像だけの方がおしゃれかもしれませんね。

Snow Monkeyで作ると簡単におしゃれになる

100%GPLの有料テーマSnow Monkeyでもポートフォリオページを作ってみました。

Snow Monkey Blocksで最近リリースされた「ブロークングリッド」セクションのブロックを使うとおしゃれな今どきっぽいページが爆速で作れます。

WordPress テーマ Snow Monkey
ブロークングリッドなセクションブロックを追加した、Snow Monkey Blocks v4.3.0 をリリースしました! Snow Monkey Blocks は、WordPress のブロックエディターに実用的で便利なブロックを追…

出来上がりはこんな感じ

制作動画

Snow Monkey BlocksとSnow Monkey テーマの組み合わせでブロークンブロックとカラムブロックを使う様子を撮ってみました。

今までグリッドレイアウトを作るときはいちいちHTMLを書いていましたが、Gutenbergのカラムを使えば一切HTMLを触ることなくノーコーディングでスピーディーにページ制作が出来ます。

ご注意

Snow Monkey BlocksはSnow Monkey以外のテーマでも使えますが、「ブロークングリッドセクション」はSnow Monkeyのみで使えます。

今まで時間がかかって億劫だったポートフォリオページ制作も手軽に更新できますね。まだ若干慣れないと使い方がわかりにくいかもしれませんが、Gutenbergはどんどん進化しています。是非実際Gutenbergエディターを触って「速さ」を体感してみて下さい。

Gutenbergエディターの使い方【GIF動画つき】
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次