Wraptasをカスタマイズする追加CSS集

当ページでは、NotionのコンテンツをレンダリングしてWebサイトを作れるサービス「Wraptas」でWebサイトを作成している方に向けて、私が適用しているCSSのカスタマイズコードを紹介しています。
こちらのWraptas公式のサンプルCSSには載っていない内容のみを記載しています。
WraptasでWebサイトを作ってみたい方は「Notionのページを独自ドメインで公開する方法」をご参照ください!
 

背景色グレーのブロックは非表示にする

テーブル(表)を横幅からはみ出さないようにする

テーブル内の文字を折り返して表示できるようになります。
 

トグルの装飾

通常のトグル
このようにクリックできるか分かりにくいですよね…!
以下のCSSを適用したトグル
このようにクリックで詳細が見れることが伝わりやすくなります!
 
 

ギャラリービューの画像のアスペクト比を指定する

(指定したアスペクト比と若干異なるため、正確な指定方法が分かれば編集します)
 
タイトルなどを非表示とし、画像だけを表示する場合
 

ヘッダをダーク系の配色にする

ヘッダの背景色を黒色、文字の色を白色にする例。
 

画面下部のパンくずリストを装飾する

背景色を黄色、文字の色を緑にする例。
 

引用(quote)ブロックを吹き出し風に装飾する

このように吹き出し風の見た目に変更するソースコードです。
 

目次の見た目のカスタマイズする

以下のように目次をデコレーションするCSSです。