WordPressの画像ブロックにスタイルを追加した

ブログ 最終更新日:2025年06月28日 公開日:2025年06月24日

さっき書いた記事で画面のキャプチャを画像ブロックで入れた。だが背景が白の本文に、同じく背景が白い画像を追加すると境目がわからなく見栄えが悪いので、画像追加時に選べるスタイルとして枠線（ボーダー）付きのものを追加した。

ちなみにそのさっき書いた記事

もともとブロックエディタになる前は素のhtmlでclassを与えていた。今でも画像ブロックの高度な設定の追加CSSクラスフィールにclassを書くことはできるが、せっかくマウスでお手軽UIが用意されているなら、よく使うものは登録しておきたい。

目次

• 1.画像ブロックのスタイルとは
• 2.スタイルの追加方法
• 2-1.①functions.phpに追記
• 2-2.②image-block-style.jsの作成
• 2-3.③CSSを追加
• 2-4.各作業の意味
• 3.結論

画像ブロックのスタイルとは

本記事における画像ブロックのスタイルとは、WordPressのブロックエディタで画像を追加する際に右メニューから選べるスタイルのことを指している。（画像参照）（この画像でも早速枠線を付けている）

この画像にある「デフォルト」と「角丸」は最初から入っていた。たしか私はWordPressのテーマから自作したはずだから、この２つは最初から入っているものなのだろう。
「枠付き画像」というやつが今回追加したものだ。

スタイルの追加方法

早速ChatGPTに聞いたところ、各作業とその際に必要なコードを秒速で返してくれた。

①functions.phpに追記

function mytheme_register_block_styles() {
    wp_enqueue_script(
        'image-block-style',
        get_template_directory_uri() . '/image-block-style.js',
        array('wp-blocks', 'wp-dom-ready', 'wp-edit-post'),
        filemtime(get_template_directory() . '/image-block-style.js')
    );
}
add_action('enqueue_block_editor_assets', 'mytheme_register_block_styles');

※ image-block-style.js はテーマディレクトリ直下に作ると仮定。

②image-block-style.jsの作成

テーマディレクトリ直下にimage-block-style.jsを作成し、中身に下記を書く。

wp.domReady(() => {
    wp.blocks.registerBlockStyle('core/image', {
        name: 'bordered',
        label: '枠付き画像'
    });
});

③CSSを追加

投稿画面で読み込んでいるCSS（style.css等）に下記を書く。編集画面にも効かせるなら、そちら用のCSSでも同様。

borderをいじったりそれ以外のstyleを当てたいならここを好きにいじってね。

.is-style-bordered {
	border: 1px solid #bbbbbb;
}

※ .is-style-xxxx はブロックに自動で class が付く仕様らしい。

以上で完了。5分かからずできた。ありがとうChatGPT。

各作業の意味

それぞれの作業やコードにどんな意味があるのかもChatGPTに聞けば詳しく教えてくれる。
各処理ごとにコメントアウトで書かせるとかもできる。

ただ今回私は目的が達成できたから流し見しかしていない。だからエンジニアがみたら変なことをしている可能性もあるが、致命的じゃなければいいかなくらいに考えている。なにかあったらコードをChatGPTに渡せばまた全部教えてくれるし。

結論

やりたいことがあったらとりあえずAIに聞いてみよう。んで少しトライアンドエラーすれば大体なんとかなる。極端な話、難解な問題でもなんとかなるまでトライアンドエラーすれば絶対解決するわけだし。そこは時間や気力の問題になるが、AIのお陰でハードルがかなり下がったように感じる。

ゼロから学ぶ はじめてのWordPress 第2版 ［バージョン6.x対応］　簡単にできるWebサイト制作入門

• Kindle
• Amazon