今回は、エックスサーバーでCocoon（コクーン）を使ってブログを始める方法を紹介します。
Cocoonのインストールから、メニューの設定、記事の書き方までを画像付きで詳しく説明します。
Cocoonを使ってブログを開始したい方は、参考にしていただけると幸いです。
因みに、まだレンタルサーバーを契約されていない場合、エックスサーバーをおすすめします。
クイックスタートで申し込むことで、申し込みと同時にWordPressを始めることができます。
Cocoonも申し込みと同時にインストールすることができるので、初心者でも簡単にブログを公開できます。
目次
Cocoonを使ったブログの始め方
ステップ２：お問い合わせフォームの作成
ステップ３：ブログのメニューを設定
ステップ４：サイドバーを設定
ステップ５：記事を書く
ステップ１：Cocoonをインストール
まずは、お使いのWordPressにCocoonをインストールします。
エックスサーバーをお使いの場合には、以下の記事を参考にCocoonをインストールしてください。
エックスサーバー以外をお使いの場合には、Cocoonの公式サイトからテーマファイルをダウンロードして手動でインストールを行います。
>> Cocoon ダウンロードページ
Cocoonには親テーマと子テーマがあるので、両方ともダウンロードしておいてください。
※ファイルはZIPになっています。
親テーマのダウンロードは、こちらのボタンからです。
子テーマのダウンロードは、こちらのボタンです。
Cocoonのテーマファイルをダウンロードしたら、WordPress管理画面を開いてください。
管理画面の左側にある「外観」をクリックしてテーマ管理画面を開き、上記でダウンロードしたテーマファイルをアップロード・インストールします。
テーマファイルは、「親テーマ」→「子テーマ」の順番にインストールしてください。
↓
インストールが完了したら、「子テーマ」の方を有効化してください。
これで、Cocoonのインストールが完了しました。
ステップ２：お問い合わせフォームの作成
Cocoonのインストールが完了したら、次はお問い合わせフォームを作成しておきましょう。
ですが、サイトの信頼性を上げるために設置しておくことをおすすめします。
今回は、「Contact Form 7」というプラグインを使ってお問い合わせフォームを作成します。
まず、WordPress管理画面へ移動し、「新規プラグインを追加」をクリックしてプラグインのインストール画面を開きます。
↓
プラグインのインストール画面を開いたら、画面右上にある検索ボックスで「Contact Form 7」を検索し、そのままインストールします。
インストールが完了したら、続けて「Contact Form 7」を有効化します。
これで、「Contact Form 7」のインストールが完了です。
続いて、「Contact Form 7」の設定画面を開き、ショートコードというものをコピーします。
「Contact Form 7」では、ショートコードを固定ページに貼り付けてフォームの作成を行います。
固定ページの管理画面を開き、画面上部にある「新規固定ページを追加」をクリックします。
↓
固定ページの新規作成画面が開きます。
まずは、ページタイトルを入力します。
次は、その下のブロックに上記でコピーした「Contact Form 7」のショートコードをそのまま貼り付けます。
このような感じでショートコードが設定されます。
最後に、パーマリンクを設定します。
画面右にある「リンク」をクリックし、そこに「contact」と入力しましょう。
ですが、ページの内容を表す文字列を「半角英数字」と「-（ハイフン）」で設定しましょう。
ここまで設定したら、画面右上にある「公開」をクリックして、ページを公開します。
↓
これで固定ページの作成が完了し、お問い合わせフォームが出来上がりました。
実際に作成したお問い合わせフォームの表示画面を確認してみましょう。
画面右にある「固定ページを表示」をクリックしてください。
↓
このようなお問い合わせフォームが表示されていればOKです。
ステップ３：ブログのメニューを設定
ブログのヘッダーやフッターなどに表示するメニューを設定します。
メニューの作成は、「外観」→「メニュー」から行います。
「メニュー名」と「メニューの位置」を設定してください。
「メニューの位置」では、実際にメニューを表示する場所を選択してください。
各項目を設定したら、「メニューを作成」をクリックして、作成を完了させます。
メニューを作成したら、次は、そのメニューに表示するページを設定します。
メニューへのページ追加は、画面左側の「メニュー項目を追加」という項目から行います。
「固定ページ」の中の「すべて表示」というタブを開いてください。
今回は、「ホーム」と「お問い合わせ」を選択してメニューに追加してみます。
このように右側の画面に「ホーム」と「お問い合わせ」が追加されるので、そのままメニューの保存を行います。
これで、メニューの設定が完了しました。
それでは、実際にブログを開いて、メニューを追加した個所を確認してみましょう。
このようにメニューが表示されていればOKです。
ステップ４：サイドバーを設定
サイドバーの変更は、ウィジェットという機能を使って行います。
「外観」→「ウィジェット」を画面を移動してください。
もし、WordPressをインストールした直後の状態だと、サイドバーに複数のウィジェットが設定されています。
これらのウィジェットは不要なので、すべて削除してしまいましょう。
デフォルトのウィジェットを削除したら、次は、サイドバーの領域に表示させたいウィジェットを追加していきます。
今回は、説明用として「新着記事」をサイドバーに追加してみます。
「新着情報」というウィジェットを探して、クリックしてください。
このように追加画面が出てくるので、「サイドバー」を選択して「ウィジェットを追加」をクリックします。
これで、「新着情報」がサイドバーに追加されました。
追加と同時に、新着情報ウィジェットの設定画面が出てくるの、必要であれば変更を行って設定を保存してください。
同じようにして、今回は4つのウィジェットをサイドバーに追加してみました。
※皆さんは、実際にサイドバーに設定したいウィジェットを選んで追加してください。
これで、ブログのサイドバーの設定が完了です。
実際にブログの公開画面を確認して、サイドバーがどのように表示されているかも確認してみましょう。
因みに、Cocoonでは「サイドバースクロール追従」というものを設定することもできます。
追従型のサイドバーを設定することができ、ここに設定したウィジェットは、画面を下へスクロールしてもずっと付いて移動します。
せっかくなので、ここに目次を追加してみます。
これで、目次の追加が完了です。
実際にブログの公開画面も確認してみましょう。
このように目次が追加されているはずです。
このまま、画面を下へスクロールしてみてください。
目次も下まで一緒についてきていれば問題なく設定できています。
ステップ５：記事を書く
記事の書き方については、全てを説明していると非常に長くなります。
そこで、今回は基本的な操作に絞って、以下の作業方法について説明します。
- 記事のタイトルを設定
- 文章の書き方
- 段落（H2、H3タグの設定方法）
- リストの作成
- 記事への画像の挿入
- リンクの設定
- 文章へアンダーラインを引く
- 文章に色を付ける
- アイキャッチ画像の設定
- パーマリンクの設定
- SEOの設定
- ボックスの挿入
- 記事の公開
1記事のタイトルを設定
記事の投稿画面を開いたら、まずはタイトルを設定しましょう。
画面上部に「タイトルを追加」という項目があるので、そこに記事タイトルを入力します。
2文章の書き方
文章は、記載する個所にカーソルを合わせることで入力できます。
このような感じで文章を入力していきましょう。
因みに、ENTERを押すと次のブロックへ自動で移動します。
また、ブロック内でSHIFT + ENTERすることで、改行を行うことができます。
3段落（H2、H3タグの設定方法）
段落とは、文章の大きな塊のようなものと考えてください。
記事内にはいくつかの大きな段落があり、その中にさらに小さな段落がいくつか存在します。
その大きな段落は、H2という見出しを使って作成します。
H2見出しを設定する個所に「/」を入力するとメニューボックスが出てくるので「見出し」を選択します。
H2見出しが挿入されるので、その段落のタイトルとなる文章を入力すればOKです。
大きな段落を作ったら、次はH3見出しを使って、さらにいくつかの段落に分けて文章を入力します。
そうすることで、ユーザーにとっても読みやすい記事になります。
同様にして、H3見出しを設定する個所に「/」を入力して「見出し」を挿入してください。
挿入された見出しの上に「H2」というメニューがあるので、そちらを選択します。
Hタグの選択メニューが出てくるので「H3 見出し」を選択してください。
これでH3見出しに変更されるので、H3見出しを入力すればOkです。
そうすることでSEO効果も期待でき、記事のメインキーワード以外でもアクセスを増やせるようになります。
因みに、H3見出しの段落をさらに小さな段落に分ける場合には、H4見出しを利用しましょう。
4リストの作成
リストとは、文章の箇条書きに使用します。
箇条書きを見やすく表示することができるので、必ずリストを使うようにしましょう。
箇条書きを表示したい個所で「/」を入力するとブロックの選択メニューが出てくるので、その中から「リスト」を選択します。
該当箇所にリストが挿入されるので、そこに文章を記述していきます。
1つ目のリストを設定したら、ENTERをクリックすることで次のリストが追加されます。
同様にしてリストを追加していき、箇条書き文章を作成しましょう。
因みに、リストには、「番号付きリスト」というものもあります。
箇条書き文章の先頭に自動で番号を付けたい場合には、以下のように「番号付きリスト」をクリックすれば変更されます。
5記事への画像の挿入
文章だけで記事を作成すると、非常に読みにくさを感じてしまうユーザーもいます。
ブログでは、要所要所に画像を使用することで、記事を読みやすくすることも大切です。
まず、画像を挿入する個所で「/」を入力してください。
ブロックの選択メニューが出てくるので、その中から「画像」を選択します。
画像のアップロード画面が出てくるので、いずれかの方法で画像を挿入します。
画像を挿入すると、記事内にこのように追加されます。
画像を挿入したら、「代替テキスト」を設定しておきましょう。
また、「アスペクト比」「横幅・高さ」「解像度」を設定することで、表示される画像のサイズなどを調整することもできます。
例えば、横幅を500pxに設定すると、このように画像が縮小されます。
6リンクの設定
記事内の文章にリンクを設定する場合、まずはリンクを設定する文章やテキストを選択してください。
その状態で、リンク設定のメニューを選択します。
リンク先を設定するボックスが出てくるので、URLを入力し設定します。
これで、文章にリンクを設定することができます。
ただ、この状態だと同一画面遷移でのリンク設定になります。
もし、別窓（別タブ）でリンクを開くようにするには、ペンマークをクリックしてください。
リンクの詳細画面が出てくるので、高度という項目を開いて「新しいタブで開く」にチェックを入れて保存します。
これで、別窓で開くリンクの設定が完了しました。
7文章へアンダーラインを引く
大事な文章にはアンダーラインを引くことで、特にユーザーに伝えたい内容を強調することができます。
アンダーラインを引きたい文章を選択しペンマークを選択します。
アンダーラインの選択メニューが出てくるので、使用したい色の「アンダーラインマーカー」を選択してください。
これで、選択した個所にアンダーラインを引くことができます。
また、文章にマーカーを引く場合には、メニューからマーカーを選択してください。
このように、選択した文章に対してマーカーを引くことができます。
8文章に色を付ける
色を付けたい文章を選択しペンマークをクリックします。
いくつかの選択メニューが出てくるので、色を選択すれば文章に色を付けることができます。
今回は、試しに「赤色」を選択してみます。
このように赤色の文章を設定することができます。
また、文書を太字にすることもできます。
例えば、「赤太字」を選択してみます。
このように赤色の太字を設定することができます。
9ボックスの挿入
記事を見やすく作成するために、ボックスを使用することも多いです。
例えば、情報をまとめたい場合や重要な文章をボックスで囲むことで、より見やすい記事にすることもできます。
まず、ボックスを挿入した個所の右側にある「+」をクリックしてください。
このようにブロックの選択ボックスが出てきます。
そのボックス上で「Cocoon ボックス」というキーワードで検索を行うと、Cocoonで用意されているボックスが出てきます。
さらに、「すべてを表示」をクリックすると、全てのボックスメニューが画面左側に出てきます。
今回は、試しに「アイコンボックス」を挿入してみます。
ボックスを挿入したら、そのボックス内に文章を入力すれば完成です。
さらに、投稿画面の右側の「スタイル」を選択してください。
スタイルの画面が開くので、そこから背景を挿入することもできます。
背景を挿入したら、同様にして文章を入力すればOkです。
因みに、ボックス内でリスト（箇条書き）を作成することもできます。
通常の文章だけでなく、リストをボックスで囲んで見やすく設定するのもおすすめです。
10アイキャッチ画像の設定
記事を公開する場合には、アイキャッチも設定しておきましょう。
アイキャッチは、記事のメイン画像になり、記事一覧ではサムネイルにも使用されます。
投稿画面の右上にある「アイキャッチ画像を設定」をクリックします。
↓
画像のアップロード画面が開きます。
「ファイルをアップロード」のタブに切りかえ、画像をアップロードします。
アップロードした画像はそのままメディアライブラリに追加されるので、「代替テキスト」を設定します。
「アイキャッチ画像を設定」をクリックすると、アイキャッチ画像の設定が完了します。
11パーマリンクの設定
パーマリンクとは、記事のURLです。
記事を公開する前には、パーマリンクの設定も行っておきましょう。
投稿画面の右上にある「リンク」をクリックします。
パーマリンクの設定画面が出てくるので、半角英数字を使って書き換えます。
また、「半角英数字」のみ、もしくは「-」も使って設定してください。
パーマリンクは日本語でも設定できますが、トラブルの原因になることもあります。
必ず半角英数字の文字列に変更しましょう。
12SEOの設定
Cocoonでは、記事ごとにタイトルタグとメタディスクリプションを設定することができます。
記事投稿画面の下に移動すると「SEOタイトル」と「メタディスクリプション」という項目があるので、そこから設定することができます。
SEOタイトルの入力項目がこちらです。
ただ、SEOタイトルを入力しない場合には、記事タイトルがそのままタイトルタグに使用されます。
メタディスクリプションには、記事の概要を120文字以内で入力してください。
120文字以内が目安ですが、スマートフォンでの表示を優先する場合にはその半分以下の文字数を意識しましょう。
13記事の公開
記事を作成したら、最後に公開を行って終了です。
画面右上にある「公開」をクリックしてください。
公開の確認画面に移動するので、問題なければ再度「公開」をクリックしてください。
これで、記事の公開が完了です。
最後に
今回は、Cocoonのインストールから記事の作成・公開までの方法をまとめました。
Cocoonを使ってブログを公開される方は、ぜひ参考にしてください。
