microCMSの記事投稿の仕方|初心者向けに徹底解説

投稿日

microCMSの記事投稿の仕方|初心者向けに徹底解説
投稿者:ブンタ ブンタ

microCMS(マイクロシーエムエス)はヘッドレスCMSと呼ばれるCMS(コンテンツマネージメントシステム)の一つで、お知らせやブログの記事を簡単に作成、管理できるサービスです。

microCMSとWebサイトをAPIという仕組みで連携することにより、管理しやすく、セキュリティの高いサイト運営ができるようになります。

今回はmicroCMSを全く知らない方向けに、microCMSでの記事の投稿や削除の仕方についての解説します。

  • PC版での解説ですが、スマホやタブレットでも同じように操作することができます。
  • Webサイトにおける最もシンプルな例です。
  • APIなどの設定はすでに終わっており、サイトへの反映もできるようになっているところからのスタートです。

ログイン〜記事一覧表示

まずはmicroCMSの公式サイトにアクセスします。

microCMS公式サイト(https://microcms.io/)

ページが開いたら、右上にあるログインボタンをクリックします。

microCMSトップ画面

ログイン画面で、メールアドレスとパスワードを入力してログインします。

microCMSログイン画面

ログインするとサービス一覧画面が表示されます。
今回は一つだけですが、複数ある場合は下にサービスが続きます。

microCMSサービス一覧画面

サービスをクリックすると、記事の一覧が表示されます。

microCMS記事一覧画面

今まで書いた記事が日付順に並んでいて、選択すると編集することができます。
記事が一つもない場合は何も表示されません。

新しい記事の作成〜公開

では、新しい記事を投稿してみましょう。

右上にある「追加」ボタンをクリックします。

microCMS記事の追加画面

記事の新規作成画面が開きます。

今回はタイトルと本文のみ入力できるシンプルな構成です。
本文は見出しをつけたり、リンクや画像を貼り付けたりすることもできます。

microCMS記事の新規作成画面

タイトルの上にあるコンテンツIDを変えると、ページのURLをお好みのURLに変更することができます。

そのままでも大丈夫ですが、SEO(検索順位)を考慮するなら、内容に沿ったURLにするのがおすすめです。 (例:microCMSについて→about-microcms)

  • 入力は半角英数字と一部の記号(-または_)のみ可能です。
  • 全く同じURLを設定することはできません。

右上にある公開ボタンを押せば、そのまま公開することができます。
その隣の下書き保存ボタンを押せば、公開せずに保存することができます。

microCMS公開直前画面

公開ボタンを押すと、以下のようなダイアログが出てきます。
OKをクリックすれば、記事を公開することができます。

記事の公開確認画面

この後、サーバー上でビルドという処理が走り、コンテンツが生成されるので、数分後にサイト上に記事が公開されます。

microCMSの記事公開中の画面

公開後は左上に公開中という表記が出ます。
その右には「公開終了にする」ボタンがあるので、公開を止めて下書きにしたい時はそちらを押してください。

公開するだけなら、ここで画面を閉じてもらって構いません。

記事の削除

では、記事の削除方法についても解説しておきます。

記事一覧ページに戻り、削除したい記事のチェックボックスにチェックを入れます。記事一覧ページ。削除したい記事にチェックが入っている

チェックボックスの一番上にある「1件を選択中」をクリックすると、「コンテンツを削除する」項目が表示されるので、そこをクリックします。

「一件を選択中」をクリックした画面。「コンテンツを削除する」項目が表示されている。

削除を確認するダイアログが出てくるので、「削除する」をクリックすれば削除は完了です。

削除確認画面。ポップアップが出ている。

記事一覧から削除した記事がなくなっているのが確認できます。

記事一覧ページから記事が削除されている

投稿した時と同じで、サイトに反映されるのは数分後です。
記事を編集したときなども、すぐには反映されませんのでお間違いなく。

まとめ

今回はヘッドレスCMSの一つであるmicroCMSの記事投稿や削除の仕方について解説しました。

microCMSは非常にわかりやすく、直感的に操作できるので、CMS導入の際には非常におすすめです。

CMSについてもっと詳しく知りたい方は、以下のリンク先の記事をご覧ください。

CMSとは?WordPressとヘッドレスCMSの違い【初心者向け】
https://clip77.com/blog/what-is-cms/

また、今回紹介させていただいたmicroCMSは、Jamstack(ジャムスタック)という新しいWebサイトの仕組みで広く利用されています。

以前にJamstackについての記事も書きましたので、よろしければこちらもご覧ください。

初心者向けJamstack完全ガイド|高速で安全なWebサイトを構築する方法
https://clip77.com/blog/what-is-jamstack/