SANGO WEBINAR

2022.2.16

steelydylan

去年2021年の1月よりSANGOの開発を引き継いで行っています。

参考
SANGOの運営チームについてSANGOカスタマイズガイド

ご案内

  • チャット欄は参加者と発表者がコミュニケーションをするためにご活用ください
  • セッションに関する質問はチャット欄にご記入ください
  • ハッシュタグは#sangowpです
  • 発表スライドは後で公開します

この勉強会の目的

SANGO Gutenbergでトップページなどをカスタマイズできるようになる

今日お話しすること

  • SANGO Gutenbergの機能紹介
  • コンテンツブロックを使った部分的カスタマイズ
  • トップページやカテゴリートップページのカスタマイズ方法

1. SANGO Gutenbergの機能紹介

SANGO Gutenbergとは

WordPress 5.0から導入された新エディターGutenbergに対応したブロックプラグイン。
ショートコードを使わずに実際の画面に近い形で編集を行えるのが特徴

SANGO Gutenbergとは

20種類以上のカスタムブロックが利用可能なSANGO専用エディタープラグイン

SANGO Gutenbergのインストール方法

管理画面のダッシュボードよりインストール可能

全25種類の豊富なブロック

  • ヒーローブロック
  • フル背景ブロック
  • 記事一覧ブロック
  • FAQブロック
  • ボタンブロック
  • ボックスブロック
  • タイトル付きボックスブロック
  • 見出しブロック
  • アコーディオンブロック
  • タブブロック
  • メッセージブロック
  • 目次ブロック
  • 条件ブロック
  • スライダーブロック
  • タブブロック
  • リストブロック
  • 線ブロック
  • コードボックスブロック
  • 吹き出しブロック
  • 参考ブロック
  • 関連ブロック
  • タイムラインブロック
  • ボックスメニューブロック
  • プロフィールブロック
  • ボタングループブロック

全25種類の豊富なブロック

いくつか厳選してご紹介

ヒーローブロック （ピックアップ）

トップページのヘッダーやCTAなどに向いているブロック

  • SANGO公式サイトでも使われている
  • 動画も設定可能

記事一覧ブロック

記事一覧ブロックを使うとカード型やスライド型などSANGOの雰囲気で記事一覧を表示できます。

  • 条件指定可能
  • 記事スライダー設定可能
  • おすすめ記事ピックアップ可能
  • サイドメニューに人気記事一覧設置など

スライダーブロック

画像のスライドショーを表示するためのブロック

  • 画像一枚一枚にリンク先を設定することが可能

フル背景ブロック

  • セクションの区切り目をわかりやすくすることができる
  • 「トップページ用1カラム」のテンプレートで利用されるのがお勧め

記事を楽に執筆することができる

  • 豊富なブロック
  • カスタマイズできるカラーパレット
  • カスタマイズできる装飾、書式
  • カスタマイズできるブロック
  • 一度設定した内容の保存

カスタマイズできるカラーパレット

SANGOのオリジナルブロックに対する色はカラーパレットで定義しておくことができます。

参考
ブロックエディターのカラーパレットに独自のカラーコードを追加するための方法SANGOカスタマイズガイド

カスタマイズできる装飾、書式

文字をハイライトしたり太字にして目立たせたりするためのマーカーをカスタマイズすることができる機能

参考
ブロックエディターの装飾にオリジナルの装飾を増やすためのカスタム書式機能についてSANGOカスタマイズガイド

カスタマイズできるブロック

カスタムCSS機能を使って既存のブロックの見た目を調整することができます。

カスタマイズできるブロック

CSSの知識がなくカスタマイズが難しい場合はSANGO Land で近しいデザインを選ぼう

参考
SANGO Land - SANGOカスタムブロックのギャラリーサイトSANGO Land

一度設定した内容の使い回し

プリセット機能を使うと一度設定したブロックの内容を保存することができます

参考
SANGO Gutenbergで一度作ったブロックの設定を使い回す方法SANGOカスタマイズガイド

2. コンテンツブロックを使った部分的カスタマイズ

サイトのパーツごとにブロックエディターで作ることができる

SANGOコンテンツブロック機能を使えばウィジェットで挿入できる箇所に対して事前に作っておいた記事パーツを挿入できます。

参考
SANGO コンテンツブロック機能についてSANGOカスタマイズガイド

コンテンツブロックを使ったサイトの部分的カスタマイズ

例えばコンテンツブロックを使ってトップページヘッダー下にスライダーなどを表示

参考
固定ページを使わずにトップページのヘッダー下に記事スライダーを表示するカスタマイズSANGO カスタマイズガイド

コンテンツブロックを使ったサイトの部分的カスタマイズ

コンテンツブロックを使ってカテゴリートップページを一部カスタマイズ

参考
SANGOでカテゴリートップページをカスタマイズする方法SANGO カスタマイズガイド

3. 固定ページを使ったトップページやカテゴリートップページのカスタマイズ方法

SANGOの公式サイト

サイト型トップページを固定ページで作る

参考
HTML/CSS不要！固定ページを使って1カラムのサイト型トップページを作る方法SANGO カスタマイズガイド

サイト型トップページを固定ページで作る

SANGO Landを使うと簡単にデザインできます

参考
SANGO Land - SANGOカスタムブロックのギャラリーサイトSANGO Land

サイト型トップページを固定ページで作る

  • 欲しいパーツがあればこちらでリクエスト受け付けてます！
  • またSANGO Landにパーツを寄稿したい方は教えてください！
参考
SANGO Land - お問い合わせSANGO Land

よく忘れがちな設定👇

  • 外観→カスタマイズ→ヘッダーアイキャッチを非表示にする
  • シェアボタンを非表示にする
  • コンテンツの最大幅を設定する
  • コンテンツ上下の余白をなくす設定

カテゴリートップページのカスタマイズ方法

参考
カテゴリートップページに固定ページの内容を表示する方法SANGO カスタマイズガイド

今後の大きめなロードマップ

ブロックとSANGO Landを中心とした機能開発

  • プリセットの標準適用
  • 全てのページをブロックエディターだけで編集
  • SANGO Landのパーツを組み合わせた子テーマ数種類提供

SANGO WEBINAR

質問コーナー

SANGO WEBINAR

ご静聴ありがとうございました！

SANGO WEBINAR

ぜひアンケートにお答えください

参考
SANGOオンライン勉強会アンケート