BlockEditorのBlockをCSSでカスタマイズ

サイトの紹介と使い方動画


created: 2021/07/31 modified: 2021/09/14

初めに

ソースコードの一括コピーボタンを付けようとしましたが、JavaScriptでの方法しか見つかりませんでした。JavaScriptはAMPと相性が悪いみたいなので諦めました。

方法

エディタモードをコードエディタにします。
下図の赤枠の中のclass に自分でstyle.cssで記述したCSS class を加え複数classにします。既存のclass の後ろに半角スペースを空けて加えます。
例として、既存のwp-block-code に自分のmy_code_block classを加えました。
尚、wp:code{ 以下はワードプレスが自動生成するので、記述は上記のclass を加えるだけにしてください。

code block

wp-block-code にmy_code_block を加えます。
サンプルCSS code:CSSコードサンプル

画像 block

wp-block-image-size-full にmy_img_block を加えます。
サンプルCSS code:CSSコードサンプル

メールアドレス:

お問合せ・御要望

  • お問合せ
  • トップへ戻る
    タイトルとURLをコピーしました