コピペで使えるサンプルCSS集

コピペで使えるCSS集です。
こちらには小さめの変更などがすぐできるCSSを記述しております。
特定の要素(ブロック)にCSSを適用する際に指定するブロックIDの調べ方はこちらです。

デモサイト

CSSの大幅な変更でレイアウトなどを大きく変えたい場合のデモ及びサンプルはこちらのサイトにまとめています。
 
デモサイトページ全体ページの背景色を設定ヘッダーヘッダーを隠すヘッダーをスクロールに追従させない検索窓の文字を大きくする検索窓の表示エリアを大きくするヘッダーとコンテンツの横幅を揃えるタイトルエリアタイトルを非表示にするカバー画像をPC/スマホ両方で見切れないようにするカバー画像を非表示にするタイトル、日付、アイコンを隠す見た目の変更見出しのフォントサイズの調整コンテンツを画面幅いっぱいに表示フォントをNotoSansJPに変更するリンクをボタン形式に変更ブックマークの画像をスマホでも表示シンプルテーブルをスマホでも常に横いっぱいに表示画像のキャプションを非表示にするフッターエリアフッターに背景色を追加し、横幅ぴったりにするページトップに戻る ボタンをつけるSNSボタンをTOPページで非表示データベースギャラリーのタイトルを1行で切れないように設定データベースのプロパティを非表示にするデータベース右上の検索窓を非表示にするモバイルでGallery Viewを2列で表示ボードビューで、カテゴリ名を固定表示表示件数を制限するギャラリービュー・ボードビューの場合リストビューの場合テーブルビューの場合ページ個別で指定したいページID、またはコレクションIDを指定する方法html挿入機能で、そのページにのみ挿入する方法検索フォーム検索フォームをトップページにのみ追加する検索フォームを特定ページ(パーマリンク”help”の場合)にのみ追加する要素を特定するID(ブロックID)の調べ方
 

ページ全体

ページの背景色を設定

 

ヘッダー

ヘッダーを隠す

 

ヘッダーをスクロールに追従させない

 

検索窓の文字を大きくする

左 before 右 after
左 before 右 after
 

検索窓の表示エリアを大きくする

 

ヘッダーとコンテンツの横幅を揃える

 

タイトルエリア

タイトルを非表示にする

 

カバー画像をPC/スマホ両方で見切れないようにする

カバー画像を全表示にします。
 

カバー画像を非表示にする

ページアイコンがある場合とない場合で上部の隙間の調整が入っていますので、そのためのCSSを追加しています。
 

タイトル、日付、アイコンを隠す

タイトルエリアに加えて、アイコン用のスペースなども非表示にします。
 

見た目の変更

見出しのフォントサイズの調整

各見出しに応じて値を調整してください。
 

コンテンツを画面幅いっぱいに表示

Notion側でFull Widthのチェックをつけて対応できます。
日本語版では「左右の余白を縮小」になっております。
 

フォントをNotoSansJPに変更する

その後、管理画面【サイトデザイン編集】>【HTML直接追記(headタグ)】で以下のタグを追記します。

リンクをボタン形式に変更

こちらの機能をONにした状態で、利用方法に沿った状態でテキストを設定してください。
 

ブックマークの画像をスマホでも表示

 

シンプルテーブルをスマホでも常に横いっぱいに表示

 

画像のキャプションを非表示にする

 

フッターエリア

フッターに背景色を追加し、横幅ぴったりにする

 

ページトップに戻る ボタンをつける

HTML挿入(body)に以下を追加
※ head内に挿入するとサイトエラーになる場合がありますのでご注意ください。
CSSに以下を追加
 

SNSボタンをTOPページで非表示

SNSボタンは挿入すると全ページで挿入されますが、TOPページだけ非表示にしたい場合はこちらをご利用ください。
 

データベース

ギャラリーのタイトルを1行で切れないように設定

 

データベースのプロパティを非表示にする

 

データベース右上の検索窓を非表示にする

 

モバイルでGallery Viewを2列で表示

 

ボードビューで、カテゴリ名を固定表示

スクロールした際に、カテゴリ名が見切れてしまうのを防げます。
 

表示件数を制限する

2件のみ表示する例(3件以降を非表示)

ギャラリービュー・ボードビューの場合

 

リストビューの場合

 

テーブルビューの場合

 

ページ個別で指定したい

CSS挿入に挿入すると、全ページへCSSが挿入されてしますので、個別のページごとにCSSを当てたい場合の方法です。2パターンあります。
※データベースのプロパティを非表示にする のCSSをサンプルとして利用します。

ページID、またはコレクションIDを指定する方法

各ページのページ全体を囲む要素にページごとのIDを指定したclassが入っています。
ページの場合 というclassとなり、その場合
という形にすればそのページ指定ができます。

html挿入機能で、そのページにのみ挿入する方法

コードブロックを使ったhtml挿入を使い、そのページに個別でcssを挿入できます。
その際、notion上のcodeブロックの言語はhtmlにしつつ、styleで囲みます。
 

検索フォーム

検索フォームをトップページにのみ追加する

 

検索フォームを特定ページ(パーマリンク”help”の場合)にのみ追加する

 

要素を特定するID(ブロックID)の調べ方

PCで閲覧している状態で Command + Option + i (Windowsの場合には Windows + Option + i)でデベロッパーツールを表示します。(下記画面の右側の欄)
指定したい要素(ブロック)のhtmlに記述してあるid="block-***"がBlock IDになります。(下記の場合には)
 

これから追記予定のコンテンツ
  • ヘッダーのサイト名を中心揃え
  • ヘッダーの色を変える(文字色・ハンバーガーメニューの色)
  • コンテンツ幅を指定の幅に変える
  • 見出しに装飾をする
  • リンクの色を変える
  • スマホでもヘッダーメニューを畳まない
 
「Wraptasのサイトのここはどうやっているの?」など、ありましたら、お気軽にお問い合わせください!追記させていただきます。
こちらにある問い合わせ先へご連絡ください。