開発を始める前に最初にやるとよいこと

セットアップが終わり、microCMSと連携が終わったらいざ開発！

何からやればいいかわからないという方もいるかもしれません。
基本的には自由にHTMLを書いていけば良いです。笑

ただ、最初にやっておくことで後々の開発が楽になることはあります。
参考程度に見ていってもらえればと思います。

microCMSのサイト設定を確認する

microCMSで作成したサービスにアクセスしましょう。

左側のメニューバーの「コンテンツ（API）」に以下の3つが表示されていると思います。

• サイト設定
• コラム
• お知らせ

ここがサイト内で設定したり投稿するためのメニューです。

コラムやお知らせは後からでも大丈夫ですが、サイト設定に関してはサイト全体に関わる内容もあるので開発を始める際に設定しておくのが良いでしょう。

サイト設定

microCMSに初めてアクセスしたら、※マークがついている箇所の入力をしましょう。
入力がないままVSCodeでサイトを立ち上げるとコンソールでエラーが出ている状態になります。

サイト設定ではサイト全体に挿入するようなmeta情報やscriptなどを管理します。
例えばGoogle FontsのlinkタグやGoogle Analytics、Google Tag Managerなどです。

headで設定するtitleやdescription、OGP関連の設定はサイト設定の画面から行うことで、HTMLに直接コードを書く必要はありません。
※ただし、titleに関してはjQueryの仕様上、ページが表示されてからJSによる上書きが完了するまでに一瞬のラグがあるので、デフォルトでtitleタグにサイト名を書いておくか未入力にしておくと良いと思います。

ページの整理をする

KANTAN! CMS STARTER用のページ、「flow」や「about-functions」はフォルダごと削除してかまいません。
使用するページ、使用しないページを確認しながら整理しましょう。

後にヘッダー、フッターも整えてわかりにくくなる場合はtemplateページ以外消してしまっても良いかもしれません。
自分がわかりやすいようにやってみてください。

ヘッダーやフッターを整える

全ページ共通のパーツである、ヘッダーとフッターは早めに整えておくことをおすすめします。

/template/index.htmlだけを残してヘッダーとフッターを設定してからページを複製すると楽かもしれません。

themeファイルを編集する

サイト全体の色などを/assets/css/foundation/theme.cssに置いてきました。

カラーコードを変更するだけで、この変数に紐づく部分の色が変わります。
もしも組み合わせが気に入らないというのがあれば、あえてこの変数を使わず、各CSSファイルに直接カラーコードを指定しても良いです。

終わりに

ここまで完了すればあとは好きなようにコーディングしていってください。
別の記事でコラムやお知らせの差し込み方や新しいページの作り方などを紹介したいと思います。