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

コピペで使えるCSS集です。
こちらには小さめの変更などがすぐできるCSSを記述しております。
 

デモサイト

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

ページ全体

ページの背景色を設定

CSS

ヘッダー

ヘッダーを隠す

CSS

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

CSS
 

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

左 before 右 after
左 before 右 after
CSS
 

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

CSS
 

タイトルエリア

タイトルを非表示にする

CSS

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

CSS

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

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

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

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

見た目の変更

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

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

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

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

フォントをNotoSansJPに変更する

CSS
その後追加CSS URL指定に以下の値を追加します。
 

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

CSS
 

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

CSS
 

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

CSS

フッターエリア

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

CSS
 

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

HTML挿入(body)に以下を追加
Markup
CSSに以下を追加
CSS

SNSボタンをTOPページで隠す

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

データベース

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

CSS

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

CSS
 

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

CSS
 

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

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

表示件数を制限する

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

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

CSS

リストビューの場合

CSS

ページ個別で指定したい

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
 

検索フォーム

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

CSS
 

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

CSS
 

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