Xサーバー×Cocoonでブログを整える|記事を書く前に作った4つのページ

Xサーバー×Cocoonでブログを整える|記事を書く前に作った4つのページのアイキャッチ。えむえむのアイコンキャラクターと白黒の見出し。 道具・サービス

この記事にはアフィリエイト広告が含まれます。

ブログを始めたいけれど、WordPressの管理画面を開くと設定項目が多くて、どこから触ればいいのか迷う。

私のブログも、最初はトップページに「投稿が見つかりませんでした」と出る状態でした。そこで記事を増やす前に、ブログの枠から整えることにしました。

今回用意したのは、ホーム、プロフィール、お問い合わせ、プライバシーポリシーの4ページです。Xサーバー上のWordPressで、テーマはCocoon Childを使っています。

この記事では、設定の支援を受けながら「えむえむ|好きに生きる」を整えた順番と、それぞれのページに持たせた役割を紹介します。サーバー契約からの全操作を説明する記事ではなく、WordPressを開ける状態から、記事を載せる場所を作るまでの記録です。

記事を書く前に、ブログで伝えることを決めた

タイトルは「えむえむ|好きに生きる」。好きなことを仕事につなげるための挑戦や、実際にやったことを残す場所にしました。

ブログで扱うテーマは、次の3つです。

  • YouTube運営:動画づくりや運営で試したこと。
  • 仕事・実践:仕事につなげるための挑戦と、その過程。
  • 道具・サービス:実際に使ったものの使い方や感想。

YouTube、note、ブログを全部同じ内容で埋める必要はないと考えています。動画で話したことをnoteで読みやすく整理し、ブログでは手順や道具を調べたい人に届く形にする。そのために、まず発信先を行き来できる入口を作りました。

これから枠を作るなら、最初に「誰に、何を残すブログか」を一文で書いてみると、トップページに必要な要素を選びやすくなります。

今回使った環境はXサーバー・WordPress・Cocoon Child

サーバーは、実際に利用しているXサーバーです。WordPressのテーマはCocoon Childで、スキンは「メイド・イン・ヘブン」を使っています。

Cocoonは無料のWordPressテーマです。テーマの機能や配布情報はCocoon公式サイトで確認できます。

ただし、テーマが無料でも、ブログの運営全体が無料になるわけではありません。サーバーなどの契約費用は別です。私の契約プランや支払額はここでは掲載せず、申し込みを考える方には現時点の公式料金を確認してもらう形にしています。

Xサーバーを選ぶか迷っているなら、月額の数字だけでなく、契約期間、更新時の費用、ドメインの条件、自分が必要な機能を確認してから判断してください。

記事を載せる前に作った、4つの入口
  1. 01ホーム何を発信しているブログか伝える
  2. 02プロフィール誰が、どんな経験を発信するか伝える
  3. 03お問い合わせ相談や連絡を受け取る
  4. 04プライバシーポリシー情報の扱いを確認できるようにする

今回の制作・設定記録をもとに、確認するポイントを整理しました。

最初に用意した4ページと役割

1. ホーム:記事がなくても、何のブログか分かる入口

ホームには、大きな見出しと短い説明、アイコン、チャンネルバナーを置きました。

見出しは「好きに生きる。まず、やってみる。」です。長い自己紹介を最初に読んでもらうより、まずブログの雰囲気と扱う内容が伝わる構成にしました。

その下には3つのテーマのカードと、YouTube・noteへのリンクを配置しています。記事がまだない場所は「記事準備中」と表示しています。

ここで大切にしたのは、見た目を埋めるために未公開の記事へのリンクを作らないこと。読者が押した先で迷うより、現在読めるものと準備中のものを分かるようにしました。

2. プロフィール:誰が発信しているかを伝える

プロフィールは、運営者と発信内容を知ってもらうページです。トップページの短い説明だけでは足りない部分を、このページで補います。

実績を大きく見せるために、確認していない収益や経歴を並べることはしません。どんなことに取り組み、何を発信していくのかを先に載せました。

ブログを初めて見る人にも、動画から来た人にも、発信の背景を確認できる場所として使います。

3. お問い合わせ:フォームを置いて、送信まで確認する

お問い合わせにはContact Form 7を使い、名前、メールアドレス、件名、メッセージを入力するフォームを設置しました。

フォームを作って終わりにせず、テストを1通送信し、サイト側に送信成功の表示が出るところまで確認しました。

ただし、送信成功の表示と、受信トレイに届いたことの確認は別です。今回の記録では、受信確認まで完了したとは扱っていません。

自分のブログでも、公開前に一度送信し、指定した受信先と迷惑メールフォルダの両方を確認しておくと、問い合わせを見落とす原因を減らせます。

4. プライバシーポリシー:今の運用に合わせる

お問い合わせを受け付けるため、個人情報の扱いを確認できるプライバシーポリシーも用意しました。

別のブログの文章をそのまま使うと、導入していないサービスについて書いてしまうことがあります。自分のサイトで何を使い、どんな情報を受け取るのかに合わせて整える必要があります。

今後アクセス解析や広告サービスを追加したら、実際の設定に合わせて見直していきます。

白黒のデザインは、色を増やすより統一を先に

私のテーマカラーは白黒です。スタイリッシュさだけでなく、キャラクターのポップな雰囲気も残したかったので、アイコンとバナーを主役にしました。

今回整えたポイントは、主に次の3つです。

  • ナビゲーションを黒にして、ページ全体の色をそろえる。
  • アイコンとバナーを使い、他の発信先とのつながりを見せる。
  • 大きな見出しと余白で、どこから読めばいいかを分かりやすくする。

最初から装飾を増やすより、「背景、文字、ボタン、メニュー」の色をそろえる方が、全体を整えやすくなりました。

記事を書き始める前の確認リスト

枠ができたら、読者がたどる順番で確認します。

  1. ホームを開き、何のブログか分かるかを見る。
  2. メニューからプロフィール、お問い合わせへ移動する。
  3. noteとYouTubeのリンクが、自分の発信先につながるか確認する。
  4. お問い合わせをテストし、送信表示と受信をそれぞれ確認する。
  5. スマートフォンでも、文字・画像・ボタンが見やすいか確認する。

この確認が終わったら、記事を書く場所ができた状態です。デザインを触り続けるより、実際の体験を一つずつ記事にしていく段階に移ります。

見た目を変える前に、初期設定とは分けて考える

ここまでの話は、読者が見るページの準備です。ただ、ホームをきれいにしただけで、WordPressの初期設定が全部終わるわけではありません。

エックスサーバーのWordPress・Cocoonの初期設定ガイドでは、サイトの基本情報やパーマリンク、表示などの設定が案内されています。まずその確認と、今回のデザイン作りを分けると、何を済ませたのかが分かりやすくなります。

私のブログと同じ見た目にするより、自分のブログで「ページが開く」「リンクが目的の場所へ行く」「連絡を受け取れる」を先に確かめる。そのうえで、色や画像を整える順番をおすすめします。

Cocoonの具体的な操作に迷ったら、公式マニュアルで、ロゴ・メニュー・モバイル表示など、変えたい場所から探せます。設定項目を全部触る必要はありません。たとえば、メニューを直したいならメニュー、アイコンを変えたいなら画像、という単位で進めると、目的がはっきりします。

有料テーマや新しいサーバーを買う前に

今回はCocoonで枠を整えています。有料テーマを入れたから読まれる、という結果を確認したわけではありません。

すでにWordPressが使える人なら、まず今の環境でプロフィールやメニューを整えてみるのがよいと思います。私自身、開設済みのブログから始めました。この記事を読んで、新しくサーバーを契約し直す必要はありません。

これから開設する人なら、デザイン以外の条件も見てください。初回だけでなく継続時に払えるか、分からないときに調べる場所があるか、自分の用途に必要な機能があるか。見栄えと契約の判断は、分けて考えたいところです。

記事がゼロのときに迷いやすいこと

ホームは最初から完成させる?

私の場合は、名前と短い説明、テーマ、ほかの発信先が分かるところまで作りました。記事が増えたら、読まれている記事や新しい記事への入口を足せます。まだ存在しない記事の一覧を、完成したように見せる必要はありません。

ブログとnoteは同じ文章でいい?

私の方針は、noteでは体験の流れや気持ちを読める形に、ブログでは設定や判断を調べられる形にすることです。同じ出来事を扱っても、読んだ人が持ち帰れるものを変えます。今回の準備を、もう少し会話に近い形で読めるブログの入口を作ったnote(noteで近日公開)も用意しています。

枠を作れば、収益化の準備は終わり?

まだです。紹介したいサービスの提携や広告リンクの確認は別に進めました。その記録はPVゼロでXサーバーの提携を申し込んだ記事へ。枠があること、提携できること、収益が出ることは、それぞれ違う段階です。

あわせて読みたいPVゼロでXサーバーの提携を申し込んだ記事 →

これからブログを作る方へ

今回はXサーバーとCocoonで、発信の入口になるブログの枠を整えました。記事を書く前にページの役割を決めたことで、何をどこに載せるかが整理できました。

サーバーをこれから用意する方は、契約内容と現在の料金を確認したうえで、自分の用途に合うか判断してください。

Xサーバーの料金・契約条件を確認する(広告) →

私の発信内容はプロフィールにもまとめています。

関連記事:お問い合わせフォームの設定記録

次に読みたい記事

気になるところから、続きをどうぞ。

次に読むCocoonを白黒で整える →次に読むお問い合わせの送受信を確認する →

コメント

タイトルとURLをコピーしました