Calloutを吹き出しのようにする
吹き出しのようなデザインのサンプル集です。
ここのCSSをそのまま使うと、サイト全体のcalloutに適用されるため、どこかのカテゴリ以下のページに適用などすると良いと思います。
例としてtopページ配下のblogページ配下のページにのみ適用する場合は以下のようなcssになります。
もしくは記事最後の例のように、特定のColor設定の場合にのみ適用する方法を利用ください。
運用上の注意
上記CSSをそのまま利用すると、すべてのCalloutに適用されてしまい、通常のCalloutの表示が吹き出しになってしまいます。
そこで、吹き出しCSS適用CalloutにはメニューでColor設定ができるので、これを利用したいと思います。
設定方法は以下のようにCalloutを選択して右クリックかメニューを表示して選択します。
BackgroundColorがBrawnのCalloutです。class名はとなります。brawnの部分に色名が入ります。標準ではGrayになっています。（※Greenのみclass名がtealになります）
先程の吹き出しCSSに、背景色がBrawnの場合にのみ適用するclassを追記します。
こちらを利用して「背景色がBrawnのCalloutは吹き出しになる」という運用で、通常のCalloutとも併用出来ると思います。
カラム表示テスト
Collum設定
Collum設定
スマホでも横整列したい場合のサンプル
個別のblockのidを指定して、横並びするように設定します。
横整列Collum設定
横整列Collum設定