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

ページトップ