ホームページ制作、ネットショップ開業・運用、SNS運用など、インターネットに関する事業支援を致します

ブロックエディタ(gutenberg)にスタイルを追加する方法

更新日
2021年3月5日

WordPressのブロックエディターにオリジナルのスタイル(CSS)を使いたい時があると思いますが、そのような時は register_block_style関数を使って行う事が可能です。

以下のソースコードはリストブロック(’core/list’)にCheckListという名前の新しいスタイルを適用する例となります(function.phpに記述すると有効になります)。

WordPressのテーマファイルを編集する場合は、編集するファイルのバックアップを行ってから作業することを推奨します。
register_block_style(
    'core/list',
    array(
        'name'         => 'checklist',
        'label'        => 'CheckList',
        'inline_style' => 'ul.is-style-checklist {
	        position: relative;
	        margin-top: 30px!important;
	        margin-bottom: 24px!important;
	        padding: 30px 24px 24px 24px;
	        border: 1px solid #E73A17;
	        -webkit-box-sizing: border-box;
	        box-sizing: border-box;
	        -webkit-border-radius: 3px;
	        border-radius: 3px;
        }
        ul.is-style-checklist::before {
	        position: absolute;
	        top: -12px;
	        left: 12px;
	        display: block;
	        content: "Check Point";
	        background-color: #ffffff;
	        color: #E73A17;
	        padding: 0 12px;
	        line-height: 24px;
	        border: 1px solid #E73A17;
	        -webkit-box-sizing: border-box;
	        box-sizing: border-box;
	        -webkit-border-radius: 3px;
	        border-radius: 3px;
        }
        ul.is-style-checklist li {
	        list-style: none;
	        position: relative;
	        padding-left: 24px!important;
        }
        ul.is-style-checklist li::before {
	        content: none!important;
        }
        ul.is-style-checklist li::after {
	        content: "";
	        position: absolute;
	        top: 4px;
	        left: 0;
	        -webkit-transform: rotate(50deg);
	        -ms-transform: rotate(50deg);
	        transform: rotate(50deg);
	        width: 5px;
	        height: 10px;
	        border-right: 3px solid #E73A17;
	        border-bottom: 3px solid #E73A17;
        }',
    )
);
※WordPressの投稿画面のイメージです。

このようにWordPressの投稿画面にてデフォルトのスタイルとは別にCheckListというスタイルが追加されていることが確認できます。

今回はリストブロックに独自のスタイル(CSS)を適用することになりましたが、見出し(’core/heading’)、段落(’core/paragraph’)、画像( ‘core/image’)、テーブル(’core/table’)、引用(’core/quote’)など、よく使うブロックにスタイルを適用することもできます。

register_block_style関数とCSSを使いこなせれば、記事の執筆時に様々なスタイルが適用できるようになりますので表現の幅が広がりますね!

  • なんでも相談

    中田勝久ICTよろず相談所は、ホームページ制作、ネットショップ開業・運用、ブログ運用、SNS運用などインターネットに関する事業支援を行なっております。

    どんな些細な疑問や質問でも気軽にお問い合せ下さい。