【WordPress】まろやかWEB拍手 for WordPressのメッセージ欄をカスタマイズする

2023年2月26日 00:53

はじめに

カスタマイズというよりも、中途半端に何かが奇怪しいメッセージ欄を微調整する方法です。
CSSの上書きによる相殺のため、mwc.css を直接編集する場合はわかりやすく一番最後に追記してください。
また、自作CSSとして読み込ませる場合は mwc.css よりも後に読み込ませるか、テーマのカスタムCSSとして追加してください。

PHP8への対応、また、拍手ボタンのカスタマイズ及びカスタムボタンの追加については以下の記事を参照してください。

今回、弄っていくのは下の画像の箇所です。
わかりやすく最初から書き換えるclassを提示してみました。

ただ、フォームそのもののデザインは極力弄らない方向性でいきます。
Bootstrap否定派ではありますが、CSSを弄り慣れていない人にとって統一したデザインを提供するという意味では、CSSフレームワークはやはり高いメリットを有していることも否定できないからです。
CSSを弄り慣れている方は687行目にある .form-control というclassを確認してみてください。
ここに沿って書き換えれば好きなようにフォームをデザインできます。

1. 吹き出しの矢印の修正

これはわざとなのか単純なミスなのかわからないのですが、画像を拡大するとわかるように、メッセージ欄本体と色が違うため、地味に目立つので修正します。
ただし、古い化石端末ではどうしても境界線が目立ってしまうのは諦めましょう。

修正するのは以下のとおりです。

.mwc-message-box.arrow::after {
  border-bottom-color: #F8F8F8;
}

.mwc-message-box.arrow::after が矢印の背景色で、.mwc-message-box.arrow::before で矢印のボーダーを変更します。

蛇足として説明すると、.arrow::after のborder-widthとmargin-leftを .arrow::before のborder-widthとmargin-leftよりも1px小さくすることでこの輪郭線つきの矢印を実装しています。
これは吹き出しタイプの拍手回数でも同じです。
もし、吹き出しタイプの拍手回数を弄りたい場合は以下の部分を変更してください。

.maroyaka-webclap .btn + .balloon {
  background: /* 背景色 */;
  border: 1px solid /* ボーダー色 */;
}
.maroyaka-webclap .btn + .balloon::after {
  border-right-color: /* 背景色 */;
}
.maroyaka-webclap .btn + .balloon::before {
  border-right-color: /* ボーダー色 */;
}

また、メッセージ欄、及び吹き出し（矢印）の背景色・ボーダー全体を変更する場合は以下のように直します。

.mwc-message-box {
  background: /* メッセージ欄本体の背景色 */;
  border-color: /* メッセージ欄本体のボーダー色 */;
}
.mwc-message-box.arrow::after {
  border-bottom-color: /* 吹き出し（矢印）の背景色 */;
}
.mwc-message-box.arrow::before {
  border-bottom-color: /* 吹き出し（矢印）のボーダー色 */;
}

影を消したい場合は box-shadow: none; を .mwc-message-box に追加します。

2. 送信ボタンの変更

レスポンシブ前提の割になぜか送信ボタンが左側に配置されているので、これも弄っていきます。

まずは単純に右寄せにする方法から。

.mwc-message-box .btn.btn-primary {
  float: right;
}

特に回り込みの解除はしません。

次に、ボタンそのもののサイズと色を変える方法です。

.mwc-message-box .btn.btn-primary {
  width: 100%;            /* サイズ */
  background: #bbbcde;    /* 背景色 */
  border-color: #8491c3;  /* ボーダー色 */
  color: #4a488e;         /* 文字色 */
  text-shadow: none;      /* テキストシャドウ */
  box-shadow: none;　　　　/* ボックスシャドウ */
}

/* ホバー時 */
.mwc-message-box .btn.btn-primary:is(:hover, :active, .active) {
  background: #4a488e;
  color: #fff;
  transition: all .5s;
}

前回、拍手ボタンのカスタマイズの際にも書きましたが、 .btn-primary は共通設定になります。
そのため、迂闊に .maroyaka-webclap .btn-primary となどと指定してしまうと、拍手ボタンにもメッセージ欄の送信ボタンにも影響しますが、.mwc-message-box .btn.btn-primary と指定する分にはメッセージ欄にしか影響しません。
逆に言うと、 .maroyaka-webclap .btn-primary で全体を上書きしてから、.mwc-message-box .btn.btn-primary で再度メッセージ欄の送信ボタンだけを上書きするということも可能なので、必要に応じて使い分けてください。

3. 定型文のselect要素

ここにも地味に気になるところがあります。
左右のpaddingです。
名前やメッセージのplaceholderよりも内側に入っています。
ついでに矢印の位置も個人的に気になるので、ここも修正していきます。

まず、paddingから。

.mwc-message-box select.form-control {
  padding: 6px 10px;
}

左右12pxあったところを10pxにしました。
そして問題の矢印です。
まず、Reset CSSを導入している方は矢印がきちんと表示されていますか？
表示されていない方はどこかに appearance: none; を指定していませんか？
▼定型文 という表示によってドロップダウンリストであることは把握できるかもしれませんが、ユーザービリティ的にはよろしくないため、特に拘りがない方は必ず初期値に戻しましょう。
位置が気になる方は、以下のやり方で修正します。

前述のとおり、デフォルトの矢印を消すには appearance: none; を指定します。
次に任意の矢印を指定しますが、まず、select要素には疑似要素（::before、::after）が使用できません。
というよりも、フォーム部品自体に::before、::afterの疑似要素は使用できないため注意が必要です。
そのため、やり方としては以下の2つがあります。

フォーム部品を<div>などで囲み、親要素に対して疑似要素を指定する。
フォーム部品の背景に画像を指定する。

フォーム部品を囲むとなると、JavaScriptで書き換えるかフォーム生成用の mwc.js を直接、書き換える必要性があるため、今回は背景画像として指定する方法を取ります。

まず、適当に矢印用の画像を用意します。
アイコンフォントを提供しているサイトの多くではSVG、またはPNG画像を個別にダウンロードできると思うので、そちらからお借りします。
今回はまたGoogleのMaterial Symbols and Iconsから借りてきました。
そのままだとファイル名が長ったらしいので、適当に arrow_drop.svg とリネームします。
mwc.css に直接書き込んでいる方は、プラグインフォルダ直下のimgフォルダにこれを入れます。
自作CSS、及びテーマファイルのカスタムCSSを利用している方はテーマフォルダ直下のimg/imageフォルダに入れてください。
今回はテーマフォルダ直下から呼び出します。
読み込んでいるCSSの位置によって、画像指定の階層に注意してください。

.mwc-message-box select.form-control {
  padding: 6px 10px;
  appearance: none;
  background: #fff url('./img/arrow_drop.svg') no-repeat;
  background-size: 26px;
  background-position: center right 4px;
}

background-sizeは使用している画像によって適時変更してください。
background-positionに right 4px と指定していますが、ここの4pxで位置を微調整します。center は上下からの位置です。

全力で弄りたい方は冒頭でも触れたように .form-control を上書きしましょう。
別のCSSフレームワークを使用したい方は mwc.js にて直接、classを書き換えます。
classをそのままにプロパティのみ移植する場合は、上書きによる相殺にしろ mwc.css に直接、移植するにしても、書き換えの漏れに注意してください。

以上、お疲れ様でした。