いいねボタン・改のお礼メッセージを出す位置を修正する方法

ヘッダーメニューにいいねボタンを置いたらお礼メッセージが隠れてしまった

いいねボタン改のデモページを見ると、どうやらボタンを押したときのメッセージを使わない方法もあるようです。

でもお礼メッセージを見せたい…。ということで、デザインを微調整します。

クラス名を変更・追加

吹き出しの三角（▼）の向きを変える

newiine_thanks newiine_thanks_upのクラスをnewiine_thanks newiine_thanks_downに変更するだけで、吹き出しの三角（▼）の向きが変わります。

背景も白なので画像がわかりづらいのですが…。吹き出しの向きがかわりました。

吹き出しの位置を変更する

さらに、吹き出しの位置もnewiine_thanks_rightクラスを追加するだけで調整できます。

<button type="submit" class="newiine_btn newiine_type02" data-iinename="【IDなど】">
    <span class="material-icons-round">favorite</span>
    <span class="newiine_count"></span>
    <div class="newiine_thanks newiine_thanks_down newiine_thanks_right" style="display:none;">
        <div class="newiine_box">
            <p>ありがとうございます！お役に立ちますように</p>
        </div>
    </div>
</button>

CSSで微調整

あとはCSSですね。

button.newiine_btn div.newiine_thanks{ min-width:200px !important; }

最小横幅を変えて、こちらの指定を優先的に読みこむようにしました。

マニュアルを読もう

向きや位置を自分で変える必要があるのかな？と思ったらマニュアルにちゃんと書いてあってだいぶ工数が減った！助かります。

今回変更したサイト

https://labo.01kawa.com/stachare

よかったら押してみてください！
あと使ってみてください！カレンダー形式のTODOリストです。

その他