Snow Monkey Blocksのアラートブロックの配色変更方法

Snow Monkeyプロダクトの１つにSnow Monkey Blocksとものが用意されています。こちらは、WordPress公式リポジトリに掲載されていますので、Snow Monkey以外のテーマにも利用することが可能です。

Snow Monkey Blocks

モンキーレンチ作の Gutenberg ブロック集。

ja.wordpress.org

こちらのプラグインで提供されているブロックの１つに、アラートブロックというものがあります。

今回は、これらアラートブロックの配色カスタマイズ方法についてご紹介します。

デフォルトでの配色設定について

こちらのブロックには、あらかじめ配色種類が４つ用意されていて、

• ノーマルアラート
• ワーニングアラート
• サクセスアラート
• ノートアラート

というものがあります。

そして、それぞれにCSSクラスが用意されており、配色が指定されています。

smb-alert--**で上書きされているのは、

background-color: ***; //背景色
border-color: ***; //罫線色
color: ***; //文字色

になります。

また、アイコンの配色は以下のようなCSSクラスで設定されています。

記述方法としては、.smb-alert--warning .svg-inline--faを例にすると、

.smb-alert--warning .svg-inline--fa {
  color: ***;
}

というように、colorプロパティで色を指定しています。

これらを踏まえて配色カスタマイズの方法をご紹介します。

種類別に配色を変更する方法

この場合、単純に上記したCSSクラスを上書きするものを用意するだけで良いです。

例えば、「ノーマルアラートを選択した場合には必ずこの配色にする」という仕様であれば、この方法で可能です。

デメリットとしては、デフォルトの配色セットを捨てることになります。個人的に、それはそれで勿体無い気もするので慎重に判断をしてくださいね。

WordPress管理画面内【外観】→【カスタマイズ】→【追加CSS】、もしくはMy Snow Monkey（プラグイン）や子テーマ側からCSSを追加します。

//ノーマルアラート
.smb-alert {
  background-color: ***; //背景色
  border-color: ***; //罫線色
  color: ***; //文字色
}
.smb-alert .svg-inline--fa {
  color: ***; //アイコン色
}

//ワーニングアラート
.smb-alert--warning {
  background-color: ***; //背景色
  border-color: ***; //罫線色
  color: ***; //文字色
}
.smb-alert--warning .svg-inline--fa {
  color: ***; //アイコン色
}

//サクセスアラート
.smb-alert--success {
  background-color: ***; //背景色
  border-color: ***; //罫線色
  color: ***; //文字色
}
.smb-alert--success .svg-inline--fa {
  color: ***; //アイコン色
}

//ノートアラート
.smb-alert--remark {
  background-color: ***; //背景色
  border-color: ***; //罫線色
  color: ***; //文字色
}
.smb-alert--remark .svg-inline--fa {
  color: ***; //アイコン色
}

任意のCSSクラス名を付与して配色を変更する

上の方法では、例えば「サクセスアラート」の配色を上書きしてしまうと、全ての「サクセスアラート」を選択したアラートブロックの配色が変更されることになります。

そうではなく、任意のアラートブロックだけ配色を変更したいという場合には、任意のCSSクラスを設定して変更する方法もあります。

その場合には、設置したアラートブロックを選択し、サイドバー下部の【高度な設定】から【追加CSSクラス】という部分に、任意のクラス名を入力します。

以下、hsm-original-alertと入力したという前提で解説します。

この場合、このCSSスタイルを設定したアラートブロックにだけ適応するCSSスタイルを用意してかないといけませんので、上と同じような方法でCSSを用意します。

.hsm-original-alert {
	background-color: #000000;
  border-color: pink;
	color: #ffffff;
}
.hsm-original-alert .svg-inline--fa {
	color: yellow;
}

このように記述することでスタイルを用意することができます。

まとめ

上記の方法の他に、拡張スタイルを用意する方法もあるのですが、急に難易度が高くなるので（黒い画面とか触る）今回はご紹介を割愛します。

そのうちまた需要がありそうなら、そちらの方法も書いてみようと思います。Snow Monkeyを利用しての方法ではありませんが、簡単に拡張スタイルの追加方法を書いている記事もありますので、必要な方はこちらも参考にしてみてください。

「テイクアウト岐阜」というウェブサービスを立ち上げた経緯と仕組みとコード | オレインデザイン – 岐阜県岐阜市のWordPress制作専門家

2020年4月13日に、「テイクアウト岐阜（https://takeout-gifu.com）」というウェブサービスを公開しました。この記事では、このウェブサービス（なぜウェブサービスと呼ん…

olein-design.com