Gutenberg用ブロックのギャラリーサイトSANGO Landは、CSSでデザイン済みのSANGOブロックをコピーしてご自身のサイトの記事編集画面で貼り付けて利用することができるサービスです。
こちらに操作イメージがありますので参考にしてください。
詳しい説明はこちらの記事をご覧ください。
SANGOカスタムブロックをCSSでカスタマイズした状態でSANGO Landに投稿できるようにしました。以下投稿する手順になります。
1. SANGOカスタムブロックをCSSでカスタマイズする
SANGO Landにブロックを投稿する条件としてSANGOカスタムブロックをカスタムCSSでカスタマイズされていること、もしくは複数のブロックを組み合わせていることが前提 になります。オリジナルのカスタマイズをエディター内で作りましょう。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/02/custom-block-1000x553.png)
ブロックをコピー
カスタマイズが終わったらそのブロックをツールバーよりコピーしましょう。これでクリップボードにブロックの内容が保存されます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/02/790e0655cfabd9f31a510256a4c5e432.png)
ブロックを高度にカスタマイズする
SANGO Landに投稿するためにここまでする必要はありませんがCSSだけではなく、より高度にブロックをカスタマイズしていただくことが可能です。
ブロックにオリジナルの設定を追加するにはカスタムコントロール機能を使います。
この機能を使うことで設定した内容をCSSの変数やJavaScriptの変数として取り出すことができます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/05/custom-control-1-160x160.png)
また、カスタムブロックを使うことによってHTML含め全く一からブロックを自作することができます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/customize-block-160x160.png)
SANGO Landに投稿
以下のSANGO Landの投稿ページより先程コピーしたブロックを投稿します。
以下のようなフォームがありますので、そこにSANGO Landに掲載したいお名前、あなたのサイトのURL、ブロックのカテゴリー、ブロックのイメージ、ソースコードを入力します。お名前とブロックのカテゴリー、ソースコードは必須項目になります。ソースコードには先程コピーしたブロックの内容を貼り付けます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/02/85c16aed361aa53f25c11754ca7ab6e9-984x1000.png)
送信ボタンを押すと以下のように画面右下に「送信しました」というメッセージが表示されるのでこのメッセージが表示されると成功になります。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/02/c8292be9d1a1b1bc6a99b7b0d92f3463.png)
投稿後、数日以内にブロックの審査の上、SANGO Landに投稿したブロックが表示されます。ただし、審査の上ブロックとして承認される確率は50%ほどになるのでご了承ください。
SANGO Landにブロックを投稿することで以下のメリットがあります。
- SANGO Landにブロックが増え利便性があがる
- SANGO Landにあなたのクレジットが掲載される
- HTMLやCSS、JavaScriptの勉強になる(丁寧にブロックをレビューの上アドバイスさせていただきます)
ブロックを投稿してそれが承認されると、SANGO Landにあなたのブロックがあなたの名前やリンクとともに以下のように掲載されます。質の良いブロックの場合、多くの人に喜んでもらえますしもしかするとSANGO Land からサイトへの流入があるかもしれません。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/02/review.png)
ぜひブロックの投稿お待ちしております!
コメントを残す