cssとclassを組み合わせてユニットに吹き出しをつける方法

bingo!CMS1.7.0より搭載された「グリッド v17ユニット」を使用し、cssとclassを組み合わせてユニットに吹き出しをつける方法をご紹介します。
※bingo!CMS1.7.xをご利用の場合のみ設定できます。
※スキンはV17のものをご使用ください。

設定例

Before

「グリッド v17ユニット」を使用し、cssとclassを組み合わせてユニットに吹き出しをつける方法の設定前サンプル

After

「グリッド v17ユニット」を使用し、cssとclassを組み合わせてユニットに吹き出しをつける方法の設定後サンプル

ユニットに吹き出しをつける

  1. まずはCSS/JS設定画面にスタイルを追加します。
    ページ編集画面右上の「CSS/JS」をクリックします。
  1. 次に、CSS・JS設定画面の「styleタグを追加」をクリックします。
    style開始タグと閉じタグが自動的に追加されました。
  2. style開始タグと閉じタグの間にCSSを挿入します。
    ※ツノが右側についた吹き出しをつける場合 
    .arrowRight { position: relative; }
.arrowRight:after { content: ""; position: absolute; display: block; width: 0; height: 0; right:-15px; top: calc(50% - 8px); border-left: 15px solid #FFF; border-top: 15px solid transparent; border-bottom: 15px solid transparent; z-index: 3; }

    ※ツノが左側についた吹き出しをつける場合 
    .arrowLeft { position: relative; }
.arrowLeft:after { content: ""; position: absolute; display: block; width: 0; height: 0; left: -15px; top: calc(50% - 8px); border-right: 15px solid #FFF; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }

bingo!CMS1.7.2より、CSS・JS設定画面がPC・タブレット用とスマートフォン用で分けて入力できるようになりました。
スマートフォン表示でも吹き出しを使用する場合は、PC・タブレット用の入力欄にCSSを入力した後で「スマートフォンにコピー」をクリックすると、スマートフォン用の入力欄にも同じCSSが反映されます。

  1. 続いて、吹き出しをつけたいユニットを開きます。
  2. ユニット編集画面上のclassに
    ツノが右側についた吹き出しの場合：「arrowRight」と入力します。
    ツノが左側についた吹き出しの場合：「arrowLeft」と入力します。
  3. 表示画面はプレビューで確認してください。
    ※編集画面上には表示されません。

吹き出しのサイズを変更する

吹き出しのサンプルのサイズは15pxです。
サイズを変更したい場合はCSS・JS設定画面の「15px」部分を任意のサイズに変更してください。（画像赤枠部分）

その他のTips

  • 動画の設定まとめ

    2018年10月10日

    動画の設定まとめ

    動画の設定方法をまとめました。 目的別に、カスタムユニットやグリッドユニット、コンテナなどを使った設定方法をご紹介します。

  • 変化するグラデーションを作る方法：HTMLユニット編

    2018年06月27日

    変化するグラデーションを作る方法：HTMLユニット編

    ページにHTMLニットを配置し、HTMLやCSS、JSを自由に記述することができます。 このtipsではHTMLユニットを使用し、色が変化するグラデーションを付ける方法をご紹介します。

  • 変化するグラデーションを作る方法：コンテナ編

    2018年06月27日

    変化するグラデーションを作る方法：コンテナ編

    ページごとにCSSやJSの設定ができます。 このtipsではCSSを記述し、コンテナの背景に色が変化するグラデーションを付ける方法をご紹介します。

  • アニメーションの設定まとめ

    2017年10月23日

    アニメーションの設定まとめ

    このtipsでは、アニメーションを設定する方法をご紹介します。ご利用のバージョンによって設定方法が異なりますのでご注意ください。

ページトップ