【知識不要】サイトのカスタムがあっという間に終わるSANGO Landの使い方を解説

のじはた
のじはた

こんにちは、のじはた(@nojihata_com)です!

この記事では、SANGOテーマの利用者ならだれでも使える、記事のカスタマイズや装飾が簡単にできるSANGO Landの使い方を解説していきます。

SANGO Landをチェック

SANGO Landとは

記事を装飾したりトップページをカスタマイズするにはCSSの知識が必要であるなどハードルが高いものだと思います。

SANGO Landはそうした方のために、コピーと貼り付けをするだけで簡単にカスタマイズができるサービスです。

使い方

SANGO Landにアクセス

まずはSANGO Landにアクセスしましょう。

左メニューから使いたいカテゴリを選びます。今回は小さい付箋を選んでみます。

使いたいブロックが見つかったら、左下のを押してコピーします。

自分の記事に貼り付け

記事(固定ページ)の編集画面に移動したら右クリックして、貼り付けします。

こんなかんじ!

このようにSANGO Landを使うことで、誰でも簡単に美しいサイトを作ることが可能になります。

サイトとSANGO Landを連携する方法

SANGO Gutenbergの最新のアップデートでSANGO Landとの連携ができるようになりました。

SANGO Landで使いたいブロックを選んでおくことで、自分ののサイトの記事編集画面上でデザイン済みのブロックを簡単に呼び出すことができるようになりました。

1.SANGO Landに登録する

まずはSANGO Landでアカウントを作成します。右上メニューからログインor新規作成を押します。

Googleアカウントでログインします。ログインが完了すればすぐに登録が完了します。

右上メニューが以下のようになっていれば登録は完了しています。

2.APIキーを生成・コピーする

登録が完了したら一番右上のボタンを押してメニューを開き、API利用を押します。

まずはAPIキーを作成しましょう。APIキーを生成を押します。

APIキーが自動生成されるのでAPIキーを保存します。

最後にコピーボタンを押して完了です。

3.自分のサイトと連携する

最後に先ほどコピーしたAPIキーを貼り付けます。まずは記事編集画面に行き、右上のSANGO Gutenbergボタンを押します。

SANGOボタンがない場合

右上の三点リーダーを押して、SANGO Settingsを押して開きます。

あとから簡単に使えるように星マークを入れておくと便利です。

SANGO Landの欄に移動し、APIキーを設定を押します。

入力欄が出てくるので、先ほどコピーしたキーを貼り付けて保存します。

🎉設定完了

これで連携は完了です。SANGO Landボタンが表示されるようになりました。
SANGO Landでお気に入り登録したブロックが表示されるようになります。

使いたいブロックがあればいいねボタンを押すことで、お気に入りに追加され、記事編集画面で使うことができるようになります。

メモ

設定が反映されていない場合はSANGO Landのデータを同期するを押しましょう。

ブロックが表示されない場合

サーバー側でWAFを使用しているといいねしたブロックが取得できないことがあります。

ConoHa WINGなどWAFが利用できるサーバーをお使いの場合、サーバー側でWAFの設定をOFFにしておく必要があります。

当サイトが提供したブロック

ここからは当サイトで作成し、SANGO Landに掲載をさせていただいているブロックを紹介、色の変更や見た目の変更などのカスタマイズ方法を解説していきます。

ちなみに…

現在100種類のブロックを掲載していただいています。一覧はこちらからどうぞ。

ボックス

比較表ブロック

人気の比較ボックスをSANGO Gutenbergで作りました。全4種です。中黒の色変更パターンや色違いパターンなどいくつかあります。

タイトル

  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります

タイトル

  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります

色の変更

タイトル色はそれぞれ右側メニューから変更が可能です。アイコンの設定なども可能です。

背景色はカラム全体を選択していただくと、右側メニューに背景色設定が表示されます。

点線を消したい・線の種類や色を変えたい

最近の更新で詳しく設定できるように改良しました。右メニューから詳細設定が可能です。

補足説明吹き出しブロック

記事内でポイントを示すときに便利なブロックです。全2種。
色は右メニューから変更できます。

補足説明

補足説明

方眼紙・斜線ブロック

方眼用紙や斜線タイプなどの使いやすいデザインです。

ここに内容が入ります。

ここに内容が入ります。

👆背景色や角丸ストライプの傾きが変えられるようになりました

ここに内容が入ります。

小さい付箋

補足説明やセクション区切りにも使えそうな付箋です。

長さは文字数によって変わります。色や位置、角丸は右メニューから変更できます。

小さい付箋

リスト

メリット・デメリットリスト

比較などに使いやすい3種類の丸バツリストです。

  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります

右メニューから背景色、文字色やアイコン色の変更が可能です。

チェックリスト

チェックマークの周りに線がついているタイプです。

強調したいことをチェックリストのように表現できます。

  • ここに項目が入ります
  • ここに項目が入ります
  • ここに項目が入ります

右メニューから背景色、文字色やアイコン色の変更が可能です。

機能一覧

料金表ブロック

1カラムのトップページなどでプランを比較したいときにおススメです。

CTAブロック(コンタクト)

お問い合わせ誘導用のブロックです。1カラムのページでコーポレートサイトにお使いいただけるかと思います。

縦書きブロック

シンプルな縦書きブロックです。全2種。
文章が長い場合スクロールするなど細部までこだわっています。ctrl+enter(option+enter)で改行します。

シンプルな縦書き
ここに文章が入ります。

メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此このシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿はなむことして迎える事になっていた。結婚式も間近かなのである。メロスは、それゆえ、花嫁の衣裳やら祝宴の御馳走やらを買いに、はるばる市にやって来たのだ。先ず、その品々を買い集め、それから都の大路をぶらぶら歩いた。メロスには竹馬の友があった。セリヌンティウスである。

参考リンク

テキストリンクの前に参考または関連などの文字、アイコンを追加しました。全4種。
右メニューから詳細に設定が可能です。

目次

目次ブロック

こちらはSANGOテーマに搭載されている目次用のデザインです。全2種。
色はカスタマイザーから設定するメインカラーが適用されます。

サイトの外観からウィジェット、記事内目次用エリアに貼り付けするとすぐに使えます。

基本的にサイトのメインカラーが適用されます。
色を変更したい場合、右メニューのカスタムcssという欄に移動していただき、以下の箇所を好きな色に変更します。

HTML
.toc_title {
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    text-align: center;
    display: block;
    background: #333; /*背景色*/
    border-radius: 6px 6px 0 0;
    color: #fff;/*文字色*/
}

難しい場合はサポートします。

目次へ戻るボタン

目次にもどるボタンです。ウィジェットに入れていただくのがおすすめです。
Easy Table of contents 用とSANGOも目次用2種類あります。

右メニューからアイコンや色の変更が可能です。

レビュー

商品の比較、CTAに使えるブロックです。

FAQ

FAQの別デザイン(枠線タイプ、角丸控えめ)を用意しました。

ここにテキストが入ります。
ここにテキストが入ります。
ここにテキストが入ります。
ここにテキストが入ります。

テーブル

シンプルなテーブル

製品の仕様紹介に使えそうなシンプルなテーブルです。

シンプルテーブル
テキストテキスト
テキストテキスト

まとめ

SANGO LandはCSSの知識がない方でもコピペだけで簡単にサイトを作ることが可能になります。

また私もブロックを100個ほど投稿しています。もし作ってほしいものがあればTwitterに直接メッセージは大歓迎ですし、SANGO Landの右上のお問い合わせから運営の方に要望を送ることも可能です。

それではまた。

コメントを残す

コメント欄は記事内容の質問などにご活用ください。すべての質問にはお答えできませんので予めご了承ください。
テーマのリクエストや機能の質問はSANGOフォーラムに直接ご質問ください。