Gutenberg完全対応のSANGO Gutenberg について

HTML/CSS不要!固定ページを使って1カラムのサイト型トップページを作る方法

注意事項

この記事を実践するには、SANGO 2.7.0以上、SANGO Gutenberg 1.28.0以上である必要があります。もしバージョンがこれらのバージョンより低い場合はバージョンアップ後にお試しください

SANGO Gutenbergプラグインをご存知ない方はこちらの記事をお読みください。

SANGO gutenberg 抜群の使い心地!SANGO Gutenbergを使おう!
プラグインをインストール

はじめて導入する場合は、以下のボタンよりSANGO Gutenbergプラグイン(zipファイル)をダウンロードしてください。

最新版をダウンロード

(ライセンス:GPL)

この記事では、SANGO Gutenbergのみを使って綺麗なLPページを作る方法を解説していきます。

固定ページの設定

まずは固定ページを作ります。画面上部にあるadminメニューより、固定ページに移動します。

固定ページのテンプレートをトップページ用1カラム(タイトルなど出力なし) に設定します。

コンテンツ下に表示されるシェアボタンを非表示に設定します。

コンテンツ設定にて、コンテンツの最大幅を設定し、コンテンツ上下の余白をなくす にチェックを入れます。

LPページを作るのに最適なブロックを設置

以下のブロックを使うとLPページを使うのに最適かもしれません。

  • SANGO ヒーローブロック
  • SANGO スライダーブロック
  • SANGO フル背景ブロック

SANGO ヒーローブロック

ヒーローブロックはトップページのメインビジュアルや記事の途中に注意を引きたいコンテンツがある場合に有効なブロックです。

SANGOヒーローブロックを記事の先頭に設置するとLPページっぽさが出ると思います。ツールバーの右から2番目の項目をクリックすると、幅を指定できますので、全幅 を選択します。

また、SANGOヒーローブロックには画像だけではなく動画を差し込むことも可能です。より注意を引きたい場合は動画を使うのも手かもしれません。

SANGO スライダーブロック

ページの先頭にスライダーブロックを設置してもLPページ感が出ると思います。スライダーブロックは画像をスライドショーで表示するためのブロックです。画像にリンクを設定することも可能です。

こちらも同じく全幅を選択してスライダーを画面いっぱいに表示していただくことができます。

SANGO フル背景ブロック

SANGOフル背景ブロックは、コンテンツの途中に背景色もしくは背景画像を設定することでコンテンツごとの区切りを強調するのに利用できます。フル背景ブロックの中には全てのブロックを入れることができます。以下の画像では、フル背景ブロックの中に、見出しブロックと記事一覧ブロックを挿入しています

完成したページのDEMO

デモページを作りましたので実際にどのように見えるかご確認ください。

24 COMMENTS

アバター
ゆまうま 2021/09/11

スマホでの2カラム表示の仕方

こんにちは。 Gutenbergでカラムのブロックを追加して2カラム表示を試したところ、PC上でしか反映されませんでした。 スマホでも表示させるためにはどのようにしたらよいのでしょうか。ご教示いただけたらと思います。よろしくお願いします。

回答を見る
アバター
千秋 2021/09/03

サイトロゴと設定した固定ページのタイトル間との余白を変更したい

★恐れ入りますがサイトURLは非表示にてお願いいたします。★ いつもお世話になっております。 この度デモページを参考にさせて頂き、トップページに新着記事と人気記事の一覧を作成してみました。 GutenbergですとCSSなど使用することなく簡単に作成することができ、大変有難く思っております。 表示に関しまして、3点質問ございます。 ①サイトのタイトルロゴと今回設定したタイトル(新着記事)との間の余…

回答を見る
アバター
taka_258 2021/09/01

ヒーロー・フルサイズ背景が全幅で表示されない

ブロックエディタでホームページを作成したのですが、SANGOヒーロー・フルサイズ背景が画面幅いっぱいに表示されません。 キャッシュの削除・子テーマのオフ・ネット検索等試しましたがダメでした。 カスタマイズで紹介されていた通りに「全幅」指定にもしています。 LPページテストのように画面幅いっぱいに表示させたいと思っています。 よろしくお願いします。

回答を見る
アバター
daizi 2021/08/17

サンプル記事の機能紹介

https://saruwakakun.design/lp-test/ サンプル記事の機能紹介の画像を3つ横並びさせているものを再現したいのですが、どれを活用して作成したらよいかわかりません。いろいろ試したのですが、同じものができず…。お手数ですが教えていただけますでしょうか。

回答を見る
アバター
さとる 2021/07/23

SANGO スライダーブロックのレスポンシブ表示の際の余白

SANGO スライダーブロックをレスポンシブ表示する際に、 縦横比が違う画像を入れると余白が青く表示されてしまいます。 解決策などございましたらご教示頂きたく存じます。 よろしくお願いします。

回答を見る
アバター
はろはろ 2021/06/20

SANGOスライダーをモバイルでも複数同時表示させたい

いつもお世話になっております。 トップページカスタマイズでSANGOスライダーを用いて、カテゴリページのアイキャッチを表示したいと考えております。 表示したいのは3カテゴリであり、PCでは複数同時表示設定が可能であるのですが、モバイルでは1画像表示に固定されてしまいます。 (ブログURLを共有いたします:https://harolog.com/) モバイルでも3画像を同時表示することは可能でしょう…

回答を見る
アバター
headcocoro 2021/06/12

Sangoスライダーを利用時(スライドをレスポンシブ表示する)で高さ確定の遅延を無くしたい

こんにちは。 Sangoスライダーが実装されたことをとてもうれしく思っています。 この度、Sangoスライダーをキービジュアル画面(スライド)に使ってみました。 一つ困ったことがあり、 スライダーオプションの「スライドをレスポンシブ表示する」にチェックを入れて、スマホで重たいスライド(横1125px高さ1500pxの画像5枚)を表示すると、ローディングまでスライドの高さが確定しないためか、 スマホ…

回答を見る
アバター
rieslife_j 2021/06/10

ページ記事一覧のアイキャッチ画像が更新されない

お世話になります。 感覚的にページを作ったり記事を書くことができて、 初心者ながら少しずつページ作りをすすめることができています。 ありがとうございます。 すすめていくうちに 自分の力だけではどうにもできないことに直面し、 質問したいと思い書き込ませてもらいました。 LPページとして固定ページを作成する際、「SANGOタブ」を使用して カテゴリー毎にタブを変える形で設定しました。 左端のタブを新着…

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。