Still not Gutenberg?

速攻でカスタマイズを終わらせるJSONインポート法!

再利用ブロックをJSONファイルとしてインポートしちゃえば、無駄なカスタマイズの設定をすっ飛ばすことができます。

要するに

ぼくが作ったセーブデータ(再利用ブロック)を、あなたも使うことができちゃう裏技みたいな感じです。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-kirakira.png
menくん

この方法なら、1からカスタマイズのブロックやクラス名を追加しなくても、CSSを記入するだけで終了です!!

つまりこうなる

今まで

  • 素材となるブロックを作成
  • 高度な設定でクラス名追加
  • CSSでデザインを整える
  • 再利用ブロックに登録

これから

  • JSONをインポート
  • CSSでデザインを整える

AHAHAHA、いままで何やってたんだろうねw

JSONファイルをインポートする

ざっくりな流れをまずは説明しますね。

まずはぼくが再利用ブロックをつくる
ここはぼくがやるよ!

カスタマイズに必要なブロックを組み合わせて、それぞれのブロックに高度な設定でクラス名を追加していきます。出来上がったものを再利用ブロックに登録。

ZIPファイルでダウンロードできるようにするよ
ここもぼくがやるよ!

先ほど登録した再利用ブロックをJSONファイルでエクスポートします。このままではアップロードできないのでZIP(圧縮)して、あなたがダウンロードできるようにします。

あなたはダウンロードして、再利用ブロックにインポートするだけ
ここをあなたがするよ!

ZIPファイルをダウンロードして、解凍ソフトでJSONファイルにします。その後、再利用ブロックの管理画面からインポートして終了です。

あとは、流通りにCSSを追加すればカスタマイズは終了です。

言葉での説明は以上です。

「ちょっと何言ってるかわからない」って人のためにGIF動画で説明しながら一度やってみますね。

実際にやってみる

JSONファイルをインポートしてカスタマイズする流れを書いておきますね。

① JSONファイルをダウンロードする

JSONファイルをダウンロードする

例えば、比較表のカスタマイズがしたい!ってなったときは、該当ページにあるJSONファイルダウンロードボタンをクリックしてダウンロードします。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

ダウンロードしたファイルはZIP(圧縮)ファイルなので、次は解凍していきましょう

② ZIPを解凍する

解凍(展開)

ぼくは7-Zipと言う解凍ソフト(フリーソフト)を使用していますが、みなさんの普段使っているソフトで大丈夫です。

〇〇.jsonのファイルが出てくれば成功です。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

次は再利用ブロックの管理画面を表示させるよ

③ 再利用ブロックの管理画面を開く

再利用ブロックの管理画面

投稿画面からしか「再利用ブロックの管理画面」に行くことができません。(他に行き方があったら教えて)

なので新規投稿ツールと設定をさらに表示すべての再利用ブロックを管理の順に選択していきます。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

次はさっきダウンロードしたJSONファイルをインポートするよ

④ 再利用ブロックにインポート

JSONファイルをインポート

再利用ブロックの管理画面にあるJSONからインポートをクリックして、さきほどダウンロードして解凍したJSONファイルを選択してインポートします。

すると「比較表」の再利用ブロックが追加されました。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

ここでJSONファイルのインポートの説明は終わりです

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-kuma3.png
くま

せっかくなので、カスタマイズ完成までの流れも説明すんね

style.cssにカスタマイズコードを追加

追加CSSにコードを追加

カスタマイズコードをコピーしてきて、外観カスタマイズ追加CSSにコードを追加します。

子テーマに追加する場合はこちら

子テーマに追加

こっちのやり方でもOKです。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

次のは必須ではありませんが、やっておくとグーテンが使いやすくなります

editor-style.cssにコードを追加

グーテンベルク上のデザインも変更しておきましょう。

editor-style.cssにコードを追加

コードをコピーしてきて、外観テーマエディタビジュアルエディタのスタイルシートにコードを貼り付け、更新します。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

さて、これでひととおり終了です。あとはおのおの色調整して完成ですね

実際に使って色を調整する

最終調整ですね。

自分の好きな色に変更してあげましょう。

おすすめのやり方としては、実際に挿入してみて、そのあとにディベロッパーツールで調整するやり方です。

実際に再利用ブロックを追加

再利用ブロック(比較表)を追加

グーテンベルクで実際に「比較表」のブロックを追加します。

追加したら、プレビューで記事を確認します。

もしもデザインが反映されていなかったらCtrl+F5を押してください。

ディベロッパーツール起動(F12 )

ディベロッパーツール起動

グーグルクロームでF12を押して、ディベロッパーツールを起動します。

ちょちょちょいっと色を変更

ディべ

ここらへんは慣れてくると1分程度で終了します。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

カスタマイズでのディべの使い方なんかも記事にしよかなw

まとめ

JSONファイルのインポートについて説明しました。

ぼくは今後、カスタマイズをするときはJSONファイルをダウンロードできるようにしておきます。

2 COMMENTS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です