MD-Blog_Web System

※ この記事は「PowerCMS X Advent Calendar 2025」15日目の記事です。

PowerCMS Xに、バージョン3.5から追加された待望のブロックエディタ機能（ComponentBlocks プラグイン）。
今回はこのブロックエディタを、自分的に少しだけ使いやすくしたカスタム例をご紹介します。

マルチブロックの階層構造をわかりやすくする

マルチブロック機能で、ブロックの階層が深くなってくると、今はどこの親ブロックに属しているのかわからなくなってきます。
その場合でも見た目でわかりやすくするためにブロックの枠を階層ごとに変更してみました。

各ブロックの境目も点線にしてあります。

• 1階層目：そのまま
• 2階層目：黒点線
• 3階層目：緑線
• 4階層目：赤線

ブロックラベル

ブロックのラベルか、ブロックのフィールドのラベルかをぱっと見で見分けやすくできるように、
少し濃い色の背景を敷きました。

繰り返しフィールド

ブロックの「繰り返しフィールド」部分も数が増えてくると、いま何ブロック目かわかりにくくなってくるので、
各フィールドの背景にカウントを表示するようにしました。

必須アイコン

ブロックのフィールドを「必須」にしても、入力画面上ではそのフィールドが必須かどうかがわからなかったので、
ブロックのテンプレート内で標準テンプレートソースにclass『is-required』を追加しました。

スタイル自体はuser.cssに記述しています。

<div class="form-group is-required">
<mt:blockparts type="text" key="title" index="0" label="タイトル" required="1" />
</div>

これらのスタイル追加で、ブロックがたくさん積まれてもみやすくなりました。
ブロックのカスタムする方法は『テンプレート』の他にも、『methods』内でVue.jsを使うやり方もあります。

他にもいいカスタム方法があればぜひブログなどで教えてください。

参考リンク

• ブロックエディタを用いたコンテンツの編集(ComponentBlocksプラグイン)
• PowerCMS X の管理画面を JavaScript でカスタマイズする方法

CMS構築ならMONSTER DIVEまでご相談を！

MONSTER DIVEでは、PowerCMSをはじめ、Movable TypeやWordPressなど、CMSを活用したWebサイト構築のご相談、承っています。
お気軽お問い合わせください。

• WEBプロダクション事業部について
• お問い合わせはこちらから