いいねボタン改の吹き出し位置について

  • このトピックには5件の返信、1人の参加者があり、最後に鈴木により3週、 4日前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #2946 返信
    ぽちお
    ゲスト

    レイアウト上いいねボタンを右寄せに設置しています。

    左寄せの場合は問題ないのですが、右寄せにした場合いいねを押した際吹き出しがさらに右に出てしまいスマホの場合表示が半分以上隠れてしまいます。

    PCでも小さめのサイズでみると隠れます。あきらめていいねボタンを左に設置すれば影響はないのですが…

    いいねボタンを押した際の表示位置の調整がもしできるのであればご教授いただければ幸いです。

    説明がへたくそで申し訳ありません。

    #2947 返信
    ぽちお
    ゲスト

    送信してから気づきました。画像添付できたorz

    イメージ的にはこの吹き出しを内側(左側)に入れたいです。

    #2948 返信
    ガタガタ
    キーマスター

    いいねボタン改のご利用ありがとうございます。

    以下の通りにCSSを追記してみるとどうでしょうか。

    button.newiine_btn div.newiine_thanks {
    right: 0px;
    }
    button.newiine_btn div.newiine_thanks:after {
    right: 20px;
    left: auto;
    }

    newiine.cssに直接書き足すのではなく、ご自身で新しくいいねボタンカスタマイズ用のCSSファイルを用意し、newiine.cssより後に読み込ませることをオススメします。(いいねボタン改にアップデートがあったときに、アップデート作業を楽にする目的です)

    • この返信は12ヶ月前にガタガタが編集しました。
    #2950 返信
    ぽちお
    ゲスト

    gtgt様

    ありがとうございます。

    イメージしたとおりになりました!

    CSSをいじればいいとは思っていましたが、追記すればよかったのですね。

    一生懸命既存の記述をいじいじしてました><

    とてもいい勉強になりました。

     

    Ps.

    いつも素敵なプログラム、テンプレートありがとうございます。

    #2951 返信
    ガタガタ
    キーマスター

    理想通りになったようでよかったです。
    CSSの編集については、このあたりの記事を参考に、ぜひ勉強してみてください。

    CSSの基礎について

    【初心者向け】CSS編集の基本を覚えてサイトのデザインを自分好みにアレンジしよう

    ブラウザを見ながらCSSの記述を書き換えるとどうなるか確かめられるツール

    デベロッパーツールの使い方を画像付き解説!CSS編集の強力な味方にしよう

    #3349 返信
    鈴木
    ゲスト

    いつもお世話になっております。

    フキダシの中央寄せの記述のしかたについて教えていただけたらと思います。

    いいねボタンを横並びに複数設置しているため、スマホから見た際に右寄せでも左寄せでもフキダシが画面から切れてしまいます。

    こちらの記事と元のCSS、設置マニュアルを参考に試しにnewiine_thanks_centerというclassを追加して自分でも弄ってみたのですが、設定の仕方が悪いらしくてフキダシが変な場所に飛んでいってしまいます。

    (狙った位置に定まってはくれないものの、反映自体はされます)

    面倒をおかけしてすみませんが、ご教授どうぞよろしくお願いします。

6件の投稿を表示中 - 1 - 6件目 (全6件中)
返信先: いいねボタン改の吹き出し位置についてで#2950に返信
あなたの情報: