snow_monkey_prepend_main

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

  • ブックマーク
  • -
    コピー
snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

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

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

これがアラートブロック

こちらがアラートブロックになります。

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

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

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

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

というものがあります。

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

アラートブロックの種類配色を指定しているCSSクラス名
ノーマルアラート.smb-alert
ワーニングアラート.smb-alertsmb-alert--warningで部分上書き
サクセスアラート.smb-alertsmb-alert--successで部分上書き
ノートアラート.smb-alertsmb-alert--remarkで部分上書き

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

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

になります。

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

アラートブロックの種類アイコンの配色を指定しているCSSクラス名
ノーマルアラート.smb-alert .svg-inline--fa
ワーニングアラートsmb-alert--warning .svg-inline--fa
サクセスアラートsmb-alert--success .svg-inline--fa
ノートアラートsmb-alert--remark .svg-inline--fa

記述方法としては、.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を利用しての方法ではありませんが、簡単に拡張スタイルの追加方法を書いている記事もありますので、必要な方はこちらも参考にしてみてください。

「あれ?この情報、古くない?」と思ったらご連絡ください。 snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者

snow_monkey_append_main