cover image

Calloutを吹き出しっぽくするサンプル

吹き出しっぽいデザインのサンプル集です。
ここのCSSをそのまま使うと、サイト全体のcalloutに適用されるため、どこかのカテゴリ以下のページに適用などすると良いと思います。
 
例としてtopページ配下のblogページ配下のページにのみ適用する場合は以下のようなcssになります。
/* topページ配下のblogページ配下のページの場合 */ 
.page[class*="pageMap__top_blog_"] .notion-callout {}
CSS
もしくは記事最後の例のように、特定のColor設定の場合にのみ適用する方法を利用ください。

普通のCallout

これは普通のCalloutです〜

大きめCallout

これは大きめ画像のCalloutでございます
.notion-callout .notion-page-icon {
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}
CSS

吹き出しっぽい形

これは吹き出しっぽい感じですね〜
.notion-callout .notion-page-icon {
    position: absolute;
    top: -10px;
    left: -120px;
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}

.notion-callout {
    position: relative;
    margin-left: 120px;
    min-height: 100px;
    width: calc(100% - 120px) !important;
    border: none;
    border-radius: 10px;
    background-color: #e0edff;
}

.notion-callout:before {
    content: "";
    position: absolute;
    top: 50px;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #e0edff;
}
CSS

枠線付きの吹き出し

さらに枠線をつけてみました。長い文章をいれても崩れないかチェックするために長めの文章を入れてみます。長い文章をいれても崩れないかチェックするために長めの文章を入れてみます。
.notion-callout {
    position: relative;
    margin-left: 120px;
    min-height: 100px;
    width: calc(100% - 120px) !important;
    border: none;
    border-radius: 10px;
    background-color: #fff;
    border: solid 3px #555;
    box-sizing: border-box;
}
.notion-callout .notion-page-icon{
    position: absolute;
    top: -10px;
    left: -120px;
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}
.notion-callout:before {
    content: "";
    position: absolute;
    top: 50px;
    left: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #555;
}
.notion-callout:after {
    content: "";
    position: absolute;
    top: 50px;
    left: -27px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #FFF;
}
CSS
 

運用上の注意

上記CSSをそのまま利用すると、すべてのCalloutに適用されてしまい、通常のCalloutの表示が吹き出しになってしまいます。
そこで、吹き出しCSS適用CalloutにはメニューでColor設定ができるので、これを利用したいと思います。
設定方法は以下のようにCalloutを選択して右クリックかメニューを表示して選択します。
 
notion image
BackgroundColorがBrawnのCalloutです。class名はnotion-brown_background_coとなります。brawnの部分に色名が入ります。標準ではGrayになっています。(※Greenのみclass名がtealになります
 
先程の吹き出しCSSに、背景色がBrawnの場合にのみ適用するclassを追記します。
 
.notion-callout.notion-brown_background_co {
    position: relative;
    margin-left: 120px;
    min-height: 100px;
    width: calc(100% - 120px) !important;
    border: none;
    border-radius: 10px;
    background-color: #fff;
    border: solid 3px #555;
    box-sizing: border-box;
}
.notion-callout.notion-brown_background_co .notion-page-icon{
    position: absolute;
    top: -10px;
    left: -120px;
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}
.notion-callout.notion-brown_background_co:before {
    content: "";
    position: absolute;
    top: 50px;
    left: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #555;
}
.notion-callout.notion-brown_background_co:after {
    content: "";
    position: absolute;
    top: 50px;
    left: -27px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #FFF;
}
CSS
 
こちらを利用して「背景色がBrawnのCalloutは吹き出しになる」という運用で、通常のCalloutとも併用出来ると思います。
 

カラム表示テスト

Collum設定
Collum設定

スマホでも横整列したい場合のサンプル

個別のblockのidを指定して、横並びするように設定します。
横整列Collum設定
横整列Collum設定
#block-50f0ffc672c347ffb43ab81481f43de5 {
    flex-direction: row;
}
#block-50f0ffc672c347ffb43ab81481f43de5 .notion-column {
    width: 50% !important;
}
#block-50f0ffc672c347ffb43ab81481f43de5 .notion-spacer {
    display: none;
}
#block-50f0ffc672c347ffb43ab81481f43de5 .notion-callout {
    width: calc(100% - 80px) !important;
    margin-left: 80px;
}
#block-50f0ffc672c347ffb43ab81481f43de5 .notion-page-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    left: -70px;
}
#block-50f0ffc672c347ffb43ab81481f43de5 .notion-callout:before,
#block-50f0ffc672c347ffb43ab81481f43de5 .notion-callout:after{
    top: 20px;    
}
CSS