Still not Gutenberg?

グーテンベルクで比較表を思いっきり使おう\\٩( ‘ω’ )و //(SANGO編)

※この記事はグーテンベルクで書いています。

グーテン!グーテン!グーテン!と~くで呼んでる~声がすルン♪

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

なんだか、パーマンのOPをグーテンにアレンジして歌っちゃいますよね

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/yohanesu2.png
ヨハネス・G

あるあるじゃな

Come on Perman

さて、クソみたいな余談はこの辺にして、今回もグーテンベルクの楽しいカスタマイズをしていきましょう

説明しよう!

グーテンベルクはカスタマイズするのがとっても簡単なので、とってもカスタマイズがすごく楽しいのである。(語彙力)

今回ご紹介するカスタマイズはこちら

タイトル

  • ココにはこれ
  • あれにもこれ
  • そこにはこれ
  • ぼくにはこれ

タイトル

  • ここにはこれ
  • そこにはこれ
  • あれにもこれ

HAHAHA、似たようなの見たことある人も多いですよね。

そうです。有名なぽんひろさん(@ponhiroo )の比較表をパク…参考にしました!

参考 【HTML/CSS】tableタグを使わない比較表デザイン!レスポンシブ対応!|ぽんひろ.com

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

SANGOにもともとあるボックスに近いデザインに少しアレンジしています

ぽんひろさんのサイトにはたくさんのデザインがありますが、ぼくは個人的に趣味でカスタマイズしている心狭カスタマイザーなので、紹介するのは一種類です。

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

まぁ、いつか違うデザインやSANGO以外のカスタマイズもやるつもりです(たぶんいつか)

グーテンでカスタマイズするメリット
  1. 高度な設定からクラス名を簡単に追加できる
  2. 元のコードがキレイだからカスタマイズコードも短い
  3. HTMLコードを使わなくて済む
  4. 他のテーマでもほぼ同じカスタマイズが使える
  5. エディタ上の装飾も簡単に変更できる

こんな感じで、グーテンでカスタマイズするのはメリットだらけ!

グーテンだと見た目がいいよ

投稿画面と記事がほとんど一緒だよ

グーテンベルクで書くと、上の動画のように見た目がほとんど一緒です。

このように投稿画面(グーテンベルク)だと、リライトするときにめちゃくちゃわかりやすいので、おすすめです。

※ ぼくのグーテンはちょこっとカスタマイズしているので、デフォルトのものとは少しデザインが違っています。

比較ボックスをつくる流れ

  • 素材となる
    ブロックを作成
  • 高度な設定で
    クラス名をつける
  • CSSで
    デザインを整える
  • グーテンベルクの
    デザインも変更する
  • よく使うときは
    再利用ブロックに追加

ちょっとやることが多いように見えますよね。

でも、安心してください。ひとつひとつはとっても簡単なので、慣れてしまえば今までよりもずっとカスタマイズしやすくなっています。

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

はじめての方もいるかもなので、詳しく説明していきますね

速攻でカスタマイズを終わらせる方法

この記事を書き終わったあとに気づきました。

再利用ブロックのJSONエクスポート(インポート)を使えば、びっくりするくらい早くカスタマイズが終了します。

ダウンロードしたら、解凍してjsonファイルを再利用ブロックにインポートしてください。そしたら後はCSSを追加するだけになります。

ココらへんは近いうちに詳しく説明します。

jsonファイルは再利用ブロックのデータを登録する時に使用します。

ブロックを作成する

  • 素材となる
    ブロックを作成
  • 高度な設定で
    クラス名をつける
  • CSSで
    デザインを整える
  • グーテンベルクの
    デザインも変更する
  • よく使うときは
    再利用ブロックに追加

今回、作るのはこちらの比較表です。

これをブロックに分解するとこんな感じになります。

ブロックの組み合わせ

全体がカラムブロックで、その中に2つの列ブロックがあります。

そして、列ブロックの中に段落ブロックとリストブロックが入っている組み合わせになります。

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

言葉で説明するのは限界がありますね。動画で見てみましょう

比較表のブロックを作るよ

ブロックの追加からレイアウト要素カラムを選択します。

これでカラムブロックの中に列ブロックが2つ作られます。

あとは段落ブロックとリストブロックを追加していきます。

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

組み合わせるってのは、まさにブロックみたいですね

リストをSANGOデザインに変更

今回の比較表に使用するリストはSANGOオリジナルスタイルです。

スタイルの変更

リストを選択すると、右メニューでスタイルを変更できます。

今回は、「メインカラー」と「アクセントカラー」のリストを使います。

SANGOオリジナルスタイルに変更

クラス名をつける

  • 素材となる
    ブロックを作成
  • 高度な設定で
    クラス名をつける
  • CSSで
    デザインを整える
  • グーテンベルクの
    デザインも変更する
  • よく使うときは
    再利用ブロックに追加

それぞれのブロックに高度な設定でクラス名を追加していきます。

高度な設定は、ブロックを選択した状態のときに右サイドメニューの一番下に出てくる設定画面です。

カラムブロックのクラス名

カラムブロック

クラス名hikaku

列のクラス名

ひとつめの列ブロック

クラス名my-bgc1-usume

ふたつめの列ブロック

クラス名hikaku-left my-bgc2-usume

ふたつめのブロックは余白の調整で、クラス名がもうひとつ必要です。

説明しよう!

クラス名に使っているbcgはback ground colorの頭文字をとって、bgcとしており、背景色を表しているのである。

段落ブロック

ひとつめの段落ブロック

クラス名hikaku-title my-bgc1

ふたつめの段落ブロック

クラス名hikaku-title my-bgc2

リストブロック

ひとつめのリストブロック

クラス名my-bgc1-usume

ふたつめのリストブロック

クラス名my-bgc2-usume

リストブロックは最初っからなんかクラス名がついています。

それを消さずに、上のクラス名を追加してあげてください。

クラス名をつけるのは一度だけ

クラス名をつけるのは、最初だけです。ちょっとめんどくさいと思うかもしれませんが、コピペしてちゃちゃっと終わらせましょう。

CSSでデザインを整える

  • 素材となる
    ブロックを作成
  • 高度な設定で
    クラス名をつける
  • CSSで
    デザインを整える
  • グーテンベルクの
    デザインも変更する
  • よく使うときは
    再利用ブロックに追加

追加CSSでも外観のテーマエディタでもどちらに追加してもOKです。

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

背景色は自分で設定してね

グーテンベルクのデザインも変更する

  • 素材となる
    ブロックを作成
  • 高度な設定で
    クラス名をつける
  • CSSで
    デザインを整える
  • グーテンベルクの
    デザインも変更する
  • よく使うときは
    再利用ブロックに追加
グーテンベルク上での見え方

グーテンベルクと紐付けしたedtor-style.cssに以下のコードを追加します。

これをしておけば、プレビューしなくてもいいレベルにデザインが整うと思います。

再利用ブロックに追加する

  • 素材となる
    ブロックを作成
  • 高度な設定で
    クラス名をつける
  • CSSで
    デザインを整える
  • グーテンベルクの
    デザインも変更する
  • よく使うときは
    再利用ブロックに追加

今回作成したブロックの組み合わせを再利用ブロックに追加しておくと、次に使う時に簡単に呼び出すことができます。

比較表を再利用ブロックに登録

ポイントはカラムブロックを一発で選択できないので、矢印キー(↑)を使って絡むブロックを選択します。

再利用ブロックの使い方についてはこちらを参考にしてください。

まとめ

今回は、ぽんひろさんの比較表を参考にカスタマイズしました。

参考 【HTML/CSS】tableタグを使わない比較表デザイン!レスポンシブ対応!|ぽんひろ.com

本当にありがとうございました( ˶ˆ꒳ˆ˵ )

グーテンベルクのカスタマイズは、一度作ってしまえば使い回しがしやすくなります。

リライトしたときにHTMLコードが無いのは、めちゃくちゃ気持ちいですよ♪

コメントを残す

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