この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売上の一部が還元されることがあります。
すこしブログをサボってて、気づいたら最近のSANGOが凄すぎることになっていました。
トップページのカスタマイズをしていましたが、SANGOの進化がすごすぎてこの記事を書いています。
知らないのはもったいない！
この記事では、SANGO歴3年の私がびっくりしたSANGOの新しいカスタムブロックについて書いています。
ちなみにワードプレスでSANGOを使うならサーバーはConoHa WING 
がおトクです。
ConoHa WING なら1,000円オフでSANGOテーマが購入できますよ。
SANGOのカスタムブロックはこんな感じです
数年前（？）ワードプレスのエディターはクラシックからグーテンベルグに移行しました。
▼使い方はこちらをどうぞ。
グーテンベルグが始まった最初の頃は、今思うと使いにくい仕様でした。
それでも当時はクラシックと比べると記事が書きやすくなったと思ったし、楽しくブログを続けられるきっかけにもなりました。
ただ、最近のグーテンベルグはグーテンベルグそのものも使いやすくなっているし、SANGO独自の進化もすごいんですよね。
iPhoneが進化するみたいに、グーテンベルグもSANGOも進化しています。
アコーディオン
アコーディオンブロックは開いたり閉じたりできるブロックです。
アコーディオンブロックの中にはボックスを入れたり吹き出しを入れたり、いつもの記事を書く時と同じようにブロックを追加できます。アコーディオンの中にアコーディオンを入れることもできますよ。
あらかじめ開くか閉じるか。お好きにどうぞ。
閉じてるアコーディオンの影を消すのも簡単です。
これは実際に「影を消したいな〜」と思っていたらブロックの設定にチェック項目があり驚きました。影を消すのはCSSいじると大変な作業です。
今は影が欲しいか欲しくないか、好きな方を選ぶだけ。やってみてくださいね。
SANGOヒーロー
ヒーローブロックは、通常と2分割（画像左右）と選べます。
2分割では見出しや説明文を入れる場合は画像は高さのあるものを選んだ方が良さそうです。
SANGO FAQ
Q&Aのボックスで、区切り線を選べます。
- 最近見てよかった映画はなんですか？
- 劇場版きのう何食べた？です。
- 楽しみなドラマは何ですか？
- エミリーインパリのシーズン２です。
- 最近、ハマっている食べ物はなんですか？
- 西友の焼き芋です。
- 区切り線なし
- 点線区切り
- 線区切り
ブロガーに100の質問！とかで使えそうですね。もちろんレビュー記事にもどうぞ。
関連記事
関連記事ブロックを使ってエディター上で記事を呼び出せるようになったのは画期的でした。
- 段落ブロックで「/関連記事」と入力して関連記事ブロックを呼び出す
- 呼び出したい記事タイトルに含まれるワードで検索
- リンクスタイルを選ぶ（テキストリンク・カード3種類）
以前ならID番号探してショートコード打ち込んで表示させていた関連記事。今はエディター上でできるんです。一瞬です。
日付の有無も選べるので、トップページやカテゴリーページなどの記事紹介で日付を表示したくない時も簡単です。（以前はCSSで消してた）
- リンクを貼りたい記事を検索して呼びだす
- リンクスタイル選べる（テキストリンク・カード3種類）
- 日付表示あり・なし選べる
関連記事のカード3種類とテキストリンクはこんな感じ
カードは、すでにカスタマイズしている場合は反映されてしまうので注意。
【2021年】今年買って良かったもの｜暮らしを便利に＆楽しくするアイテムまとめ
【2021年】今年買って良かったもの｜暮らしを便利に＆楽しくするアイテムまとめ
参考リンク
外部リンクのカードを作ることができます。
▼デフォルトはこちら。
▼アイコン・アイコン下の文字・記事タイトル・リンク先タイトルを変更できます。
▼カスタムCSSでカスタマイズもできます。
＊カスタムCSSに記載したコードは次の「コードボックス」で書いています。
コードボックス
カスタマイズ記事に使えるコードボックスです。（元々のコードボックスデザインをCSSでカスタマイズしている場合は反映されます）
▼コードをハイライトをオフ
.reference{
background:#d7d1d6;
font-size:90%;
text-align:center;
color:#fff;
padding:1em;
}
.reference .refttl {
border-right:dashed #fff 1px;
}▼コードをハイライトをオン
.reference{
background:#d7d1d6;
font-size:90%;
text-align:center;
color:#fff;
padding:1em;
}
.reference .refttl {
border-right:dashed #fff 1px;
}↑このコードは「参考リンク」でカスタムCSSに記載したコードです。
SANGO条件
表示する・しないを選んでブロックを作れます。
- デバイスで表示するしないを分ける
- カテゴリーで表示するしないを分ける
- タグ条件で表示するしないを分ける
デバイス条件
スマホとPCで、それぞれ表示するorしないを作ることができます。
広告のサイズを変更したり、トップページのカスタマイズに使えそうです。
これまではこういうのはすごく面倒な作業が必要でした。エディター上で気軽にできて便利ですね〜。
この文章はPCでのみ表示されています。
▼スマホとPCで表示を変えてみました。どうですか？
カテゴリー条件・タグ条件
こちらはカテゴリーやタグのトップページや、記事下の関連記事や広告など使えそうですね。
SANGOスライダー
最初のスライダーのみ、パンダ記事へのリンクを貼っています。
ブロック設定で「スライドごとにリンクを設定する」をチェックすると画像にリンクが貼れます。
- ドットナビゲーションの有無
- 自動切り替えの有無
- 画像にリンク
- 高さ
- 表示する数
- ブロック下の余白を調整
SANGOのスライダーはかなり細かな設定ができます。
画像上や下に文字を入れることはできませんが、その方がシンプルでいいのかも？
私はレビュー記事のトップに、その記事で使う画像をスライダー表示して楽しんでいます。
北欧、暮らしの道具店のシンプルなコートラックを購入！気に入っています。
タイムライン
タイムラインのブロックは、すでにデザインをカスタマイズしている場合は反映されます。
- タイムラインボックスを検索
- 見出しを入力
- 画像や関連記事ブロックを入れる
タイムラインはクラシック時代から旅行記事で使ってた気がするのですが、今はエディター上で一瞬ですよ。
以前ならショートコードを使っても大変だった作業があっという間です。
感想
というわけで、SANGO歴3年の私がびっくりしたSANGOの新しいカスタムブロックについて書きました。
この記事はショートコードやHTMLをほぼ使わず書きました。（＊Amazonの広告のみHTML開いて貼りました）
ショートコードは完全に使わなくなった。と言ってもいいのでは。
あとカスタマイズ好きブロガーとしての感想は、マニアックなところがすごいな・・・という感じ。
- 関連記事のリンクスタイルを選べる
- スライダー下の余白を調整できる
- コードボックスのハイライトをオンオフ
などなど他にもいっぱい。
絶対に、私がまだ気づいていない機能がいくつもあるはず。
ブロックごとにカスタムCSSがあるので、カスタマイズも楽です。カスタムプリセットに保存もできて便利。
SANGO公式さんの細やかな気配りがありがたいですね。
それとSANGOユーザーの意見を反映してくださることもあり、本当に申し訳ないやらありがたいやらです。
私は最初からSANGO一択でしたが、選んで良かったです。
[…] みんな知ってる？最近のSANGOが凄すぎるから記事を書かずにいられない | Migaru-Days (oheya-migaru.com) […]