Wraptasで設定したCSSとつまずいたところのメモ書き

 
🐐
以下のスペックの人間が、2日間かけてwordpressからWraptasでサイトを移したときにつまずいたところの記録です。 ・コードは全く書けない ・元々Wordpressの有料テーマ(SWELL)でサイトを作っていた ・全くCSSはわからないが、コピペぐらいはできる ・もともとnotionは情報の記録用に使っていた ・固定ページ+blogの記事件数は50以下 引っ越した理由はこちら wordpressをnotion+wraptasへ

サイト構造はこんな感じ

notion内にwebサイトというページを作り、その直下にトップページを作りました。適当に固定ページの箱を入れていきます。下書き用DBで書いて、ドラッグで本番のDBに移せるようにしました
 

wraptasで設定したCSS

CSSわからないおじさんとしては、wraptasのサイトを見たり、友人に聞いたり、ググったりしつつ、開発ツールをにらめっこして設定してきます。
  • フォントを変更
  • トップページのタイトルを消す
  • トップページの読み物の表示件数を4に制限
  • トップページのブログの表示件数を6に制限
  • 各固定ページのアイコンを消す
  • ヘッダーとコンテンツの幅を揃える
  • 見出し2の装飾
  • ページ背景色
  • トップページのDBとリストのアイコンを消す(@hada_tomohiro から教えてもらいました!)
 
 

headタグ(フォントとgoogle analytics)

フォントを読み込まないといけないので、忘れずにこちらも

エラーページHTML

エラーページだとデフォルトだと猫ちゃんが出てくるので、簡単ですが自社用にします。
wraptasのサイトデータ編集>エラーページHTML、から、27年ぶりぐらいに手打ちして作りました。

特定の記事やブロックだけ制御したい!

ブラウザのデベロッパーツール(F12を押すと出てくる)で、要素またはElementタブのトグルを開きながら潜っていくとIDが分かるので、CSSで設定できます。

ブログにタグを表示したい!

notion側で設定します。ビューのオプション>プロパティ>1の表示をクリックすると、表示する項目が選択できます。