
SANGO開発者の @steelydylan です。
SANGOのレビュー記事や比較記事を見ていると、誤った情報や最新でない情報がネット上で溢れています。
例えばネット検索しているとSANGOについて以下のようなことが書かれていたりします。
アフィリエイトを目的としたテーマの比較記事などで特にこれが顕著で、事実と異なる点が多いのでSANGOのことが正しく認知されていないんだなと、悲しい気持ちになることがあります。
そこで今回、SANGOの開発者の視点から、人気テーマでよく比較対象になるSWELLテーマを例に上げて、嘘偽りなくSANGO(比較時の最新バージョン 3.1.19)とSWELL(比較時の最新バージョン 2.6.8)のテーマの違いについて詳しく解説してみることにしました。
なるべく誤りがないように調査してこの記事を書いていますがもし誤りがあれば教えてください。
まず前提として、SANGO, SWELLどちらのテーマもブロックエディターに完全対応しています。ただ、何に重きを置いて開発しているかSANGOとSWELLでは違っているように思います。
SANGOはブロックの拡張性にSWELLはブロックの使いやすさに力を入れている印象です。
ブロックエディターが最初から使いやすく開発されているのはSWELLだと筆者は考えています。SANGOも十分使いやすいですが、SWELLはもうひと段階使いやすい印象です。例えば、最初から本文には洗練されたデザインのスタイルが選択できるようになっています。
また、ボタンブロックを例に挙げても、リンク先が一眼でわかるようにエディター上で表示されていたりと非常に気が利いています。SANGOテーマとしても見習いたいものです。
さらに、投稿リストブロックにおいても、表示設定がとてもきめ細かくさまざまな条件で投稿リストを取り出すことができます。SANGOでも記事一覧ブロックでいくつかの条件で投稿リストを取り出す機能がありますが、SWELLほどは機能が充実していません。
そして、エディターで使うボックスに対する色や背景色をあらかじめ、SWELLの設定画面からわかりやすく設定しておくことも可能です。
いくつかの吹き出しを吹き出しセットという形であらかじめ登録しておくこともできます。
一方でSANGOはSWELLでいうボーダーセットの登録やアイコン、吹き出しセットに該当する設定はありません。ただし、より自由度を高めるため、カスタムプリセットやカスタムバリエーションといった機能を用意しています。
これは、一度エディター上で表示したいブロックの設定を作り込んでおき、次回からワンクリック、もしくはキーワード検索で速やかに希望のブロックを呼び出すことができる機能です。
カスタムプリセット機能イメージ
カスタムバリエーション機能イメージ
またSANGOの特徴としてあげられるのはテーマの中でも圧倒的にブロック数が多いことです。SANGOの総ブロック数は32種類あります。
このカスタムブロックの中にSANGOにはブロックを自作できる「カスタマイズブロック」という機能があります。この機能があることによって、SANGOテーマ自体に機能が存在しなくても様々な機能のブロックを SANGO Land というユーザー投稿型のパターンライブラリ配信サイトを通して使えるようになります。
その機能を使ってSANGO Landに投稿されたこれらのブロックを踏まえるとブロック数は32種類以上とも言えそうです。
上記リンクページには例えば以下のようなブロックがカスタマイズブロックを使って投稿されています。
これらは全て、SANGO標準の機能ではなく、SANGOのカスタマイズブロックから作られた派生ブロックになります。使う人はSANGO Landのコピーボタンをクリックしてエディターに貼り付けるだけで簡単に利用できます。
毎回、SANGO Landに行ってコピーするのがめんどくさい場合は、SANGO Landでお気に入りに登録したブロックをエディター上で呼び出すためにAPI連携をすることも可能です。
さらに頻繁に使うブロックは、カスタムバリエーション機能を使って新たなブロックとしてエディターに登録しておくことが可能です。この機能を使うことで、エディター内のキーワード検索から簡単にカスタマイズされたブロックを取り出すことができます。
また、カスタム書式と言って、記事内の文章を装飾するための機能が、SANGOにもSWELLにも同じ名前で用意されています。
SWELLの場合、以下のような画面で登録できる書式を背景色、文字色などの選択式で登録していきます。表現が複雑な書式はCSSで記述することも可能です。
ただし、設定可能なカスタム書式セットは2つまでとなっているようです。
SANGOの場合は、エディター内でカスタム書式を設定していただく形になっています。エディター右上のSANGOマークをクリックしていただくことで、カスタム書式の入力欄が見つかります。
設定できる画面は以下のような画面になっています。
カスタム書式は何個でも登録可能です。一見、CSSを設定しないといけないため難しく見えるのですが、SANGO Landか、気に入った書式をご自身のエディターにワンクリックで簡単に同期することが可能です。
SANGO Landには現在27種類のカスタム書式が用意されています。
詳しくは以下の記事をご覧ください。
また一部のコンテンツをパーツとして管理できる機能がSANGOにもSWELLにもあります。SANGOでは「コンテンツブロック」、SWELLでは「ブログパーツ」と呼んでいます。
これらの機能を使うことで、SANGOもSWELLも記事内で呼び出したり、サイドバー、カテゴリーページなどにあらかじめ作っておいたパーツを表示する機能があります。また、作っておいたパーツをブロックパターン と言って、素早く取り出すための機能もあります。両テーマともショートコードを使って取り出すことも可能です。
では、それぞれの機能の違いはどこにあるのでしょうか?さらに詳しく解説していきます。
SWELLでは著者ページ、タグページなどにもコンテンツブロックで作ることができますが、今のところ、SANGOではコンテンツブロックでそれらを作ることができません。
また、ページ上部やカテゴリーごとのCTA領域にもブログパーツを設定することができます。
SANGOと比べるとブログパーツを設置できる箇所が多いことが特徴です。
SANGOではヘッダーブロックと、フッターブロックが用意されていて、サイトの重要な共通部品であるヘッダーやフッター領域もカスタマイザーの設定からコンテンツブロックで置き換えることが可能になっています。
また、404ページや記事下コンテンツもコンテンツブロックで置き換え可能です。
また、ヘッダーやフッターのカスタマイズが難しい方はSANGO Landで気に入ったデザインのパーツを使うことができます。これにより初心者でも他のブログに差をつけることが可能になっています。
SANGOにもSWELLにも標準で目次機能があります。
SWELLは何もしなくても最初から目次が表示されますが、カスタマイザーからより細かく目次の設定をすることができます。
例えば、目次のデザインもいくつか選択可能です。
また、目次の前後に広告を設置することも可能です。
また、目次ボタンから目次をその場でダイアログ表示できるのも特徴です。
一方でSANGOでは初期状態では目次は表示されず、最初にウィジェット画面で目次ブロックを設定していただく必要があります。
ウィジェット編集画面より目次ブロックをそれぞれ、「記事内目次ウィジェットエリア」と「追尾サイドバーエリア」に挿入していただく形をとっています。
なぜこのような形をとっているかというと、これにより、SANGO Landに投稿された目次のデザインが使えますし、ブロックになっていることで目次の前後に広告を入れたりと後々にカスタマイズをやりやすくするためです。
SANGO Landでは現在、8種類の目次デザインが用意されています。
SANGOもSWELLもどちらとも広告機能が充実しています。どちらも広告を管理したり広告のクリック率を計測したりすることができます。またインフィード広告を設置したりすることも可能です。
SWELLは広告タグという機能を使って広告管理をします。
広告タグはサイトなどでよくみる広告パターンの中から選んで広告を設定できる機能です。
の中からお好きな広告を選んで登録すると登録した広告のリンクのクリック率などを計測できます。
ランキング型の場合、SWELLでは、先ほど紹介したブログパーツ機能を使い、複数のランキング型で設定された広告タグをそこに登録しておくことにより、ランキング化されたコンテンツを表示することを推奨しています。
SWELLではボタンブロックにも収益化ができる以下のような工夫加えられています。
この辺りはSANGOの機能にないので見習いたいと思います。
ABテストブロックの中で広告タグブロックを使うことで、それぞれの広告のクリック率を比較することが可能です。先ほどご紹介したボタンブロックを入れていただいても構いません。
一方、SANGOにはSWELLでいう広告タグという機能はありません。ただし、SANGOではコンテンツブロックがその役割を果たします。
広告コンテンツを自由に編集できることを重視し、広告はご自身でエディター内で作っていただいた上でSANGOのコンテンツブロックとして管理していただく方針を取っています。
エディター内で広告を作り上げることによって特定のパターンに依存しないより自由なレイアウトが実現できます。いくつかの広告パターンをSANGO Landにて公開しています。
コンテンツブロック内のリンクはそれぞれクリック率を計測することが可能です。
広告として使う場合コンテンツブロックの設定から「クリック率を計測する」にチェックを入れます。
コンテンツブロックの中に複数のリンクが存在する場合でもSANGOの管理画面から簡単にクリック率を確認することができます。
コンテンツブロックの中のリンクのクリック率はラベルとリンク、それぞれデータベースに格納しているので、詳細設定でコンテンツブロック検索やURLマッチ検索、ラベルマッチ検索ができます。
SANGOにもABテストブロックがあります。SWELLではABテストブロックに好きなブロックを挿入できるのですが、SANGOのABテストブロックでは、コンテンツブロックのみを設置する形になります。
SANGOの場合、ページキャッシュ機能と言ってページを丸ごとDBにキャッシュしておく仕組みがあるので、そう言ったページキャッシュを行なった場合に同じパターンがキャッシュされて表示されてしまうケースを鑑み、ABテストブロックの遅延読み込み機能を実装しています。これによりページがキャッシュされていても、パターンA、パターンBを平等の確率で表示することができます。
SANGOでもSWELLでもトップページやカテゴリートップページなどを高度にカスタマイズすることが可能です。流行りのサイト型トップページ(1カラムレイアウト)をどちらのテーマでも実現可能です。
両テーマともトップページを作るためのブロックが揃っているのでカスタマイズ次第でおしゃれなトップページを作ることも可能です。
SWELLは利用者が多いですから、おしゃれなトップページを作るための方法をたくさんのユーザーがブログ記事として公開しています。公式サイトに情報が少なくてもユーザーのブログを見ればトップページを作ることができるでしょう。
また、フルワイドブロックや、バナーリンクブロック、投稿リストブロック などもSWELL標準のブロックで選択肢も多く、スタイリッシュなので、おしゃれなトップページが作りやすいです。
SANGOの場合、もちろんSANGOテーマ自体でもブロックの組み合わせによってトップページを作ることができるのですが、SANGO Landを使えば可愛いだけでなくさまざまな雰囲気のトップページを実現可能です(ただしブロックパターンの組み合わせにはある程度のセンスが必要です)
SANGO Landにはパターンがとても多いので他のブログとデザインで個性を出していただけるかと思います。
まずはトップページを作る上でのテンプレートもSANGO Landに用意しているので最初はこちらをコピーしてトップページを作るのがいいでしょう。
コーポレートサイトで見かけるようなデザインもいくつか用意していますので、Web制作の方にも重宝していただけるかと思います。
ちなみにSANGOでのトップページの作り方、カテゴリートップページの作り方は以下を参考にしてください。
SANGO、SWELL共に十分なSEO対策を打つことができます。SWELLの場合はSWELL開発者が別途開発しているSEO SIMPLE PACKとの併用が推奨されています。これは他のテーマに乗り換えた時でもSEO設定が引き継がれるように配慮されたもののようです。
SEOの設定はもちろん、両テーマとも構造化データのための機能も充実しています。
SANGO | SWELL | |
著者情報の構造化 | ||
FAQの構造化 | ||
商品レビューの構造化 | ||
記事の構造化 | ||
パン屑リストの構造化 |
SANGOもSWELLも高速化機能には力を入れています。お互いにそれぞれ高速化のために存在する機能、存在しない機能がありますが、両者とも正しく設定すれば十分な高速化は可能です。
SANGO | SWELL | |
ブラウザーキャッシュ | ||
ページ事前読み込み | ||
ページキャッシュ | ||
ヘッダーなどのパーツキャッシュ | ||
スクリプト遅延読み込み | ||
アセットのインライン読み込み | ||
jQueryを読み込まない | ||
HTML圧縮 |
どちらもしっかりしたサポート体制で運営されています。
SWELLには購入者限定のフォーラムがあります。不具合報告だけではなく、SWELLの機能に関する質問やご要望も受け付けられています。
ここでは、SWELL開発者だけではなく有志のSWELLユーザーが回答したりもされていて非常に活発な印象を受けます。
また、SWELLにはSlackコミュニティもあります。
SANGOでもSWELLと同様、不具合報告だけではなく、SWELLの機能に関する質問やご要望も受け付けています。
今まではSANGOのカスタマイズガイドについたカスタマイズに関する質問コメントに答える形式と不具合の場合はお問い合わせいただく方針を取っていたのですが、
つい先日、SANGOでもついに会員制フォーラムをスタートいたしました。ここでは、SANGO Landに投稿して欲しいブロックのリクエストや不具合報告、質問を気軽にチャット形式で行うことができます。
他にもそれぞれのテーマに様々な機能があるので取り上げたいのですが、長くなりすぎるのでここまでにしたいと思います。
古いSANGOのイメージを持っている方も多いと思うので、この記事を通してSANGOのイメージをアップデートしていただければ幸いです。SANGOとSWELLどちらが優れていると断言するつもりはありません。それぞれにそれぞれの良さがあると筆者は考えています。
テーマの特徴を要約すると以下のようになります。
テーマをインストールした時点から使いやすいテーマ。非常に気が利いたユーザーインターフェースで細かいところまでしっかり開発されている。GPLライセンスで、テーマ自体のアフィリエイトも可能。
カスタマイズで自分の色に染めていけるテーマ。カスタマイズブロックなど他のテーマにはないカスタマイズのためのユニークな機能が多く搭載されています。ブロックの種類も豊富です!特にSANGO Landとの連携でより便利になります!
一昔前はSWELLの方が開発が活発で、SANGOとSWELLでできることにとても大きな差がありました。最近はSANGOの開発が進んできていて、テーマでできることの差がだいぶ縮まってきた印象です。また、逆にSANGOにしか存在しない機能もあります。SWELLユーザーが多い現在、逆にSANGOを使うことで他のブログとの違いが出せるのではないでしょうか?
皆さんのテーマ選びの参考になれば幸いです。
2022年7月7日にSANGO v3.0をリリースします。それに伴い大変恐縮ですがSANGOテーマの販売価格を¥11,000から¥14,800に値上げ致します。
この背景には、近年WordPressで続いている大幅なアップデートがあります。新しいWordPressの仕様に対応していくためにはテーマの根本的な再設計が必要とされており、既存テーマの多くは新しいWordPressへの機能追従をできていない状況です。SANGOでは大きな開発コストをかけてでも、新しいWordPressに対応し、より便利で使いやすいテーマになるよう開発を続けていきたいと考えています。今後のテーマの改善のためにご理解いただけますと幸いです。
以下、7/7日までの改訂前価格と7/7日以降の改定後価格になります。
改訂前価格(税込) | 改定後価格(税込) | |
---|---|---|
BOOTH | ¥11,000 | ¥14,800 |
ConoHa WING | 改訂前価格(税込) | 改定後価格(税込) |
---|---|---|
通常契約 最低利用期間なし | ¥11,000 | ¥14,800 |
WINGパック 3ヶ月以上の契約 | ¥9,900 | ¥14,000 |
現行バージョンを購入した場合もv3は問題なく利用できるのでご安心ください。(v3へのアップデートはダッシュボード上で簡単に行うことができます)
v3リリース日(7/7)までは今までの料金でご購入いただけるのでSANGOの購入をご検討の方はお早めにお買い求めいただくことをお勧めします。
サーバー料金などについてはこちらをどうぞ
本日(2021年11月24日)、ブロックエディター用パターンライブラリサービス SANGO Landをリリースしました。パターンライブラリサイトではありますが、カスタマイズされた記事用のブロックを利用できる点もポイントです。
トップページなどで使える、おしゃれないくつかのブロックパターンに加え、マップブロックやアイコンブロック、文字装飾など記事を書くうえで差をつけるための機能もコピペで簡単にご利用できます。
CSSでデザイン済みのSANGOブロックをコピーしてご自身のサイトの記事編集画面で貼り付けて利用することができます。
イメージを掴んでいただけるよう動画を用意しましたのでご覧ください。
ギャラリーサイトから気になるブロックの右下にあるコピーボタンをクリックします。
ご自身のサイトに移動し、記事の編集画面に移動します。
Macの場合(⌘ + V )、Windowsの場合(Ctrl + V)にて記事内にブロックを貼り付けられます。
もしキーボードでの操作が難しい場合は、右クリックより「貼り付け」をクリックしていただいても同様の結果になります。
ギャラリーにあるデザインが一つのブロックから構成されている場合は、SANGO Gutenbergのプリセット機能をお使いいただき設定を保存していただくのがお勧めです。詳しくは以下の記事をご覧ください。
ギャラリーにあるデザインが複数のブロックから構成されている場合は、コンテンツブロックとして記事としてブロックを管理するのがお勧めです。コンテンツブロックについては下記の記事をご覧ください。
]]>その結果、ありがたいことにいくつかレビュー記事をいただきましたのでいくつか紹介させてください。
どの記事もSANGOの最新事情を正確に伝えてくれていてまた、どのユーザーさんもSANGOを使いこなされています。スタッフ一同とても嬉しいです!
以下応募資格になります。もしSANGO公式サイトに掲載できないと判断した場合はお断りさせていただくケースもあります。
以下の方法でレビュー記事を応募していただけます
お問合せフォームから応募していただく場合、以下のように「お問い合わせの種類」で「SANGOのレビュー記事について」を選択してください。
また、お問合せ内容にブログのタイトル名とURLを記入してご連絡していただけると嬉しいです。
]]>この記事はSANGOカスタマイズガイドの「SANGOでブロックエディタ(Gutenberg)を使う方法と注意点」を転載したものです。
Gutenberg(グーテンベルク)とは、WordPress5.0より標準となった新エディターです。note.muやMediumなどのエディターに似ており、直感的に記事を書くことができます。「ブロックエディター」と呼ばれることもあります。
以下の点をご確認のうえ、プラグインを導入してください。
はじめて導入する場合は、以下のボタンよりSANGO Gutenbergプラグイン(zipファイル)をダウンロードしてください。
ただし、SANGO 3.0以上をご利用の方は不要です。逆に不具合の原因にもなりますのでインストールしないでください。
(ライセンス:GPL)
zipファイルは解凍せずに、WordPressダッシュボードの「プラグイン⇒新規追加⇒プラグインのアップロード」より選択してください。アップロード成功後、有効化をクリックしてください。
他のプラグインと同様に、ダッシュボード⇒プラグインより、自動更新することができます(上のような表示が出ていたら「更新」をクリックしてください)。テーマファイルをアップロードし直す必要はありません。
ここでは「SANGO Gutenberg」プラグインの機能をいくつか紹介します。
見出し、引用、リストなどを挿入すると、SANGO標準のスタイルと同じ装飾でエディター上に表示されます。テーマカスタマイザーで選択しているメインカラーやアクセントカラーがこれらのスタイルに反映されます。
Gutenberg専用のオリジナル見出しを用意しています。エディター上で⊕をクリックし「SANGO見出し」というブロックを選択することで、挿入できます。見出しのスタイルは、エディター右側のサイドバー(右上のをクリックして表示)で変更できます。
「タイトル付ボックス」という名前のSANGOオリジナルのブロックを使用することができます。ボックスの種類はエディター右側のサイドバー(右上のをクリックして表示)で変更できます。
アコーディオンとはクリックすると開く機能のことです。SANGO Gutenbergでは一切専門知識がなくとも、アコーディオンを配置することができます。クリックすると開きます
ここに文章や画像、ブロックなどを自由に書くことができます。
ここにタイムラインの文章を書きます。
タイムラインの項目は必要な数だけ増やすことができます。
吹き出しのブロックも用意されています
右から吹き出しを出すことも、背景や文字の色を変えることもできます
文章の途中に記事一覧を差し込むことができます。カテゴリーやタグで絞り込んで表示することも可能です。 ショートコードでも記事一覧は差し込めるのですが、どのような表示結果になるかリアルタイムで確認できるぶん、ブロックを使った方が作業がはかどります。
文章の途中にタブをクリックすることでコンテンツを切り替えて表示するためのブロックを挿入することができます。
ここにタブ1のコンテンツが入ります
ここにタブ2のコンテンツが入ります
下のような評価テーブルを簡単に作成することができます。
URLを入力するだけで簡単に参考リンクを作成できるブロック
内部リンクを検索してカード形式で表示できるブロック
以下の様な注意事項や補足説明に利用できるブロック
内容を囲って強調したい場合に利用できるブロック
ここに内容が入ります。
全18種類のボタンスタイルから選んで表示することができるブロック。アフィリエイトの計測タグも入力することができます。
全12種類のリストスタイルから選んで表示することができるブロック。
区切り線を入れるのに便利なブロック。
段落やリストなどの好きなテキストを「蛍光ペン風」や「ラベル風」に装飾できます。
「ボタン」や「画像」、「表」などのWordPress標準のブロックに対してもSANGO独自のスタイルバリエーションを追加しています。
テーブルブロックやリストブロックを選んだ状態で、ツールバーの[高度な設定]→[追加CSSクラス]に以下のクラス名を挿入すると、ブロック内のフォントサイズを変更できます
※ v1.5.2から対応
SANGOは、Webメディア「サルワカ」から生まれた有料WordPressテーマです。開設1年で200万PV/月を超えたサルワカのノウハウを、余すことなく詰め込んでいます。
SANGOにはたくさんの魅力があります。ブログ、アフィリエイト、企業ホームページ、様々な用途できっと活躍するはずです。
SANGOは訪れる人々の「居心地の良さ」を第一に考えてデザインされています。ストレス無く、つい長居したくなるような心地よさを追求しました。
言うまでもなくレスポンシブ対応。パソコン、スマートフォン、タブレット、どの端末で見ても最適化されて表示されます。
サイトのカスタマイズに最適なテンプレートギャラリーサイト、SANGO Landを用意。これを使えばサイトのカスタマイズがブロックのコピーペーストだけで完結します。
ユーザーのストレスにならない程度のアニメーションを実装。この2つの動画のアニメーション部分にはJavascriptは使われていません。HTMLとCSSのみで実現されています。
巷の「SEOに強い」とされるテーマで実施されている有効なSEO対策は基本的に実施済みです。それらのテーマが本当にSEOに強いのであれば、SANGOのSEOも強いと言えるでしょう。
とはいえ、テーマでできるSEO対策というのは限られています。価値のある記事を書かなければ、検索順位は上がりません。これはどのテーマでも共通です。
個人的には、「長居したくなる魅力的なデザイン+良質なコンテンツ」こそが最強のSEO対策だと考えています。
検索エンジンにコンテンツの内容を伝える「構造化データ」の設定も実施済みです(カスタマイザーでの入力項目あり)。現状、直接的なSEO効果は無いとされていますが、検索結果に表示される情報が最適化されることが期待できます。
HTMLやCSSの専門知識が無くとも、簡単にサイトカラーを変更することができます。統一感のある配色になるように「メインカラー」や「アクセントカラー」などの概念を取り入れました。
SANGOにはインストール時点から30種類以上の見出しが収録されています。中にはカスタマイザーで自分の好みに応じて登録したメインカラーやアクセントカラーが配色に反映される見出しデザインもあります。
ボタンも初期設定から30種類以上が用意されており、ブロックエディターで簡単に記事内で使用することができます。立体的なものからフラットなもの、グラデーションのかかったものまで。登録したメインカラーやアクセントカラーが使用されるボタンもあります。
多彩なデザインのボックスもブロックエディターにより簡単に挿入できます。
同様に、箇条書きもたくさんのデザイン種類が用意されています。
SANGOには良質な記事を書くための武器としていくつかのブロックを用意しています。関連記事へのリンクや、吹き出し、画像の上に文字を配置する機能など、便利なものを一通り揃えています。
SANGO Landでは、ユーザーさんが投稿してくれたトップページ用のテンプレートがいくつか用意してあります。それらのテンプレートをコピーするだけで簡単にトップページが完成します。
記事下には最近よく見かける「この記事が気に入ったらいいね」というようなフォローボックスを表示することが可能です。ユニークなデザインで見る人の目を引くはずです。また、スマホ表示にも最適化されています。
関連記事はインストール時点から実装されています(カスタマイザーから簡単にオフにすることもできます)。
関連記事のデザインは3パターン以上から選ぶことができます。切り替えに専門知識は不要です。
ユーザーの方はフォーラムで自由にテーマについての質問ができます。フォーラムではユーザー同士での交流も可能です。
「この記事を書いた人」というプロフィールボックスのデザインにもこだわりました。また、サイドバーにもプロフィールを設置することができます。
特に読んでもらいたいページがある場合には、そのページへのリンクを画像付きで設置することができます(最大4つまで)。
サイドバーにはサイト内の人気記事(PV数の多い記事)をランキング形式で表示することができます。「WP Popular Posts」のようなプラグインを導入する必要はありません。
▼ デフォルトの表示
▼ オプション表示
トップページなどの記事一覧のスタイルは2種類から選択可能です。トップページとアーカイブページ(カテゴリーページなど)で別のスタイルに設定することもできます。
モバイル(スマホ/タブレット)用のフッター固定メニューを簡単に使用することができます。シェアボタンやメニューボタン、上に戻るボタンの機能が用意されています。
ブロックエディターにより、上のようなレビューボックスを簡単に作成することができます。
ヘッダー下にはお知らせ欄を設置することができます。背景には自由にグラデーションをかけることも。
ブロックエディターにより、上のように記事内にタイムラインを表示することができます。
クリックすると中身が表示される「アコーディオン機能」をブロックエディターにより簡単挿入できます(JavaScriptを使用せず、HTMLとCSSだけで実現しています。
専用のタグを貼り付けることで、記事や固定ページ、サイドバーにメニューを設置することができます。
FAQブロックを利用してください
SANGOでは少し設定をするだけで、この画像のような目次のスタイルにすることができます(水色の部分には、カスタマイザーで設定したメインカラーが使用されます)。
SANGOではWordPress5.0〜導入された新エディター「Gutenberg」に完全対応しています。見出しはもちろん、ボックス、アコーディオン、吹き出し、タイムラインなど、さまざまなブロックを簡単に挿入することができます。ショートコードでできる全ての機能がGutenbergでもご利用いただけます。
サムネイル画像サイズの最適化や、コンテンツ内の画像の遅延読み込み、記事フッターの遅延読み込みなどの工夫により、高速な表示を実現しました。
この他にもたくさんの魅力がSANGOには詰まっています。
SANGOであなただけのブログを作りましょう。きっと、ブログを書くことが楽しくなるはずです。
]]>
この記事はSANGOカスタマイズガイドの「SANGOのショートコード一覧」を転載したものです。
このページではSANGOで使用することのできる「ショートコード」を一覧で紹介していきます。
目次 非表示
ver1.4のアップデートで以下のようなタイムラインをショートコードで簡単挿入できるようになりました。
ver1.4のアップデートで、クリックすると中身が表示される「アコーディオン機能」をショートコードで簡単挿入できるようになりました。
ver1.2のアップデートで以下のようなレビュー用ボックスをショートコードで簡単挿入できるようになりました。
[kanren id="投稿ID"]
ブログ内の記事へのリンクを貼るときにのみ使用できます。id=の中には投稿IDを入力します(投稿IDは、投稿編集ページのURLを見れば確認できます。post=◯◯の数字が投稿IDとなります。)
id="15,28"
のように半角カンマ区切りで投稿IDを指定することで、複数の関連記事をまとめて貼ることができます。
[card id="投稿ID"]
こちらもブログ内の記事へリンクを貼りたいときに使用します。半角カンマ(,)区切りで複数の投稿IDを指定できます。card
をcard2
に変えると、下のサンプルようなスタイルのカードを挿入できます(Ver1.4〜追加された機能です)。
[sanko href="リンク先のURL" title="記事のタイトル" site="サイト名"]
他サイトへのリンクを貼りたいときはこちらを使用します。
リンク先を別のタブで開くようにしたい場合は[sanko~略~ target="_blank"]
というようにtarget="_blank"
をショートコード内に追加します。
記事の途中などで横に線を引いて区切りたいときにはこちらを使います。
さきほどの点線バージョンです。
[memo title="MEMO"]ここに文章[/memo]
補足したい文章をショートコードで挟んで使用します。このショートコード内でさらに別のショートコードを使用することもできます。title=内の「MEMO」という部分は自由に書き換えることができます。
[alert title="注意"]ここに文章[/alert]
注意書きをショートコードではさんで使用します。タイトル部分は自由に書き換えることができます。
<div>TEST</div>
[codebox title="HTML"]<pre><code>ソースコード</code></pre>[/codebox]
こちらはあまり使用する方は多くないかもしれませんが…。ソースコードをユーザーのために表示するボックスです。<pre>
と<code>
タグと合わせて使用します。title=""
に記載した文字列がボックス上のタブとして表示されます(空欄だとタブは表示されません)。HTMLを貼り付ける場合には、HTMLエスケープツールなどでエスケープした上でタグを貼り付けるようにしましょう。
サルワカくん
[say name="サルワカくん" img="画像のURL"]ここに文章[/say]
名前(name="~"
)は省略可能です。いちいち画像のURLを貼るのは面倒だと思うので、画像のURLまで含めたショートコードをプラグイン「AddQuicktag」に登録しておくか、メモ帳などに控えておくと良いでしょう。
サルワカくん
[say name="サルワカくん" img="画像のURL" from="right"]ここに文章[/say]
from="right"
という文字列を加えると、右側から吹き出しが伸びるようになります。
[yoko2 responsive]1列目:画像・文章などをここに2列目:画像・文章などをここに[/yoko2]
画像や文章、ボックスなどなどを横並び2列で表示できるボックスです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。
responsive
というショーコード内の文字列をまるっと消すと、ブラウザサイズに関わらず常に横2列で並んで表示されるようになります。2列目だけ文章にしてみました
[yoko3 responsive]1列目:画像・文章などをここに2列目:画像・文章などをここに3列目:画像・文章などをここに[/yoko3]
さきほどの横並び3列バージョンです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。responsive
というショーコード内の文字列をまるっと消すと、ブラウザサイズに関わらず常に横3列で並んで表示されます。
https://www.youtube.com/watch?v=_OBlgSz8sSM
[youtube]
YouTubeのURL
[/youtube]
WordPressで記事にYouTubeを埋め込む場合、スマホで見た際に動画の左右が若干切り取られて表示されてしまいます。このショートコードで埋め込みコードやURLを挟むことで、それを防ぐことができます
[mobile]
ここにモバイルでのみ表示させるもの
[/mobile]
こちらのショートコードではさんだものは、PCでは表示されず、モバイル(スマホ/タブレット)でのみ表示されるようになります。
[pc]
ここにPCでのみ表示させるもの
[/pc]
こちらのショートコードではさんだものはモバイルでは表示されず、PCでのみ表示されます。
GOOD INNOVATION
[texton img="画像のURL" title="画像上にのせる文字"]
こちらのショートコードで「画像のURL」と「テキスト」を指定すると、画像上の中央に簡単に文字を配置することができます。
ウィジェットを使いこなす:広告の設置もカンタン
SANGOの使い方はカスタマイズガイドで
SANGOのショートコードでできること
[catpost catid="カテゴリーID" num="出力する記事数"]
「カテゴリーID」と「出力する記事数(例:num="6"
)」を指定するだけで、そのカテゴリーの記事へのリンクカードが指定数分だけ出力されます。初期設定だと公開日が近い記事順に表示されます。
参考:カテゴリーIDの調べ方
[catpost~略~ type="card"]
とショートコード内に加えるとリンクカードのデザインが縦長の影付きのものになります。
また、[catpost~略~ orderby="rand"]
と加えると、指定したカテゴリーの中から記事がランダムに出力されるようになります(初期設定だと日付順)。
ショートコードの種類が多数あるため、別記事にまとめました。
同じく多数の種類があるため、別記事にまとめました。
同じく多数の種類があるため、別記事にまとめました。
文字の装飾や、SANGOオリジナル見出しの挿入はショートコードではなく、ビジュアルエディタのスタイル設定から行うことができます。詳しくはこちらの記事をどうぞ。
]]>SANGOではモバイルでのみ表示されるハンバーガーメニュー(ナビゲーション・ドロワー)を設置することができます。SANGOではできる限り、Javascriptを使用しないことを心がけており、こちらもCSSだけで実装されています。
また、モバイル表示ではタイトル下にスライダー形式のメニューを表示させることもできます。
ユーザビリティを高めるために効果的に利用しましょう。詳しくはSANGOカスタマイズガイドをご覧くださいませ。
トップページやアーカイブページでの記事リンクのフェードインなどもCSSだけで実装されています。
Ver1.3のアップデートにより、関連記事のデザインを3パターンから選べるようになりました。
さらにモバイル表示ではスライダー(横スクロール)のON/OFFを切り替えることができます。
この記事はSANGOカスタマイズガイドの「ボックス・枠を挿入する方法と種類一覧」を転載したものです。
SANGOには30種類以上のボックスがあらかじめ用意されています。どれもショートコードを使って挿入ができるため、HTMLとCSSの知識は必要ありません。ここでは記事内にボックスを挿入する方法をまとめておきます。
↑このボックスを挿入したい場合、投稿画面のエディタ内の好きな位置に、以下のショートコードを記載します。title="MEMO"
の部分は好きな文字に変えることができます(例:title="補足"
)。
[memo title="MEMO"]ここに文章[/memo]
注意書きのボックスを挿入したい位置には以下のショートコードを記載します。title="注意"
の部分は好きな文字列に変えることができます。
[alert title="注意"]ここに文章[/alert]
上の2つ以外にも30個以上のボックスが用意されています。一覧で紹介していくので、気に入ったものがあればどんどん使ってみてください。なお、紹介するボックスのショートコードは次のような形になります。
[box class="ボックス名"]ここに文章[/box]
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
ここに文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
タイトル文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
タイトル文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
タイトル文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
タイトル文章
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
タイトル文章
タイトル文章
タイトル文章
タイトル文章
ボックスと合わせて箇条書き(囲い線なしのシンプルな箇条書き)を使用することで、以下のような表現をすることもできます。
これはボックスのショートコードの中に、シンプルな箇条書きのショートコードを入れることで実現しています。下の太字の部分が箇条書きのショートコード、その中にいつも通りの箇条書きを入れます。
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種類以上)と引用のデザイン