microCMSテンプレートを使ってブログを作ってみた（microCMS+Bootstrap+Netlify）
本ページはプロモーションが含まれています
microCMSを使ってブログを作成してみましたので紹介します。もしmicroCMSでブログを作ってみたい方がいれば参考になれば幸いです。
作成したブログ
以下のブログです。microCMS+Bootstrap+Netlifyを使っています。コンテンツ管理がmicroCMS、デザインはBootstrap、ホスティングはNetlifyになっています。
どのように作ったのか？
テンプレートをダウンロードして、ローカル環境で開発をし、作成したソース類を一式Netlifyにフォルダごとアップするだけなので、難しいGitやコマンドなども使わずに作成することができました。あまりWeb制作には詳しくない自分にはありがたいテンプレートでした。
自分なりに工夫したポイント
基本的にはテンプレートの機能をそのまま使っていますが、自分ありに少し工夫したポイントがあるので紹介します。
Bootstrap対応
テンプレートに標準で実装されているcssをBootstrapに差し替えました。自分がBootstrapが好きなのと、デザインセンスがなくてもそれなりに形になること、カスタマイズが容易なことが理由です。おまけにBootstrap iconsも使えるようにしておきました。
1カラムにしてシンプルなブログを目指したつもりです。スマホで一番みやすくなるようにしているのでPCだと画像が大きかったりして、ちょっとみづらいかもしれませんね。
リッチリザルト対応
JSON-LD形式でリッチリザルトに対応させました。microCMSのAPIから取得できる情報で対応できたのでそれほど苦労せず実装できました
フリーhtmlパーツ実装
参考にしたのはこの記事。
この記事の通りに実装すればフリーhtmlエリアが使えるようになるので、以下のようなブログパーツも実装できました。このデザインもBootstrapで作りました。
せっかくなら収益化を狙えれば、という淡い期待で広告を載せようと思ったのですが、microCMSのリッチテキストエディタでは直接htmlを編集することができなかったので、htmlを直接編集できる機能を追加する必要がありました。
TOPの画像をwebp対応
参考にしたのはこの記事。imgixというものに対応しているそうです。
このブログはBloggerで運営しているのですが、Bloggerにも画像リンクの末尾にパラメータを付けるとwebpに変換してくれる機能があります。基本的にはそれと同じものでして、画像リンクの末尾にパラメータをつけてwebpに画像を切り替えるようにしてみました。
microCMSの良いところ
日本発のCMSのため、各種ドキュメントが日本語で用意されていることが大きいです。また無料で利用させてもらえることもありがたいです。今回hobbyプランで利用をしているのですが、それほどアクセスのないサイトであれば十分利用できるくらいの無料枠がありました。Webサイト側を自由に作ることができるので、凝ったサイトを作りたい方にも良いと思いました。
まとめ
microCMSテンプレートを利用すると非常に簡単にブログを作ることができました。micro CMSは無料である程度楽しむことができるので興味がある方はまず試してみると良いと思いました。自分は勉強がてら作成してみましたが、良い経験になりました。新しく作成したブログも少しずつ育てていこうと思います。
