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

ユニットに吹き出しをつける方法を説明します。
ユニットはbingo!CMS1.7の「グリッドv17ユニット」を使用しています。

Before
After

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

※1 「bingo!CMS 1.7」をご利用の方のみ設定できます。
※2 スキンはV17のものをご使用ください。
  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; }
  1. 吹き出しをつけたいユニットを開きます。
  2. ユニット編集画面上のclassに
    右吹き出しをつけたい場合:「arrowRight」と入力します。
    左吹き出しをつけたい場合:「arrowLeft」と入力します。
  3. 表示画面はプレビューで確認してください。
    ※編集画面上には表示されません。

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

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

ページトップ