コピペで使えるサンプルCSS集
コピペで使えるCSS集です。
こちらには小さめの変更などがすぐできるCSSを記述しております。
デモサイト
CSSの大幅な変更でレイアウトなどを大きく変えたい場合のデモ及びサンプルはこちらのサイトにまとめています。
デモサイトページ全体ページの背景色を設定ヘッダーヘッダーを隠すヘッダーをスクロールに追従させない検索窓の文字を大きくする検索窓の表示エリアを大きくするタイトルエリアタイトルを非表示にするカバー画像をPC/スマホ両方で見切れないようにするカバー画像を非表示にするタイトル、日付、アイコンを隠す見た目の変更見出しのフォントサイズの調整コンテンツを画面幅いっぱいに表示フォントをNotoSansJPに変更するリンクをボタン形式に変更ブックマークの画像をスマホでも表示シンプルテーブルをスマホでも常に横いっぱいに表示画像のキャプションを非表示にするフッターエリアフッターに背景色を追加し、横幅ぴったりにするページトップに戻る ボタンをつけるSNSボタンをTOPページで非表示データベースギャラリーのタイトルを１行で切れないように設定データベースのプロパティを非表示にするモバイルでGallery Viewを2列で表示ボードビューで、カテゴリ名を固定表示表示件数を制限するギャラリービュー・ボードビューの場合リストビューの場合テーブルビューの場合ページ個別で指定したいページID、またはコレクションIDを指定する方法html挿入機能で、そのページにのみ挿入する方法検索フォーム検索フォームをトップページにのみ追加する検索フォームを特定ページ（パーマリンク”help”の場合）にのみ追加する
ページ個別で指定したい
CSS挿入に挿入すると、全ページへCSSが挿入されてしますので、個別のページごとにCSSを当てたい場合の方法です。2パターンあります。
※データベースのプロパティを非表示にする のCSSをサンプルとして利用します。
ページID、またはコレクションIDを指定する方法
各ページのページ全体を囲む要素にページごとのIDを指定したclassが入っています。
example.com/abcdefg12345 ページの場合 page_id-abcdefg12345 というclassとなり、その場合CSS
という形にすればそのページ指定ができます。
html挿入機能で、そのページにのみ挿入する方法
コードブロックを使ったhtml挿入を使い、そのページに個別でcssを挿入できます。
その際、notion上のcodeブロックの言語はhtmlにしつつ、styleで囲みます。
Markup