顧客との信頼関係強化やファン化が期待できるため、企業にとって大きなメリットがあるブログですが「構築するのが難しそう」というイメージを抱いている方も多いはずです。
しかしSTUDIOではCMS機能があるため、Webサイト制作の知識がなくてもドラッグ＆ドロップで簡単にブログ運営を始めることができます。
そこで本記事では、STUDIOにおけるブログの構築手順を画像付きで丁寧に解説します。
CMS機能を使った、ブログページ作成の8STEP
ブログ記事を作成して公開する前に、ブログページ（ブログの土台）を作成する必要があります。
そこで本章ではSTUDIOのCMS機能を使ったブログページ作成手順を画像付きで解説します。なおすでにブログページが完成している場合は、別記事の「STUDIOのCMS機能における記事作成・公開手順」をご確認ください。
STEP1.STUDIOのアカウントを登録する
STUIDOでブログを作成するためには、まずアカウントを登録する必要があります。アカウント登録の手順は以下の通りです。
1.STUDIOのアカウント登録ページにアクセスする
2.遷移先のページで「Googleアカウント」「Facebookアカウント」「メールアドレス」の3つから好みの登録方法を選び、必要情報を入力する
3.以下の画像のようにプロジェクト一覧ページに遷移すれば、登録完了
STEP2.ブログページの土台を作成する
1.「新しいプロジェクト」をクリックする
2.好みのデザインテンプレートを選択し、「このテンプレートではじめる」をクリックする。（今回は左から2番目のテンプレートを選択）その後、遷移先のページで好みのプロジェクト名を決める。
一からブログページのデザインを作成したい場合は、画面左側の「空白からはじめる」を選択してください。
STEP3.パーツを追加する
1.画像や文字を新たに追加する場合は、以下画像の赤枠（画面左側）の「＞」マークをクリックする
2.その後上タブの「＋追加」を選択した後、左カラムから追加したいパーツをクリックする
3.追加したいパーツを画面中央ブログページ上の好みの場所に、ドラッグ＆ドロップで配置する
STEP4.各パーツを編集する
画面中央のブログページをクリックすると、以下画像の赤枠のように上タブにスタイルバーが表示されます。このスタイルバーでは、文字フォントの変更や配置の変更などができます。
STEP5.タブレット・モバイル版のブログページデザインを確認する
以下画像の赤枠（画面中央のブログページの外側）をクリックすると、上記のタブにレスポンシブバーが表示されます。レスポンシブバーとは、タブレットやスマートフォンでブログページを閲覧した際のデザインが表示できるツールです。
レスポンシブバーに「基準」「タブレット」「モバイル」の項目があるため、確認したいデバイスを選択しましょう（「基準」はPCサイズ）。
STEP6.他のページを追加・編集する
1.以下画像の赤枠（画面左下）のページマークをクリックする
2.上タブの追加マークをクリックし遷移先のページにて、通常ページやパスワードページなど好みのページを選択する
なおテンプレートページを追加したい場合は、以下画像の赤枠（上タブの下にあるメニュー）をクリックします。
STEP7.実際のデザインをサイト上で確認する
1.画面右上の「ライブプレビュー」を選択する
2.遷移先のページで「スタート」をクリックする
3.遷移先のページに表示されたURLをクリックすると、別タブでデザインが表示される
STEP8.完成したブログページを公開する
1.以下画像の赤枠（画面右上）の「公開」をクリックする
2.好みのURL名を入力し「保存」を選択した後「公開」をクリックする
CMS機能を使った、記事作成・公開までの手順
前章ではブログページ（ブログの土台）の作成方法を紹介しましたが、記事を作成して公開しなければ、ブログとしての役割を果たしません。
そこで本章ではSTUDIOのCMS機能における、記事作成・公開手順を画像付きで丁寧に解説します。
STEP1.記事の土台を作成する
1.以下画像の赤枠（ブログページの編集画面左上のプロジェクト名）にカーソルを合わせる
2.カーソルを合わた後、表示されるメニューから「CMS」を選択する
3.遷移先ページで画面左上のモデルから投稿したい記事の種類を選んだ上で、右上にある「＋新規追加」をクリックする
STEP2.記事を作成する
1.画像や見出しなどを追加する
記事の編集画面に表示されている「＋」をクリックした後現れるメニューで、追加したいパーツを選択します。このメニューでは見出しや画像、区切り線などを追加できます。
なお記事にはタイトル、見出し、本文の3つの文型があります。
タイトルは記事全体におけるタイトルで、本記事でいえば『STUDIOの｢CMS｣の始め方。CMS機能を使ったブログページ作成手順を画像付きで紹介』を指します。STUDIOのデザインエディタ上では以下画像の赤枠部分がタイトルです。
対して見出しは章やトピックごとのタイトルのことを指します。本章においては「STUDIOのCMS機能における記事作成・公開手順」や「記事を作成する」の部分を指します。見出しは上述したように記事の編集画面に表示されている「＋」をクリックした後、表示されるメニューから設定できます。
本文はその名の通り記事内の本文のことを指し、この文章も本文と呼ばれる部分です。見出しにマウスを合わせて、エンターキーを押すと後段落から本文を記入できます。
2.実際の記事デザインを確認する
画面右上の「ライブプレビュー」を選択すると、ユーザーに表示される状態での記事デザインを把握できます。
3.プロパティを編集する
プロパティとは記事作成者やタグ（記事を分類する付箋のようなもの）などを編集できるボックスのことを指します。以下画像の赤枠（記事編集画面の右側）に設置されています。
なおプロパティでは主に4つの情報を編集できます。それぞれのアイテムに関する説明は以下の通りです。
| Slug | 記事URL |
|---|---|
| Cover | 通常記事上部に表示される画像 |
| Author | 記事作成者 |
| Tags | 記事を分類する付箋のようなもの |
STEP3.記事を公開する
記事を公開したい場合は、画面右上の「下書き」を選択した後、表示されるタブで「公開する」に設定します。
なお予約公開をしたい場合は画面右上の「公開日時」を任意の日時に設定した後に「下書き」を「公開を予約する」に変更します。
まとめ
上述したようにSTUDIOではWebサイト制作の知識がなくても、気軽にブログページを作成できます。企業の情報発信が当たり前になっている昨今、WordPressなどのCMSを使ってブログ運営をスタートする企業も多いですが、より気軽に安価で始められるSTUDIOでのブログ運営もぜひご検討いただきたいです。
