なんかうまくいかん

朝はりんごバターぬったトーストと無糖紅茶、昼は自作のスクランブルエッグ丼、夜は白身魚とじゃがいもとピーマンとハムのバター炒めだった！美味かった！

今日は昼から夜までずっとあおまる大百科で吹き出しにしたくて試行錯誤してた。

テスト用に専用で記事作って、

そこでshortcodes ultimateっていうプラグインで使える『サービス』っていうやつのデザインを吹き出し風に強引にカスタマイズしてた。

元々、吹き出しを使って解説ページ内を華やか？にしたかったんだけど、

外部サイトにある画像URLを使ったりとかなんやかんやのせいで実装が難しくて、

そこで前から入れてたshortcodes ultimateのサービスが一番理想に近かったのでそれを使うようになった。

で、本日はそれを本格的に吹き出し化したくてcssいじくって頑張ってた。

とりあえず吹き出し作って画像の横に並べる所までは行けたんだけど、

サービスタイトルが画像の下に行ってくれない。

displayとかpositionとかいろいろ変えて試してみたりして、なんとかタイトルをアイコン画像の下に持っていけた。

でもなぜかアイコンとタイトルの間に謎の空間があって「なんじゃこれ！」ってなった。

その後、デベロッパーツールで見てみたらline-heightってやつが悪さをしてたらしく、値を小さめにしたらついに…

ついに、やっと理想を再現することに成功！

最終的にはこうなった。

👇

一部コピペしたり効果あんのかしらんけど、

見た目的には影響ないからなんとなく書きっぱにしたりしたのがあるけど、ほとんどは自分で書いた。

でもこのスクショ撮った後、

タイトルの文字数が多いと改行されずに吹き出しの下に潜り込んじゃう事に気がついた。

su-service-title内にアイコン画像と同じ幅でwigthを追記すれば、

タイトルの文字数が多くても自動で改行されるようになった。

プラグイン本体のファイルをいじくる必要がある箇所が何個かあって、

でもプラグインの中身いじくるとアプデ入った時にリセットされちゃう可能性大なので、

本来プラグインをいじくる必要がある箇所は!importantで優先されるようにした。

管理画面のダッシュボードにある『ショートコード』→設定でcssでデザインをカスタマイズしただけなので、

もとに戻したければ消すかコメントアウトさせればおk。

疲れた…_(:3」∠)_

やっとこのcssいじくり作業が終わったので、

やる気になれば焔黒丸の擬人化デザインに入りたいと思ってる。