Wraptasをカスタマイズする追加CSS集
当ページでは、NotionのコンテンツをレンダリングしてWebサイトを作れるサービス「Wraptas」でWebサイトを作成している方に向けて、私が適用しているCSSのカスタマイズコードを紹介しています。
こちらのWraptas公式のサンプルCSSには載っていない内容のみを記載しています。
背景色グレーのブロックは非表示にするテーブル(表)を横幅からはみ出さないようにするトグルの装飾ギャラリービューの画像のアスペクト比を指定するヘッダをダーク系の配色にする画面下部のパンくずリストを装飾する引用(quote)ブロックを吹き出し風に装飾する目次の見た目のカスタマイズする
背景色グレーのブロックは非表示にする
テーブル(表)を横幅からはみ出さないようにする
テーブル内の文字を折り返して表示できるようになります。
トグルの装飾
通常のトグル
このようにクリックできるか分かりにくいですよね…!
以下のCSSを適用したトグル
このようにクリックで詳細が見れることが伝わりやすくなります!
ギャラリービューの画像のアスペクト比を指定する
(指定したアスペクト比と若干異なるため、正確な指定方法が分かれば編集します)
タイトルなどを非表示とし、画像だけを表示する場合
ヘッダをダーク系の配色にする
ヘッダの背景色を黒色、文字の色を白色にする例。
画面下部のパンくずリストを装飾する
背景色を黄色、文字の色を緑にする例。
引用(quote)ブロックを吹き出し風に装飾する
このように吹き出し風の見た目に変更するソースコードです。
目次の見た目のカスタマイズする
以下のように目次をデコレーションするCSSです。
背景色グレーのブロックは非表示にするテーブル(表)を横幅からはみ出さないようにするトグルの装飾ギャラリービューの画像のアスペクト比を指定するヘッダをダーク系の配色にする画面下部のパンくずリストを装飾する引用(quote)ブロックを吹き出し風に装飾する目次の見た目のカスタマイズする