まろやかWEB拍手のボタンをフラットデザインにしたい！(2021.5.19一部修正)
※2023.1.3現在、「まろやかWEB拍手 for WordPress」は最新のPHPには対応していないようで、不具合やセキュリティ上の問題が起こる可能性もございますのでそれへの対応も含めましてご自身の責任でご利用ください。
●はじめに
こちらの記事はCSS等の知識が全然ない素人が書いています。結構昔に趣味サイトをやっていて、最近またちょくちょく検索しながらコピー＆ペーストでどうにかしています。そんな素人なのに何故この記事を書いたかというと、「まろやかWEB拍手 for WordPress」のデザインのカスタマイズにとっても悩んで、検索してもあんまり具体的な例がなくてコピペ出来ずに苦しんだので、同じ素人仲間の手助けになればと思いました。もっともっと詳しくてこんな記事なんてと思う方はどうしたらいいか教えてください！！！ 本当はただコピペだけをしたかった何も分からない人間が書いてます！！！！
そんな素人が書いているので、美しくない書き方や間違った書き方をしていてレイアウト崩れが起こったり、上手く作動しなかったりする可能性もございますので、デザインのカスタマイズはご自身の判断でお願いいたします。
また、各配布元様及びリンク先様の利用規約や注意事項をよくご確認ください。
この記事は2021年1月12日時点での状況で書いています。今後変更がある可能性がございますので、その点もご考慮ください。
デザインのカスタマイズを公開しても大丈夫かは念のために配布元のまろやかPHP様に確認をとっておりますが、この記事はあくまでもただの一ユーザーが「まろやかWEB拍手」を使う人に役立てばと思って書いた記事です。その正誤はまろやかPHP様とは一切関係ございませんのでご了承ください。素晴らしいプラグインに加えて問い合わせのご対応・記事の公開の承諾も本当にありがとうございます。
色々まろやかWEB拍手とかの導入までのことを書いてますが、デザインをどうやってやったのかだけ気になる方は下の目次で該当項目に飛んでください。
ついでにデザインのやり方だけ書いてるのではなく全体的に騒々しい記事ですという注意を書いておきます。
●創作サイトでWordPressを使う
最近趣味創作サイトをまたやりたいと思っていて、でもHTMLも昔より大分変わったし、自分で手打ちしていくと出先で「あっ、あそこ直したい！」ってなっても簡単じゃなくて工夫が必要なんですよね。
そこで色々調べたところ、WordPressが色々カスタマイズできて、枠組みさえできればブログみたいに気軽に投稿できて良さそう！ ということでWordPressを触り始めました。まだ公開してません。触り始めたばっかり。
創作サイトを作りたい！ って同志は上記のサイトが参考になると思います。他にもnoteやはてブロとかで色々書いてらっしゃる方がいるので、検索すると更に幸せになれます。
●WordPressに拍手を置きたい！
それでWordPressを触ってまあまあ骨組みが出来たところで「WEB拍手も置きた〜い！」ってなりました。
しかし同志の方ならご存知の通り、よく使われていたWEB拍手さまは長年更新がなく、使えなくはないけれどもやっぱり更新があるサービスをお借りしたいということで、WordPressのプラグインで探しました。
様々なサイトでおすすめされているプラグインがこちらの「まろやかWEB拍手 for WordPress」です。
海外の拍手・いいねプラグインも結構色々あるみたいなんですけど、やっぱり素人は日本語で分かりやすいプラグインがいい！ そしてページごとにどこで押されたかっていうのが分かるのもいい！！ 設置も簡単！！！
利用規約・使い方は配布元のまろやかPHP様をご確認ください。
●まろやかWEB拍手のデザインを変える方法を考える
さて、ようやく本題です！
まろやかWEB拍手のボタンは「The ボタン！」って感じで、わたしが使用しているテーマが全体的にフラットデザインなこともあり、それだけ浮いちゃう感じになるんですよね。
そこで「絶対誰かがまろやかWEB拍手のデザインカスタマイズのやり方アップしてくれてるでしょ〜！」とか思って検索かけたんですけど、フラットデザインにしてるの全然見かけなかったんですよね。
検索して参考にしたのがこちらのページです。
「そっか見た目だもんな！ CSSで変えられるのか〜！」ってなりました。その程度の知識しかないとお察しください。
そこで、まろやかWEB拍手の元のCSSを見てみることにしました。
でもね、素人、見ても全然分からん……！！
WEBに強い人はこのCSSを書き変えてFTPで置き換えて、アップデートがあった時はそれに合わせて……なんて出来るんだと思いますけれども、絶対にわたしみたいな素人はそんなことをしない方がいい。何か不具合があった時にワーーッてなります。
そこで使うのがWordPressの追加CSS機能です。ダッシュボード→外観→カスタマイズ→追加CSSで行けます。追加CSSは優先して反映されるらしいです。ここなら何かあったら取り敢えず全部削除してしまえばデフォルトに戻ります。
テーマエディターで付け足すとか、子テーマ使用してる方はそこに書くとか、色々方法があるみたいですが、どれが一番いいとかこの辺の詳しい事情はわたしは分からないです！
注意点としてはテーマを変えると追加CSSも移動させなくちゃならないことです。でもそれも全選択とコピペでどうにかなるので、ちょっと手間だけどそんなに問題ではないです。
ただ、追加CSSと言えども、何度も言っているように素人が書きます。なのであんまり変えすぎると二進も三進も行かなくなりそうで怖い！ というわけでおしゃれなデザインにするのではなく「あくまでフラットデザインにしたい」を重視して、あとついでにわたしが色々いじって分かった範囲のちょっとした変更だけを書いていきます！
でもやっぱりCSSのデザインカスタマイズはご自身の判断でお願いします！
このnoteには書いてなかったな〜と思いましたが、応用編でアイコンも入れてみました↓
●拍手ボタン自体の見た目を変える
まずは拍手ボタン自体のデザインをいじってみました。まろやかWEB拍手の設定から、拍手数を非表示、拍手の文字を「Clap!」にしてます。設定上のボタンカラーは一番上の白いやつのはずです。全部デフォルトにしておいたらよかったと思ったけど、スクショ撮ってから気付いたのでそのままにします。
先程も出したこちらの記事の「フォントサイズを大きく」のところを参考にして、「これでフォントだけでなくボタン本体もいじれるんじゃないかな！？」と思って色々入れてみたら変えられました。最初は「何をすればいいのか分からない……」って途方に暮れてたので本当にありがとうございます……！
もしかしたら変えるのにもっと適切な指定があるかもしれないですけど、変えられたのでとりあえずこれでいってみます。
下の画像みたいにします。適当にスクショを撮ったらサイズ小さすぎて画質が荒いかもしれないですが、雰囲気で感じてください。
.maroyaka-webclap .btn-xs,
.maroyaka-webclap .btn-group-xs > .btn{
padding: 3px 16px;
color: #ffffff;
font-size: 14px;
border-radius: 0;
border-color: #555555;
box-shadow: none;
text-shadow: none;
background-image: none;
background-color: #999999;
} さて、未来のわたしが「これなんだっけ……」って戸惑わないためにも解説をしていきます。
コード内にメモする方法もあるのは分かってますが、不安なのでやりません！ 解説は下記を見てください！
◆padding
上の記事でもおっしゃってるように内側の余白を変えました。上下を3px、左右を16pxにしてます。
◆color
文字の色を指定しました。白くしてみてます。カラーコードって全部同じなら3文字でいいぽいですけど、なんとなくいつも6文字で書いちゃってます。
◆font-size
これも上の記事と同じふうに文字のサイズが小さかったので大きくしました。
◆border-radius
ボタンの枠の角の丸みを変えました。これを0にしたのでカクカクしました。◯pxとかで調整できます。
ちなみに50%にすると他のサイズにもよりますが、円や楕円になると思います。たぶん。上の文字とCSSのまま50%にしたら楕円になりました。
上下左右別々に変えるとか色々ありますけど、詳しいやり方は検索してください！
◆border-color
外側の枠の色を変えました。濃い灰色にしてみてます。
◆box-shadow
ボタンの下側に影があったのでnoneにして消しました。多分ボタンの下側の影だと思います……自信はない……。
◆text-shadow
これも「文字にシャドウかかってる気がする……！」って推測でnoneにしてみてフォントにかかってるシャドウを消しました。
◆background-image
ここもいじってボタンのグラデーションを消せるかな？ ってやってみました。
というのはグラデーションが多分背景としてあるんじゃないかという推測のもと、検索してボタンのデザインCSSを見まくって「たぶん検索した感じ……これで消せる……！」って試してみたら消せたって感じです。元のCSS見てみたらそれっぽいのもあるので合ってると思いたいです。
◆background-color
ボタンの背景色を変えてみました。枠よりは薄い灰色にしてみてます。
こんな感じかな！？ 合ってます！？ 抜けはないです！？ 正直聞かれても分からないので詳しいことは検索してください！
●ボタンを触った時の見た目を変える（5/19修正）
「上のやつでとりあえずやってみよう！」と思って試しに拍手を押してみたら、カーソルを合わせたりクリックしたりするとデザインが変わるので、ここもいじった方が統一感が出るな……と思っていじってみました。
ボタン触ったときに下みたいになるようにしてみます。
.maroyaka-webclap .btn-xs:hover,
.maroyaka-webclap .btn-xs:focus,
.maroyaka-webclap .btn-xs:active,
.maroyaka-webclap .btn-xs.active {
color: #f16682;
background-color: #dddddd;
border-color: #f16682;
box-shadow: none;
text-shadow: none;
}（2021.5.19 .btnだとメッセージ送信の時もこの影響が出てしまっていたので.btn-xsに変更してみました。たぶんこれで大丈夫だと思いたいです）
多分この指定がマウスオーバーとクリックしている間の指定だと思います……！ 推測……！
上でいじったものとほぼ同じ色と影をいじっていますので解説は割愛。フォントと外枠をピンクに、背景を薄い灰色にしています。
ただ、こっちはbackground-imgでのグラデーション指定でないのか、影っぽいのはbox-shadowを消したら消えました。「えっ、違うんじゃない？」と思ったら色々変えてみてください。あとわたしにも教えてください。わたしには分からないです。
ちなみに元のにあった触った時のシュンッて動きは消えてます。
ボタンを押した後の読み込み中とかもCSSで変えられるみたいですけど、読み込み中のデザインは合わせなくてもそこまで変ではないかなというのと、流石に難しすぎるので無理でした。
●ボタン内の拍手数の文字
自分では拍手数は表示しないつもりだったのでしばらく放置してたんですけど、せっかくなので変えてみました。
.maroyaka-webclap .btn > .count {
color: #ffffff;
font-weight: normal;
}またまたなんですけど、多分この指定が拍手数だな……！ って推測でやりました。
◆font-weight
一応解説すると、元のやつだと太字の指定が書き込まれていたので、色を合わせるとちょっと太字が目立つなあと思って普通の太さにしてみました。でもこれ色を合わせて太さも一緒だと、ちょっと拍手数だって分かりにくいですね。
●吹き出し型の拍手数
吹き出しタイプはまた別の枠で指定されてましたのでそっちもやってみました。
吹き出し自体はフラットデザインなのでそんな変えなくてもいいな〜と思ったけど、ボタンに合わせてみました。
でも文字だけいじるのがおすすめ。理由は難しいから。
1.複雑なのでまずは吹き出し内の文字だけ
.maroyaka-webclap .btn + .balloon .count {
color: #ffffff;
font-weight: normal;
} また！ おそらくの！ この指定だと思うってやつです！
上のボタン内カウントと一緒の感じにしてます。
ここでフォントのサイズとかも変えられるかな〜と思ったんですけど上手いことできなかったです。下記の吹き出しのデザインと一緒に何かしら出来るかとも思ったけど、下手に変えると全てが崩れそうなので試すのもやめました。
2.吹き出しの色の変更
.maroyaka-webclap .btn + .balloon{
background-color:#999999;
border-color:#555555;
}
.maroyaka-webclap .btn + .balloon:after{
border-right-color: #999999;
}
.maroyaka-webclap .btn + .balloon:before {
border-right-color: #555555;
}分からん！！！！！！！！！！
よくおしゃれな見出しCSSとかで使われるやつ！ わたしはあれが全然分からないのでコピペして色変えてみて「ここの色は……これか！」って悩みながらやってます。今回もやりました。
解説というか、「わたしがこれ変えてみたらこうなった」っていうのを言いますと、一番上のやつは吹き出しの……本体？ あの四角いところだけ変わります。
真ん中のafterってついてるやつのborder-right-colorの色を変えると吹き出しの尻尾部分の背景が変わったみたいです。
一番下のbeforeのborder-right-colorが吹き出しの尻尾の枠の色みたいです。多分。もう分からなすぎて記憶がないので出力されてるボタンの色を見ながら書いてます。
吹き出しはたぶん下手にいじるとデザインが崩れる！！
素人のわたしは色だけいじってみてやめました。色すらも「この指定で変えられるんじゃないかな！？」って一番最初に試したところも見事に間違ったし……。わたしは……拍手数表示する気ないので……これで許してください……。
ちなみに拍手ボタンをマウスオーバーしたり押したりしてる時には吹き出しはそのままになるので、そこも考慮して色とか整えたい方はがんばってください。
さっきまで書いてたCSSを使って吹き出し型の拍手に触るとこんな感じになりました。
●おわりに
いや……ほんと……「おそらく」「推測で」「多分」の使いまくりで申し訳ないです……。そのくらい素人なので勘弁してください……。質問とかされても分からないと思います！ 先に謝っておきます！ ごめんなさい！
あと余談ですがこの記事書きながらちょっと拍手試してみて、その後にヘッダー用のスクショ撮ったら拍手数増えてちょっと面白くなっちゃった。この9個の拍手も11個の拍手も全て試し打ちの自作自演です。
あとまたまた余談ですけど、最初の方でリンクを貼った創作サイト制作支援サイトのdo様も恐らくまろやかWEB拍手を使っている感じですよね……。すごい人がやるとめちゃくちゃおしゃれになる……すごい……。
でも完全な素人のわたしでもまあまあフラットでシンプルにはなりました！ 許してください！
まろやかWEB拍手は素敵で使いやすいプラグインなのでぜひぜひ使ってくださいね……！！
作成者のtisa様、本当に素晴らしいプラグインをありがとうございます……！！！！
皆様の楽しいWordPressサイト生活が送れることを祈っています。
わたしも精進します！
2021.01.12 りう