テモトサイトME

microCMS 操作ガイド

このガイドでは、microCMSを使ったサイトコンテンツの更新方法を説明します。

1. ログイン

  1. https://microcms.io/ にアクセス
  2. 右上の「ログイン」をクリック
  3. 納品時にお渡ししたメールアドレスとパスワードでログイン
  4. サービス一覧から該当のサービスを選択

2. 管理画面の概要

ログイン後、左側のメニューに以下の項目が表示されます。

メニュー 説明
設定（settings） サイト全体の共通設定（サイト名、ロゴ、SNSなど）
ページ（pages） LPページの管理
ブログ（blogs） ブログ記事の管理
ギャラリー（gallery） ギャラリー画像の管理（オプション）

3. サイト設定の変更

サイト全体に関わる設定を変更します。

3.1 設定画面を開く

  1. 左メニューから「設定」をクリック
  2. 編集画面が表示されます

3.2 基本設定

項目 説明
サイト名 ブラウザのタブやヘッダーに表示される名前
ロゴ ヘッダー・フッターに表示されるロゴ画像
コピーライト フッター最下部に表示される著作権表記

3.3 ヘッダーナビゲーション

ヘッダー右側に表示されるナビゲーションメニューを設定します。

追加できる項目:

種類 説明
テキストリンク 「サービス」「料金」などのテキストリンク
SNSアイコン SNSリンクのアイコン表示

テキストリンクの設定:

  • ラベル: 表示するテキスト（例: お問い合わせ）
  • リンク先: クリック時の遷移先URL（例: /contact）

SNSアイコンの設定:

  • プラットフォーム: X、Instagram、YouTubeなどから選択
  • ※URLは「SNSリンク」で設定したものが使用されます

3.4 フッター設定

フッターは最大3列で構成できます。各列に以下の要素を追加できます。

種類 説明
ロゴ サイトロゴを表示
見出し 「メニュー」「SNS」などのセクション見出し
テキストリンク ページへのリンク
SNS一覧 SNSアイコンをまとめて表示

設定例:

  • 列1: ロゴ + 説明文
  • 列2: 見出し「メニュー」+ 各ページへのリンク
  • 列3: 見出し「SNS」+ SNS一覧

💡 フッター列が全て未設定の場合、デフォルトでロゴとSNSアイコンが表示されます。

3.5 SNSリンク

サイト全体で使用するSNSアカウントを登録します。ヘッダー、フッター、SNSセクションで共通して使用されます。

対応プラットフォーム:
Bluesky / Discord / Facebook / GitHub / Instagram / LINE / LinkedIn / note / Pinterest / pixiv / Threads / TikTok / Twitch / X / YouTube / その他

設定項目:

項目 説明
プラットフォーム SNSの種類を選択
URL アカウントページのURL
ラベル 表示名（省略可）
アイコン カスタムアイコン画像（省略可）

3.6 機能設定

項目 説明
ブログを使用する ONにするとブログ機能が有効になります
ブログURL ブログのURLパス（デフォルト: blog）例: news に変更すると /news/ でアクセス
ブログ名 ブログの表示名（デフォルト: ブログ）
ブログサイドバー位置 ブログページのサイドバー位置（left / right / bottom）。bottom選択時はタイル表示が3列
ブログ表示モード ブログ一覧の表示形式（list / tile）
ページあたり件数 ブログ一覧の1ページあたりの記事数（デフォルト: 10）
ギャラリーを使用する ONにするとギャラリー機能が有効になります
ギャラリーURL ギャラリーのURLパス（デフォルト: gallery）例: works に変更すると /works/ でアクセス
ギャラリー名 ギャラリーの表示名（デフォルト: ギャラリー）
ギャラリーサイズ ギャラリーの表示サイズ（small / medium / large）
ギャラリーアスペクト比 画像のアスペクト比（1:1 / 4:3 / 16:9 / 3:4 / 9:16）
ギャラリー並べ替え 画像の並べ替え順（newest / oldest / custom）
お問い合わせを使用する ONにするとお問い合わせページが有効になります
お問い合わせURL お問い合わせのURLパス（デフォルト: contact）例: inquiry に変更すると /inquiry/ でアクセス
お問い合わせ名 お問い合わせの表示名（デフォルト: お問い合わせ）
問い合わせ先メール フォーム送信時の通知先メールアドレス
問い合わせ説明文 問い合わせページに表示する説明文

💡 「お問い合わせを使用する」がOFFの場合、問い合わせページは生成されません。
💡 「ブログ表示モード」を tile にすると、ブログ一覧がカード形式で表示されます。
💡 「ギャラリーを使用する」をONにするには、gallery APIの設定も必要です。

3.7 デザイン設定

項目 説明
デザインテーマ サイト全体の雰囲気を選択
カスタムCSS 色やフォントを細かくカスタマイズ

デザインテーマの選択肢:

テーマ 特徴 向いているサイト
default 標準的なデザイン 汎用
dark defaultのダークモード版 IT系、ゲーム、クリエイター
corporate ビジネス向けデザイン 企業、クリニック、士業
modern ダークでミニマルなデザイン ポートフォリオ、デザイナー
elegant 上品で落ち着いたデザイン サロン、ブライダル、高級店
natural やさしいデザイン オーガニック、整体、ヨガ
cozy 暖色・カフェ風デザイン カフェ、ベーカリー、雑貨店
japanese 和風・伝統的なデザイン 和食店、旅館、伝統工芸
playful ポップなデザイン 同人、イラストレーター、キッズ
cyber ネオン・サイバーパンク風デザイン VTuber、ゲーム、テック系

💡 カスタムCSSの詳細は カスタムCSSガイド を参照してください。

3.8 変更を保存

  1. 内容を編集
  2. 右上の「公開」ボタンをクリック
  3. 2〜3分後にサイトに反映されます

4. ページの編集

トップページやその他のLPページを編集します。

4.1 ページ一覧を開く

  1. 左メニューから「ページ」をクリック
  2. ページ一覧が表示されます
  3. 編集したいページをクリック

4.2 セクションの編集

ページは複数の「セクション」で構成されています。

セクションの種類:

セクション 用途
ヒーロー ページ上部のメインビジュアル
特徴 サービスや特徴をカード形式で表示
リッチテキスト 自由な文章と画像
ギャラリー 画像一覧（クリックで拡大表示）
CTA お問い合わせなどへの誘導ボタン
FAQ よくある質問（アコーディオン形式）
料金表 料金プランの比較表
SNS SNSリンクのアイコン表示
ブログ一覧 最新のブログ記事を表示

4.3 セクションの追加

  1. 「セクション」フィールドの「+」ボタンをクリック
  2. 追加したいセクションの種類を選択
  3. 必要な項目を入力

4.4 セクションの並べ替え

  1. セクションの左端にあるハンドル（≡）をドラッグ
  2. 好きな位置にドロップ

4.5 セクションの削除

  1. 削除したいセクションの右端にある「×」をクリック
  2. 確認ダイアログで「削除」を選択

5. ブログ記事の管理

5.1 記事一覧を開く

  1. 左メニューから「ブログ」をクリック
  2. 記事一覧が表示されます

5.2 新しい記事を作成

  1. 右上の「追加」ボタンをクリック
  2. 以下の項目を入力:
項目 説明 必須
スラッグ URLの末尾部分（例: my-first-post） ✓
タイトル 記事のタイトル ✓
説明文 記事の概要（一覧やSNSシェア時に表示）
サムネイル 記事一覧に表示される画像
本文 記事の内容（リッチエディタ）
本文（Markdown） 記事の内容（Markdown形式）
カテゴリ 記事の分類
タグ 記事のタグ（カンマ区切り）

💡 本文はリッチエディタまたはMarkdownのどちらか一方を使用します。設定時に選択した形式をお使いください。

5.3 記事の編集

  1. 記事一覧から編集したい記事をクリック
  2. 内容を編集
  3. 「公開」ボタンをクリック

5.4 記事の下書き保存

公開せずに保存したい場合:

  1. 「下書き保存」ボタンをクリック
  2. 記事は「下書き」状態になり、サイトには表示されません

5.5 記事の非公開

  1. 公開中の記事を開く
  2. 「非公開」ボタンをクリック
  3. サイトから記事が非表示になります

6. ギャラリーの管理

💡 ギャラリー機能はオプションです。設定で「ギャラリーを使用する」がONの場合に使用できます。

6.1 ギャラリー一覧を開く

  1. 左メニューから「ギャラリー」をクリック
  2. ギャラリー一覧が表示されます

6.2 新しい画像を追加

  1. 右上の「追加」ボタンをクリック
  2. 以下の項目を入力:
項目 説明 必須
画像 ギャラリーに表示する画像 ✓
タイトル 画像のタイトル（largeサイズでカードに表示）
説明文 画像の説明（モーダル内に表示）
ボタンURL モーダル内にボタンを表示する場合のリンク先
ボタンテキスト ボタンの表示テキスト
カテゴリ 画像の分類（カテゴリ別ページで使用）
並び順 カスタム順の場合の表示順（小さい数字が先）

6.3 ギャラリーサイズについて

設定でギャラリーのサイズを変更できます。

サイズ 特徴
small 密なグリッド、PCはフレームあり、タブレット・スマホはInstagram風
medium PC・タブレットはフレーム・キャプションあり、スマホはInstagram風
large ゆったり表示、フレーム・キャプションあり

6.4 並べ替えについて

設定でギャラリーの並べ替え順を変更できます。

並べ替え 特徴
newest 新しい順（登録日時の降順）
oldest 古い順（登録日時の昇順）
custom 各画像の「並び順」フィールドの数値順

💡 custom を選択した場合は、各ギャラリーアイテムの「並び順」に数値を設定してください。小さい数字が先に表示されます。

6.5 ページセクションとの違い

  • ギャラリーAPI: /gallery ページで表示。カテゴリ分類やページネーション対応
  • ページセクションのギャラリー: LPページ内に埋め込み。件数制限や「もっと見る」リンク対応

7. 画像のアップロード

6.1 画像フィールドへのアップロード

  1. 画像フィールドの「画像を選択」をクリック
  2. 「アップロード」タブを選択
  3. ファイルをドラッグ＆ドロップ、または「ファイルを選択」
  4. アップロード完了後、画像をクリックして選択

6.2 推奨画像サイズ

用途 推奨サイズ 備考
ロゴ 高さ40〜60px程度 横長推奨、PNG/SVG
ヒーロー画像 1920×1080px程度 大きめ推奨
サムネイル 800×600px程度 16:9または4:3
ギャラリー 800×800px程度 正方形推奨

6.3 対応ファイル形式

  • JPG / JPEG
  • PNG
  • GIF
  • SVG
  • WebP

8. リッチエディタの使い方

本文などのリッチエディタでは、以下の装飾が使えます。

7.1 テキスト装飾

ボタン 機能
B 太字
I 斜体
U 下線
S 取り消し線

7.2 見出し

  • 「段落」ドロップダウンから見出しレベル（H2〜H4）を選択

7.3 リスト

  • 箇条書きリスト（・）
  • 番号付きリスト（1. 2. 3.）

7.4 リンク

  1. テキストを選択
  2. リンクボタン（🔗）をクリック
  3. URLを入力

7.5 画像の挿入

  1. 画像ボタンをクリック
  2. 画像をアップロードまたは選択

9. Markdownの書き方

Markdown形式で記事を書く場合の記法です。

8.1 基本の記法

記法 表示
**太字** 太字
*イタリック* イタリック
~~取り消し線~~ 取り消し線
==ハイライト== ハイライト表示
`コード` インラインコード

8.2 見出し

# 見出し1
## 見出し2
### 見出し3

8.3 リスト

- 箇条書き1
- 箇条書き2
  - ネスト

1. 番号付き1
2. 番号付き2

8.4 リンクと画像

[リンクテキスト](https://example.com)
![画像の説明](画像URL)

8.5 引用

> これは引用文です。
> 複数行も可能です。

8.6 コードブロック

```javascript
const message = "Hello";
console.log(message);
```

8.7 改行

Markdown内で改行すると、そのまま改行として反映されます。

10. 更新の反映について

9.1 反映までの流れ

  1. microCMSで「公開」ボタンをクリック
  2. 自動的にサイトの再構築が開始
  3. 2〜3分後にサイトに反映

9.2 反映されない場合

  • ブラウザのキャッシュをクリア（Ctrl+Shift+R または Cmd+Shift+R）
  • 5分以上経っても反映されない場合はお問い合わせください

11. よくある質問

Q. 間違えて公開してしまった

A. すぐに修正して再度「公開」してください。2〜3分後に修正版が反映されます。

Q. 記事を削除したい

A. 記事を開き、右上の「...」メニューから「削除」を選択してください。

Q. 画像がアップロードできない

A. 以下を確認してください:

  • ファイルサイズが大きすぎないか（推奨: 5MB以下）
  • 対応形式か（JPG, PNG, GIF, SVG, WebP）

Q. プレビューで確認したい

A. microCMSの画面プレビュー機能を使って、実際のサイトデザインで下書き記事を確認できます。
設定方法は「12. 画面プレビュー機能」を参照してください。

Q. 過去の状態に戻したい

A. 編集画面の「変更履歴」から過去のバージョンを確認・復元できます。

12. 画面プレビュー機能

下書き状態の記事やページを、実際のサイトデザインで確認できます。

11.1 プレビューの使い方

  1. microCMSで記事・ページを編集
  2. 「下書き保存」をクリック
  3. 画面上部の「画面プレビュー」ボタンをクリック
  4. 新しいタブでプレビューが表示されます

💡 プレビュー画面には「プレビューモード」のバナーが表示され、下書き状態であることが分かります。

11.2 注意事項

  • プレビューは編集者のみがアクセスでき、一般公開はされません
  • 公開後は通常のURL（/blog/スラッグ や /ページスラッグ）でアクセスできます

13. お問い合わせ

操作方法でご不明な点がありましたら、お気軽にお問い合わせください。

記事一覧に戻る