SANGO開発者の @steelydylan です。

SANGOのレビュー記事や比較記事を見ていると、誤った情報や最新でない情報がネット上で溢れています。

例えばネット検索しているとSANGOについて以下のようなことが書かれていたりします。

アフィリエイトを目的としたテーマの比較記事などで特にこれが顕著で、事実と異なる点が多いのでSANGOのことが正しく認知されていないんだなと、悲しい気持ちになることがあります。

そこで今回、SANGOの開発者の視点から、人気テーマでよく比較対象になるSWELLテーマを例に上げて、嘘偽りなくSANGO（比較時の最新バージョン 3.1.19）とSWELL（比較時の最新バージョン 2.6.8）のテーマの違いについて詳しく解説してみることにしました。

なるべく誤りがないように調査してこの記事を書いていますがもし誤りがあれば教えてください。

ブロックエディター

まず前提として、SANGO, SWELLどちらのテーマもブロックエディターに完全対応しています。ただ、何に重きを置いて開発しているかSANGOとSWELLでは違っているように思います。

SANGOはブロックの拡張性にSWELLはブロックの使いやすさに力を入れている印象です。

SWELLのブロックエディター

使いやすい

ブロックエディターが最初から使いやすく開発されているのはSWELLだと筆者は考えています。SANGOも十分使いやすいですが、SWELLはもうひと段階使いやすい印象です。例えば、最初から本文には洗練されたデザインのスタイルが選択できるようになっています。

また、ボタンブロックを例に挙げても、リンク先が一眼でわかるようにエディター上で表示されていたりと非常に気が利いています。SANGOテーマとしても見習いたいものです。

さらに、投稿リストブロックにおいても、表示設定がとてもきめ細かくさまざまな条件で投稿リストを取り出すことができます。SANGOでも記事一覧ブロックでいくつかの条件で投稿リストを取り出す機能がありますが、SWELLほどは機能が充実していません。

事前登録機能

そして、エディターで使うボックスに対する色や背景色をあらかじめ、SWELLの設定画面からわかりやすく設定しておくことも可能です。

いくつかの吹き出しを吹き出しセットという形であらかじめ登録しておくこともできます。

SANGOのブロックエディター

事前登録機能

一方でSANGOはSWELLでいうボーダーセットの登録やアイコン、吹き出しセットに該当する設定はありません。ただし、より自由度を高めるため、カスタムプリセットやカスタムバリエーションといった機能を用意しています。

参考

SANGO Gutenbergで一度作ったブロックの設定を使い回す方法

SANGOカスタマイズガイド

参考

既存のブロックの設定をもとに新しいブロックとして登録するカスタムバリエーション機能について

SANGOカスタマイズガイド

これは、一度エディター上で表示したいブロックの設定を作り込んでおき、次回からワンクリック、もしくはキーワード検索で速やかに希望のブロックを呼び出すことができる機能です。

カスタムプリセット機能イメージ

カスタムバリエーション機能イメージ

ブロックのバラエティ

またSANGOの特徴としてあげられるのはテーマの中でも圧倒的にブロック数が多いことです。SANGOの総ブロック数は32種類あります。

ブロック自体のカスタマイズ機能

このカスタムブロックの中にSANGOにはブロックを自作できる「カスタマイズブロック」という機能があります。この機能があることによって、SANGOテーマ自体に機能が存在しなくても様々な機能のブロックを SANGO Land というユーザー投稿型のパターンライブラリ配信サイトを通して使えるようになります。

参考

【SANGO カスタマイズブロック】の使い方

SANGOカスタマイズガイド

その機能を使ってSANGO Landに投稿されたこれらのブロックを踏まえるとブロック数は32種類以上とも言えそうです。

参考

カスタムのブロックギャラリー | SANGO Land

SANGO Land

上記リンクページには例えば以下のようなブロックがカスタマイズブロックを使って投稿されています。

• Googleマップブロック
• グラフブロック
• 画像比較ブロック
• QRコードブロック
• アイコンブロック
• アニメーションブロック

マップブロック

グラフブロック

画像比較ブロック

これらは全て、SANGO標準の機能ではなく、SANGOのカスタマイズブロックから作られた派生ブロックになります。使う人はSANGO Landのコピーボタンをクリックしてエディターに貼り付けるだけで簡単に利用できます。

毎回、SANGO Landに行ってコピーするのがめんどくさい場合は、SANGO Landでお気に入りに登録したブロックをエディター上で呼び出すためにAPI連携をすることも可能です。

さらに頻繁に使うブロックは、カスタムバリエーション機能を使って新たなブロックとしてエディターに登録しておくことが可能です。この機能を使うことで、エディター内のキーワード検索から簡単にカスタマイズされたブロックを取り出すことができます。

参考

既存のブロックの設定をもとに新しいブロックとして登録するカスタムバリエーション機能について

SANGOカスタマイズガイド

記事内装飾について

また、カスタム書式と言って、記事内の文章を装飾するための機能が、SANGOにもSWELLにも同じ名前で用意されています。

SWELLのカスタム書式機能

SWELLの場合、以下のような画面で登録できる書式を背景色、文字色などの選択式で登録していきます。表現が複雑な書式はCSSで記述することも可能です。

ただし、設定可能なカスタム書式セットは2つまでとなっているようです。

SANGOのカスタム書式機能

SANGOの場合は、エディター内でカスタム書式を設定していただく形になっています。エディター右上のSANGOマークをクリックしていただくことで、カスタム書式の入力欄が見つかります。

設定できる画面は以下のような画面になっています。

カスタム書式は何個でも登録可能です。一見、CSSを設定しないといけないため難しく見えるのですが、SANGO Landか、気に入った書式をご自身のエディターにワンクリックで簡単に同期することが可能です。

SANGO Landには現在27種類のカスタム書式が用意されています。

詳しくは以下の記事をご覧ください。

参考

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

SANGOカスタマイズガイド

ブログパーツ/コンテンツブロック機能

また一部のコンテンツをパーツとして管理できる機能がSANGOにもSWELLにもあります。SANGOでは「コンテンツブロック」、SWELLでは「ブログパーツ」と呼んでいます。

それぞれのテーマの共通特徴

これらの機能を使うことで、SANGOもSWELLも記事内で呼び出したり、サイドバー、カテゴリーページなどにあらかじめ作っておいたパーツを表示する機能があります。また、作っておいたパーツをブロックパターン と言って、素早く取り出すための機能もあります。両テーマともショートコードを使って取り出すことも可能です。

では、それぞれの機能の違いはどこにあるのでしょうか？さらに詳しく解説していきます。

SWELLのブログパーツの特徴

参考

登録したコンテンツを自由に呼び出せる「ブログパーツ」機能 | WordPressテーマ SWELL

SWELL

SWELLでは著者ページ、タグページなどにもコンテンツブロックで作ることができますが、今のところ、SANGOではコンテンツブロックでそれらを作ることができません。

また、ページ上部やカテゴリーごとのCTA領域にもブログパーツを設定することができます。

SANGOと比べるとブログパーツを設置できる箇所が多いことが特徴です。

SANGOのコンテンツブロックの特徴

SANGOではヘッダーブロックと、フッターブロックが用意されていて、サイトの重要な共通部品であるヘッダーやフッター領域もカスタマイザーの設定からコンテンツブロックで置き換えることが可能になっています。

また、404ページや記事下コンテンツもコンテンツブロックで置き換え可能です。

参考

ヘッダーやフッターをブロックエディターでカスタマイズする方法

SANGOカスタマイズガイド

また、ヘッダーやフッターのカスタマイズが難しい方はSANGO Landで気に入ったデザインのパーツを使うことができます。これにより初心者でも他のブログに差をつけることが可能になっています。

参考

ヘッダーのブロックギャラリー | SANGO Land

SANGO Land

参考

フッターのブロックギャラリー | SANGO Land

SANGO Land

目次機能について

SANGOにもSWELLにも標準で目次機能があります。

SWELLの目次

SWELLは何もしなくても最初から目次が表示されますが、カスタマイザーからより細かく目次の設定をすることができます。

例えば、目次のデザインもいくつか選択可能です。

• シンプル
• ボックス
• 上下ボーダー
• ストライプ背景

また、目次の前後に広告を設置することも可能です。

また、目次ボタンから目次をその場でダイアログ表示できるのも特徴です。

SANGOの目次

一方でSANGOでは初期状態では目次は表示されず、最初にウィジェット画面で目次ブロックを設定していただく必要があります。

参考

【SANGO 目次ブロック】を使って目次を設定しよう

SANGOカスタマイズガイド

ウィジェット編集画面より目次ブロックをそれぞれ、「記事内目次ウィジェットエリア」と「追尾サイドバーエリア」に挿入していただく形をとっています。

なぜこのような形をとっているかというと、これにより、SANGO Landに投稿された目次のデザインが使えますし、ブロックになっていることで目次の前後に広告を入れたりと後々にカスタマイズをやりやすくするためです。

SANGO Landでは現在、8種類の目次デザインが用意されています。

参考

目次のブロックギャラリー | SANGO Land

SANGO Land

広告機能について

SANGOもSWELLもどちらとも広告機能が充実しています。どちらも広告を管理したり広告のクリック率を計測したりすることができます。またインフィード広告を設置したりすることも可能です。

SWELLの広告機能

SWELLは広告タグという機能を使って広告管理をします。

参考

広告タグ管理機能・広告タグブロックの使い方 | WordPressテーマ SWELL

SWELL

広告タグはサイトなどでよくみる広告パターンの中から選んで広告を設定できる機能です。

• バナー型
• アフィリエイト型
• Amazon型
• ランキング型

の中からお好きな広告を選んで登録すると登録した広告のリンクのクリック率などを計測できます。

ランキング型の場合、SWELLでは、先ほど紹介したブログパーツ機能を使い、複数のランキング型で設定された広告タグをそこに登録しておくことにより、ランキング化されたコンテンツを表示することを推奨しています。

ボタンブロック

SWELLではボタンブロックにも収益化ができる以下のような工夫加えられています。

• アフィリエイトコードをそのまま貼れる
• PV数を計測できる
• クリック数を計測できる
• ボタンまで表示されたかどうかの割合を取得できる
• 表示回数に対するクリック率を取得できる

この辺りはSANGOの機能にないので見習いたいと思います。

ABテストブロック

ABテストブロックの中で広告タグブロックを使うことで、それぞれの広告のクリック率を比較することが可能です。先ほどご紹介したボタンブロックを入れていただいても構いません。

SANGOの広告機能

一方、SANGOにはSWELLでいう広告タグという機能はありません。ただし、SANGOではコンテンツブロックがその役割を果たします。

広告コンテンツを自由に編集できることを重視し、広告はご自身でエディター内で作っていただいた上でSANGOのコンテンツブロックとして管理していただく方針を取っています。

エディター内で広告を作り上げることによって特定のパターンに依存しないより自由なレイアウトが実現できます。いくつかの広告パターンをSANGO Landにて公開しています。

参考

広告/CTAのブロックギャラリー | SANGO Land

SANGO Land

コンテンツブロック内のリンクはそれぞれクリック率を計測することが可能です。

広告として使う場合コンテンツブロックの設定から「クリック率を計測する」にチェックを入れます。

コンテンツブロックの中に複数のリンクが存在する場合でもSANGOの管理画面から簡単にクリック率を確認することができます。

コンテンツブロックの中のリンクのクリック率はラベルとリンク、それぞれデータベースに格納しているので、詳細設定でコンテンツブロック検索やURLマッチ検索、ラベルマッチ検索ができます。

ABテストブロック

SANGOにもABテストブロックがあります。SWELLではABテストブロックに好きなブロックを挿入できるのですが、SANGOのABテストブロックでは、コンテンツブロックのみを設置する形になります。

SANGOの場合、ページキャッシュ機能と言ってページを丸ごとDBにキャッシュしておく仕組みがあるので、そう言ったページキャッシュを行なった場合に同じパターンがキャッシュされて表示されてしまうケースを鑑み、ABテストブロックの遅延読み込み機能を実装しています。これによりページがキャッシュされていても、パターンA、パターンBを平等の確率で表示することができます。

トップページやカテゴリーページの作り込みについて

SANGOでもSWELLでもトップページやカテゴリートップページなどを高度にカスタマイズすることが可能です。流行りのサイト型トップページ（1カラムレイアウト）をどちらのテーマでも実現可能です。

両テーマともトップページを作るためのブロックが揃っているのでカスタマイズ次第でおしゃれなトップページを作ることも可能です。

トップページを作る上でのSWELLの利点

SWELLは利用者が多いですから、おしゃれなトップページを作るための方法をたくさんのユーザーがブログ記事として公開しています。公式サイトに情報が少なくてもユーザーのブログを見ればトップページを作ることができるでしょう。

また、フルワイドブロックや、バナーリンクブロック、投稿リストブロック などもSWELL標準のブロックで選択肢も多く、スタイリッシュなので、おしゃれなトップページが作りやすいです。

トップページを作る上でのSANGOの利点

SANGOの場合、もちろんSANGOテーマ自体でもブロックの組み合わせによってトップページを作ることができるのですが、SANGO Landを使えば可愛いだけでなくさまざまな雰囲気のトップページを実現可能です（ただしブロックパターンの組み合わせにはある程度のセンスが必要です）

SANGO Landにはパターンがとても多いので他のブログとデザインで個性を出していただけるかと思います。

まずはトップページを作る上でのテンプレートもSANGO Landに用意しているので最初はこちらをコピーしてトップページを作るのがいいでしょう。

参考

トップ・LPページのブロックギャラリー | SANGO Land

SANGO Land

コーポレートサイトで見かけるようなデザインもいくつか用意していますので、Web制作の方にも重宝していただけるかと思います。

参考

コーポレートのブロックギャラリー | SANGO Land

SANGO Land

ちなみにSANGOでのトップページの作り方、カテゴリートップページの作り方は以下を参考にしてください。

参考

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

SANGOカスタマイズガイド

参考

カテゴリートップページに固定ページの内容を表示する方法

SANGOカスタマイズガイド

SEO設定について

SANGO、SWELL共に十分なSEO対策を打つことができます。SWELLの場合はSWELL開発者が別途開発しているSEO SIMPLE PACKとの併用が推奨されています。これは他のテーマに乗り換えた時でもSEO設定が引き継がれるように配慮されたもののようです。

構造化データ

SEOの設定はもちろん、両テーマとも構造化データのための機能も充実しています。

高速化機能

SANGOもSWELLも高速化機能には力を入れています。お互いにそれぞれ高速化のために存在する機能、存在しない機能がありますが、両者とも正しく設定すれば十分な高速化は可能です。

サポート体制について

どちらもしっかりしたサポート体制で運営されています。

SWELLのサポート体制

SWELLには購入者限定のフォーラムがあります。不具合報告だけではなく、SWELLの機能に関する質問やご要望も受け付けられています。

ここでは、SWELL開発者だけではなく有志のSWELLユーザーが回答したりもされていて非常に活発な印象を受けます。

参考

フォーラム | SWELLERS’ | SWELLユーザー専用サイト

SWELLERS’ | SWELLユーザー専用サイト

また、SWELLにはSlackコミュニティもあります。

SANGOのサポート体制

SANGOでもSWELLと同様、不具合報告だけではなく、SWELLの機能に関する質問やご要望も受け付けています。

今まではSANGOのカスタマイズガイドについたカスタマイズに関する質問コメントに答える形式と不具合の場合はお問い合わせいただく方針を取っていたのですが、

つい先日、SANGOでもついに会員制フォーラムをスタートいたしました。ここでは、SANGO Landに投稿して欲しいブロックのリクエストや不具合報告、質問を気軽にチャット形式で行うことができます。

参考

SANGO ユーザー限定フォーラム

SANGO Land

まとめ

他にもそれぞれのテーマに様々な機能があるので取り上げたいのですが、長くなりすぎるのでここまでにしたいと思います。

古いSANGOのイメージを持っている方も多いと思うので、この記事を通してSANGOのイメージをアップデートしていただければ幸いです。SANGOとSWELLどちらが優れていると断言するつもりはありません。それぞれにそれぞれの良さがあると筆者は考えています。

テーマの特徴を要約すると以下のようになります。

SWELL

テーマをインストールした時点から使いやすいテーマ。非常に気が利いたユーザーインターフェースで細かいところまでしっかり開発されている。GPLライセンスで、テーマ自体のアフィリエイトも可能。

SANGO

カスタマイズで自分の色に染めていけるテーマ。カスタマイズブロックなど他のテーマにはないカスタマイズのためのユニークな機能が多く搭載されています。ブロックの種類も豊富です！特にSANGO Landとの連携でより便利になります！

一昔前はSWELLの方が開発が活発で、SANGOとSWELLでできることにとても大きな差がありました。最近はSANGOの開発が進んできていて、テーマでできることの差がだいぶ縮まってきた印象です。また、逆にSANGOにしか存在しない機能もあります。SWELLユーザーが多い現在、逆にSANGOを使うことで他のブログとの違いが出せるのではないでしょうか？

皆さんのテーマ選びの参考になれば幸いです。

あわせて読んでいただきたい記事

参考

ブロックごとに限定的にスタイルが適用されるカスタムCSS機能について

SANGOカスタマイズガイド

参考

【SANGO カスタマイズブロック】の使い方

SANGOカスタマイズガイド

参考

SANGO ブロックを魔改造できるカスタムコントロール機能について

SANGOカスタマイズガイド

2022年7月7日にSANGO v3.0をリリースします。それに伴い大変恐縮ですがSANGOテーマの販売価格を¥11,000から¥14,800に値上げ致します。

この背景には、近年WordPressで続いている大幅なアップデートがあります。新しいWordPressの仕様に対応していくためにはテーマの根本的な再設計が必要とされており、既存テーマの多くは新しいWordPressへの機能追従をできていない状況です。SANGOでは大きな開発コストをかけてでも、新しいWordPressに対応し、より便利で使いやすいテーマになるよう開発を続けていきたいと考えています。今後のテーマの改善のためにご理解いただけますと幸いです。

以下、7/7日までの改訂前価格と7/7日以降の改定後価格になります。

本日（2021年11月24日）、ブロックエディター用パターンライブラリサービス SANGO Landをリリースしました。パターンライブラリサイトではありますが、カスタマイズされた記事用のブロックを利用できる点もポイントです。

トップページなどで使える、おしゃれないくつかのブロックパターンに加え、マップブロックやアイコンブロック、文字装飾など記事を書くうえで差をつけるための機能もコピペで簡単にご利用できます。

参考

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

SANGO Land

どういったことができるか

CSSでデザイン済みのSANGOブロックをコピーしてご自身のサイトの記事編集画面で貼り付けて利用することができます。

イメージを掴んでいただけるよう動画を用意しましたのでご覧ください。

使い方

ギャラリーサイトから気になるブロックの右下にあるコピーボタンをクリックします。

ご自身のサイトに移動し、記事の編集画面に移動します。

Macの場合（⌘ + V ）、Windowsの場合（Ctrl + V）にて記事内にブロックを貼り付けられます。

もしキーボードでの操作が難しい場合は、右クリックより「貼り付け」をクリックしていただいても同様の結果になります。

ギャラリーにあるブロックを何度も使いたい場合

ギャラリーにあるデザインが一つのブロックから構成されている場合は、SANGO Gutenbergのプリセット機能をお使いいただき設定を保存していただくのがお勧めです。詳しくは以下の記事をご覧ください。

参考

SANGO Gutenbergで一度作ったブロックの設定を使い回す方法

SANGOカスタマイズガイド

ギャラリーにあるデザインが複数のブロックから構成されている場合は、コンテンツブロックとして記事としてブロックを管理するのがお勧めです。コンテンツブロックについては下記の記事をご覧ください。

参考

広告管理やサイトのパーツ作りに大活躍！様々な使い方ができる SANGO コンテンツブロックについて

SANGOカスタマイズガイド

その結果、ありがたいことにいくつかレビュー記事をいただきましたのでいくつか紹介させてください。

どの記事もSANGOの最新事情を正確に伝えてくれていてまた、どのユーザーさんもSANGOを使いこなされています。スタッフ一同とても嬉しいです！

あなたの声募集しています

以下応募資格になります。もしSANGO公式サイトに掲載できないと判断した場合はお断りさせていただくケースもあります。

以下の方法でレビュー記事を応募していただけます

お問合せフォームから応募していただく場合、以下のように「お問い合わせの種類」で「SANGOのレビュー記事について」を選択してください。

また、お問合せ内容にブログのタイトル名とURLを記入してご連絡していただけると嬉しいです。

Gutenbergとは？

Gutenberg（グーテンベルク）とは、WordPress5.0より標準となった新エディターです。note.muやMediumなどのエディターに似ており、直感的に記事を書くことができます。「ブロックエディター」と呼ばれることもあります。

SANGOでGutenbergを利用する

以下の点をご確認のうえ、プラグインを導入してください。

zipファイルは解凍せずに、WordPressダッシュボードの「プラグイン⇒新規追加⇒プラグインのアップロード」より選択してください。アップロード成功後、有効化をクリックしてください。

アップデートの方法

他のプラグインと同様に、ダッシュボード⇒プラグインより、自動更新することができます（上のような表示が出ていたら「更新」をクリックしてください）。テーマファイルをアップロードし直す必要はありません。

SANGO Gutenbergの機能

ここでは「SANGO Gutenberg」プラグインの機能をいくつか紹介します。

エディターにSANGOデフォルトのスタイルが反映される

見出し、引用、リストなどを挿入すると、SANGO標準のスタイルと同じ装飾でエディター上に表示されます。テーマカスタマイザーで選択しているメインカラーやアクセントカラーがこれらのスタイルに反映されます。

見出しブロック

Gutenberg専用のオリジナル見出しを用意しています。エディター上で⊕をクリックし「SANGO見出し」というブロックを選択することで、挿入できます。見出しのスタイルは、エディター右側のサイドバー（右上のをクリックして表示）で変更できます。

ボックス・ブロック

「タイトル付ボックス」という名前のSANGOオリジナルのブロックを使用することができます。ボックスの種類はエディター右側のサイドバー（右上のをクリックして表示）で変更できます。

アコーディオン・ブロック

アコーディオンとはクリックすると開く機能のことです。SANGO Gutenbergでは一切専門知識がなくとも、アコーディオンを配置することができます。クリックすると開きます

タイムライン・ブロック

タイムラインのテスト

ここにタイムラインの文章を書きます。

タイムラインの項目2

タイムラインの項目は必要な数だけ増やすことができます。

• リストや画像などを配置することもできます
• ブロックを使用するのに、専門知識は必要ありません

吹き出しブロック

名前

吹き出しのブロックも用意されています

名前

右から吹き出しを出すことも、背景や文字の色を変えることもできます

記事一覧ブロック

文章の途中に記事一覧を差し込むことができます。カテゴリーやタグで絞り込んで表示することも可能です。 ショートコードでも記事一覧は差し込めるのですが、どのような表示結果になるかリアルタイムで確認できるぶん、ブロックを使った方が作業がはかどります。

SANGOとSWELLのテーマ比較 – 開発者の視点で二つのテーマの違いや特徴について解説します！2022/11/29

SANGOテーマ価格改訂のお知らせ2022/06/16

ブロックを自由にコピーできるパターンライブラリサービス SANGO Land について2022/11/17

SANGOユーザーさんの声2024/05/04

タブブロック

文章の途中にタブをクリックすることでコンテンツを切り替えて表示するためのブロックを挿入することができます。

レビューボックスブロック

下のような評価テーブルを簡単に作成することができます。

参考ブロック

URLを入力するだけで簡単に参考リンクを作成できるブロック

参考

サルワカ | サルでも分かる図解説明マガジン

サルワカ | サルでも分かる図解説明マガジン

関連ブロック

内部リンクを検索してカード形式で表示できるブロック

2023/02/07 WordPressテーマ「SANGO」30の魅力

メッセージブロック

以下の様な注意事項や補足説明に利用できるブロック

ボックスブロック

内容を囲って強調したい場合に利用できるブロック

ボタンブロック

全18種類のボタンスタイルから選んで表示することができるブロック。アフィリエイトの計測タグも入力することができます。

ボタン

ボタン

リストブロック

全12種類のリストスタイルから選んで表示することができるブロック。

• リスト1
• リスト2
• リスト3

線ブロック

区切り線を入れるのに便利なブロック。

蛍光ペンやラベル装飾

段落やリストなどの好きなテキストを「蛍光ペン風」や「ラベル風」に装飾できます。

デフォルトブロックでもSANGOのスタイルが使用可能

「ボタン」や「画像」、「表」などのWordPress標準のブロックに対してもSANGO独自のスタイルバリエーションを追加しています。

SANGOは、Webメディア「サルワカ」から生まれた有料WordPressテーマです。開設1年で200万PV/月を超えたサルワカのノウハウを、余すことなく詰め込んでいます。
SANGOにはたくさんの魅力があります。ブログ、アフィリエイト、企業ホームページ、様々な用途できっと活躍するはずです。

1.
つい長居したくなる、居心地の良いデザイン

SANGOは訪れる人々の「居心地の良さ」を第一に考えてデザインされています。ストレス無く、つい長居したくなるような心地よさを追求しました。

2.
100% レスポンシブ対応

言うまでもなくレスポンシブ対応。パソコン、スマートフォン、タブレット、どの端末で見ても最適化されて表示されます。

3.
洗練されたブロックテンプレートサイトを用意

サイトのカスタマイズに最適なテンプレートギャラリーサイト、SANGO Landを用意。これを使えばサイトのカスタマイズがブロックのコピーペーストだけで完結します。

4.
心地の良いアニメーション

ユーザーのストレスにならない程度のアニメーションを実装。この2つの動画のアニメーション部分にはJavascriptは使われていません。HTMLとCSSのみで実現されています。

5.
内部SEO対策施策済み

巷の「SEOに強い」とされるテーマで実施されている有効なSEO対策は基本的に実施済みです。それらのテーマが本当にSEOに強いのであれば、SANGOのSEOも強いと言えるでしょう。
とはいえ、テーマでできるSEO対策というのは限られています。価値のある記事を書かなければ、検索順位は上がりません。これはどのテーマでも共通です。
個人的には、「長居したくなる魅力的なデザイン＋良質なコンテンツ」こそが最強のSEO対策だと考えています。

6.
自分好みのサイトカラーに

HTMLやCSSの専門知識が無くとも、簡単にサイトカラーを変更することができます。統一感のある配色になるように「メインカラー」や「アクセントカラー」などの概念を取り入れました。

7.
30種類以上の見出し

SANGOにはインストール時点から30種類以上の見出しが収録されています。中にはカスタマイザーで自分の好みに応じて登録したメインカラーやアクセントカラーが配色に反映される見出しデザインもあります。

SANGO見出しブロックの使い方

8.
30種類以上のボタン

ボタンも初期設定から30種類以上が用意されており、ブロックエディターで簡単に記事内で使用することができます。立体的なものからフラットなもの、グラデーションのかかったものまで。登録したメインカラーやアクセントカラーが使用されるボタンもあります。

SANGOボタンブロックの使い方

9.
30種類以上のボックスデザイン

多彩なデザインのボックスもブロックエディターにより簡単に挿入できます。

SANGOボックスブロックの使い方

10.
20種類以上の箇条書き

同様に、箇条書きもたくさんのデザイン種類が用意されています。

SANGOリストブロックの使い方

11.
記事を華やかにするブロック

SANGOには良質な記事を書くための武器としていくつかのブロックを用意しています。関連記事へのリンクや、吹き出し、画像の上に文字を配置する機能など、便利なものを一通り揃えています。

使い心地抜群！SANGO Gutenbergを使おう

12.
SANGO Landで大胆なトップページに

SANGO Landでは、ユーザーさんが投稿してくれたトップページ用のテンプレートがいくつか用意してあります。それらのテンプレートをコピーするだけで簡単にトップページが完成します。

参考

トップ・LPページのブロックギャラリー | SANGO Land

SANGO Land

13.
押したくなるフォローボックス

記事下には最近よく見かける「この記事が気に入ったらいいね」というようなフォローボックスを表示することが可能です。ユニークなデザインで見る人の目を引くはずです。また、スマホ表示にも最適化されています。

14.
記事下に表示される関連記事

関連記事はインストール時点から実装されています（カスタマイザーから簡単にオフにすることもできます）。

15.
関連記事のデザインパターンは3種類以上

関連記事のデザインは3パターン以上から選ぶことができます。切り替えに専門知識は不要です。

16.
安心のユーザーフォーラム

ユーザーの方はフォーラムで自由にテーマについての質問ができます。フォーラムではユーザー同士での交流も可能です。

参考

フォーラム

SANGO Land

17.
「この記事を書いた人」を簡単挿入

「この記事を書いた人」というプロフィールボックスのデザインにもこだわりました。また、サイドバーにもプロフィールを設置することができます。

18.
おすすめ記事を記事下に簡単挿入

特に読んでもらいたいページがある場合には、そのページへのリンクを画像付きで設置することができます（最大4つまで）。

19.
人気記事ウィジェットをプラグインなしで実装

サイドバーにはサイト内の人気記事（PV数の多い記事）をランキング形式で表示することができます。「WP Popular Posts」のようなプラグインを導入する必要はありません。

20.
記事一覧レイアウトは2種類から選択可能

▼ デフォルトの表示

▼ オプション表示

トップページなどの記事一覧のスタイルは2種類から選択可能です。トップページとアーカイブページ（カテゴリーページなど）で別のスタイルに設定することもできます。

21.
モバイル用フッター固定メニューを簡単に設置可能

モバイル（スマホ/タブレット）用のフッター固定メニューを簡単に使用することができます。シェアボタンやメニューボタン、上に戻るボタンの機能が用意されています。

22.
レビュー用ボックスを挿入可能

ブロックエディターにより、上のようなレビューボックスを簡単に作成することができます。

SANGO レビューボックスの使い方

23.
ヘッダー下にお知らせ欄を設置可能

ヘッダー下にはお知らせ欄を設置することができます。背景には自由にグラデーションをかけることも。

24.
手順を魅力的に見せるタイムライン

STEP.1

SANGOのデモサイトを見る

パソコンとスマホ、両方からSANGOのデモサイトをチェックすることをおすすめします。

STEP.2

SANGOを購入する

BOOTHにてSANGOテーマを購入ができます。購入者様が運営するサイトであれば、複数サイトにご利用頂くこともできます。

BOOTHへ

STEP.3

SANGOをインストールする

WordPressでのテーマのインストール手順は簡単です。具体的な手順は、カスタマイズガイドをご覧ください

完了！

SANGOを楽しみましょう！

ブロックエディターにより、上のように記事内にタイムラインを表示することができます。

25.
クリックにより表示するアコーディオン機能

クリックしてみよう

クリックすると中身が表示される「アコーディオン機能」をブロックエディターにより簡単挿入できます（JavaScriptを使用せず、HTMLとCSSだけで実現しています。

26.
サイドバーや投稿ページにオリジナルメニューを設置可能

• SANGOの基本設定
• 子テーマの使い方
• ショートコード一覧
• カスタマイズ応用編
• アイキャッチの作り方
• WordPress本

専用のタグを貼り付けることで、記事や固定ページ、サイドバーにメニューを設置することができます。

27.
Q&A形式の見出しを簡単挿入

28.
目次機能搭載

SANGOでは少し設定をするだけで、この画像のような目次のスタイルにすることができます（水色の部分には、カスタマイザーで設定したメインカラーが使用されます）。

参考

【SANGO 目次ブロック】を使って目次を設定しよう

SANGOカスタマイズガイド

29.
Gutenberg完全対応

SANGOではWordPress5.0〜導入された新エディター「Gutenberg」に完全対応しています。見出しはもちろん、ボックス、アコーディオン、吹き出し、タイムラインなど、さまざまなブロックを簡単に挿入することができます。ショートコードでできる全ての機能がGutenbergでもご利用いただけます。

プラグインの機能の一例

30.
高速化への取り組み

サムネイル画像サイズの最適化や、コンテンツ内の画像の遅延読み込み、記事フッターの遅延読み込みなどの工夫により、高速な表示を実現しました。

この他にもたくさんの魅力がSANGOには詰まっています。

SANGOを導入しよう

SANGOであなただけのブログを作りましょう。きっと、ブログを書くことが楽しくなるはずです。

このページではSANGOで使用することのできる「ショートコード」を一覧で紹介していきます。

NEWタイムライン機能

ver1.4のアップデートで以下のようなタイムラインをショートコードで簡単挿入できるようになりました。

STEP.1

SANGOのデモサイトを見る

パソコンとスマホ、両方からSANGOのデモサイトをチェックすることをおすすめします。

STEP.2

SANGOを購入する

BOOTHにてSANGOテーマを購入ができます。購入者様が運営するサイトであれば、複数サイトにご利用頂くこともできます。

BOOTHへ

STEP.3

SANGOをインストールする

WordPressでのテーマのインストール手順は簡単です。具体的な手順は、カスタマイズガイドをご覧ください

完了！

SANGOを楽しみましょう！

NEWアコーディオン機能

ver1.4のアップデートで、クリックすると中身が表示される「アコーディオン機能」をショートコードで簡単挿入できるようになりました。

クリックしてみよう

NEWレビュー用ボックス

ver1.2のアップデートで以下のようなレビュー用ボックスをショートコードで簡単挿入できるようになりました。

1. 関連記事を出力する（横長）

WordPressテーマ「SANGO」30の魅力

[kanren id="投稿ID"]

ブログ内の記事へのリンクを貼るときにのみ使用できます。id=の中には投稿IDを入力します（投稿IDは、投稿編集ページのURLを見れば確認できます。post=◯◯の数字が投稿IDとなります。）

2. カードタイプの関連記事を出力

WordPressテーマ「SANGO」30の魅力

[card id="投稿ID"]

こちらもブログ内の記事へリンクを貼りたいときに使用します。半角カンマ（,）区切りで複数の投稿IDを指定できます。
cardをcard2に変えると、下のサンプルようなスタイルのカードを挿入できます（Ver1.4〜追加された機能です）。

2023/02/07WordPressテーマ「SANGO」30の魅力

3. 他サイトへのリンクを出力

参考 力尽きたときの簡単レシピサルワカ

[sanko href="リンク先のURL" title="記事のタイトル" site="サイト名"]

他サイトへのリンクを貼りたいときはこちらを使用します。

4. 線を引く

記事の途中などで横に線を引いて区切りたいときにはこちらを使います。

5. 点線を引く

さきほどの点線バージョンです。

6. 補足説明

[memo title="MEMO"]ここに文章[/memo]

補足したい文章をショートコードで挟んで使用します。このショートコード内でさらに別のショートコードを使用することもできます。title=内の「MEMO」という部分は自由に書き換えることができます。

7. 注意書き

[alert title="注意"]ここに文章[/alert]

注意書きをショートコードではさんで使用します。タイトル部分は自由に書き換えることができます。

8. ソースコードボックス

<div>TEST</div>

[codebox title="HTML"]<pre><code>ソースコード</code></pre>[/codebox]

こちらはあまり使用する方は多くないかもしれませんが…。ソースコードをユーザーのために表示するボックスです。<pre>と<code>タグと合わせて使用します。title=""に記載した文字列がボックス上のタブとして表示されます（空欄だとタブは表示されません）。HTMLを貼り付ける場合には、HTMLエスケープツールなどでエスケープした上でタグを貼り付けるようにしましょう。

9. 吹き出し（左に顔）

[say name="サルワカくん" img="画像のURL"]ここに文章[/say]

名前（name="~"）は省略可能です。いちいち画像のURLを貼るのは面倒だと思うので、画像のURLまで含めたショートコードをプラグイン「AddQuicktag」に登録しておくか、メモ帳などに控えておくと良いでしょう。

10. 吹き出し（右に顔）

[say name="サルワカくん" img="画像のURL" from="right"]ここに文章[/say]

from="right"という文字列を加えると、右側から吹き出しが伸びるようになります。

11. 横並び2列

[yoko2 responsive]
1列目：画像・文章などをここに
2列目：画像・文章などをここに
[/yoko2]

画像や文章、ボックスなどなどを横並び2列で表示できるボックスです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。

12. 横並び3列

[yoko3 responsive]
1列目：画像・文章などをここに
2列目：画像・文章などをここに
3列目：画像・文章などをここに
[/yoko3]

さきほどの横並び3列バージョンです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。responsiveというショーコード内の文字列をまるっと消すと、ブラウザサイズに関わらず常に横3列で並んで表示されます。

13. YouTubeをレスポンシブで埋め込み

[youtube]
YouTubeのURL
[/youtube]

WordPressで記事にYouTubeを埋め込む場合、スマホで見た際に動画の左右が若干切り取られて表示されてしまいます。このショートコードで埋め込みコードやURLを挟むことで、それを防ぐことができます

14. モバイルでのみ表示

[mobile]
ここにモバイルでのみ表示させるもの
[/mobile]

こちらのショートコードではさんだものは、PCでは表示されず、モバイル（スマホ/タブレット）でのみ表示されるようになります。

15. PCでのみ表示

[pc]
ここにPCでのみ表示させるもの
[/pc]

こちらのショートコードではさんだものはモバイルでは表示されず、PCでのみ表示されます。

16. 画像上に文字をのせる

GOOD INNOVATION

[texton img="画像のURL" title="画像上にのせる文字"]

こちらのショートコードで「画像のURL」と「テキスト」を指定すると、画像上の中央に簡単に文字を配置することができます。

17. 指定したカテゴリーIDの記事を好きな数だけ出力

WordPressテーマ「SANGO」の名前の由来 SANGOで約30種類のボックスを挿入しよう SANGOユーザーさんの声

[catpost catid="カテゴリーID" num="出力する記事数"]

「カテゴリーID」と「出力する記事数（例：num="6"）」を指定するだけで、そのカテゴリーの記事へのリンクカードが指定数分だけ出力されます。初期設定だと公開日が近い記事順に表示されます。

参考：カテゴリーIDの調べ方

オプション

[catpost~略~　type="card"]とショートコード内に加えるとリンクカードのデザインが縦長の影付きのものになります。

記事にツイートやYouTube動画などを埋め込む

また、[catpost~略~　orderby="rand"]と加えると、指定したカテゴリーの中から記事がランダムに出力されるようになります（初期設定だと日付順）。

18. ボタン

ショートコードの種類が多数あるため、別記事にまとめました。

非公開: 40種類以上のボタンを用意

19. 箇条書き

同じく多数の種類があるため、別記事にまとめました。

非公開: SANGOの箇条書き（20種類以上）と引用のデザイン

20. ボックス

同じく多数の種類があるため、別記事にまとめました。

SANGOで約30種類のボックスを挿入しよう

その他見出しなど

文字の装飾や、SANGOオリジナル見出しの挿入はショートコードではなく、ビジュアルエディタのスタイル設定から行うことができます。詳しくはこちらの記事をどうぞ。

SANGOでテキストを強調する：装飾機能でできることを紹介

SANGOではモバイルでのみ表示されるハンバーガーメニュー（ナビゲーション・ドロワー）を設置することができます。SANGOではできる限り、Javascriptを使用しないことを心がけており、こちらもCSSだけで実装されています。

スライダーメニューも

また、モバイル表示ではタイトル下にスライダー形式のメニューを表示させることもできます。

ユーザビリティを高めるために効果的に利用しましょう。詳しくはSANGOカスタマイズガイドをご覧くださいませ。

Ver1.3のアップデートにより、関連記事のデザインを3パターンから選べるようになりました。

さらにモバイル表示ではスライダー（横スクロール）のON/OFFを切り替えることができます。

SANGOには30種類以上のボックスがあらかじめ用意されています。どれもショートコードを使って挿入ができるため、HTMLとCSSの知識は必要ありません。ここでは記事内にボックスを挿入する方法をまとめておきます。

メモ（補足説明の使い方）

↑このボックスを挿入したい場合、投稿画面のエディタ内の好きな位置に、以下のショートコードを記載します。title="MEMO"の部分は好きな文字に変えることができます（例：title="補足"）。

[memo title="MEMO"]ここに文章[/memo]

注意書きの使い方

注意書きのボックスを挿入したい位置には以下のショートコードを記載します。title="注意"の部分は好きな文字列に変えることができます。

[alert title="注意"]ここに文章[/alert]

その他のボックスの使い方

上の２つ以外にも30個以上のボックスが用意されています。一覧で紹介していくので、気に入ったものがあればどんどん使ってみてください。なお、紹介するボックスのショートコードは次のような形になります。

[box class="ボックス名"]ここに文章[/box]

box1

 
ここに文章

box2

 
ここに文章

box3

 
ここに文章

box4

 
ここに文章

box5

 
ここに文章

box6

 
ここに文章

box7

 
ここに文章

box8

 
ここに文章

box9

 
ここに文章

box10

 
ここに文章

box11

 
ここに文章

box12

 
ここに文章

box13

 
ここに文章

box14

 
ここに文章

box15

 
ここに文章

box16

 
ここに文章

box17

 
ここに文章

box18

 
ここに文章

box19

 
ここに文章

box20

 
ここに文章

box21

 
ここに文章

box22

 
ここに文章

box23

 
ここに文章

box24

 
ここに文章

box25

 
ここに文章

box26

 
タイトル
文章

box27

 
タイトル
文章

box28

 
タイトル
文章

box29

 
タイトル
文章

box30

 
タイトル
文章

box31

 
タイトル
文章

box32

 
タイトル
文章

box33

 
タイトル
文章

箇条書きと組み合わせるとこんな表現も

ボックスと合わせて箇条書き（囲い線なしのシンプルな箇条書き）を使用することで、以下のような表現をすることもできます。

これはボックスのショートコードの中に、シンプルな箇条書きのショートコードを入れることで実現しています。下の太字の部分が箇条書きのショートコード、その中にいつも通りの箇条書きを入れます。

 
SANGOへようこそ！
 
 <ul> <li>SANGOとは…</li> <li>大胆で使いやすいWordPressテーマです。</li> <li>さぁ、早速始めましょう</li> </ul> 

同じ方法による表現をもう1パターンを紹介します。

これもやってることはさきほどと同じで、BOXの種類（classの数字）を変えただけです。

 
 
 <ul> <li>SANGOとは…</li> <li>大胆で使いやすいWordPressテーマです。</li> <li>さぁ、早速始めましょう</li> </ul> 

このようにSANGOを使いこなせば、様々な表現をすることができます。とはいえ、いきなり複雑なショートコードを書くのも大変かと思います。使い方に慣れてきてから色々と手を出すのが良いでしょう。なお、箇条書きのショートコードはこちらの記事で紹介しています。

非公開: SANGOの箇条書き（20種類以上）と引用のデザイン