【初心者ブログ構築②】ではサーバー契約について解説しました。
ここではサーバー契約と一緒に導入したWordPressの基本設定と、ブログデザインの要となる「テーマ」の導入について解説します。
WordPressのテーマを導入する
まず初めに「テーマ」の導入を解説します。
テーマとはWordPressでブログを作成する際の「テンプレート」のことです。テーマを使うことで、おしゃれで見やすく機能的なウェブサイトを簡単に作ることが可能になります。
テーマを使わずにデフォルトのテンプレートのままブログを作っても良いのですが、それだとSEOの評価も低く微妙なデザインになってしまうため、無料で使えてよりSEO評価の高いテンプレートを導入します。
WordPressのテンプレートは無料のものだけでも1,000種類以上もあるのですが、SEO対策やレスポンシブ対応（PCやスマホなどの最適な表示調整）の是非、またブログやホームページなど制作するサイトによって向き不向きなどがあるので、実用性があり人気のテーマとなると数種類に絞られてきます。
そして今回ここで解説するテーマは「Cocoo ～コクーン～」という超有名なテーマになります。
Cocoonはブログだけでなくホームページ制作にも向いている万能型のテーマですが、グーグルからも高い評価を受けているので、SEO的にも問題ありません。
またサイト作成に必要な機能も充実していて、シンプルなデザインで見やすいのもお勧めポイントです。
将来的に稼げるサイトになってきたら有料テーマに変えるのもありかもしれませんが、初めから有料テーマを使う必要はまったくありません。（はっきりって無駄です）
Cocoonのダウンロード
それではまず下記リンクからCocoonをダウンロードしましょう。
注意）コクーンは親テーマと子テーマがありますので必ず両方ダウンロードしてください。
ダウンロードが済んだら次はWordPressへCocoonをインストールします。
ここからはWordPressの管理画面での作業になりますが、はじめてWordPressにログインする方はうまくログインできないかもしれません。
その場合はエックッスサーバーのサーバーパネルからログインするとわかりやすいので以下の方法を試してみてください。
※サーバーパネルからWordPressの管理画面への行き方
エックッスサーバーのサーバーパネルを開き「管理画面URL」をクリックしWordPressの管理画面に進み「WordPress簡単インストール」をクリックしてください。
次にサーバー契約時に作った独自ドメインの「選択する」をクリック。
するとWordPressの管理画面URLが表示されるのでそれをクリックして管理画面へ移動します。
これでWordPressにログインできたと思います。
WordPressの管理画面が表示されたらこのページをブックマークして、次回から簡単にログインできるようにしておくと良いですね。
Cocoon親テーマのインストール
まず最初にCocoonの親テーマをインストールします。
１．WordPressの管理画面左側の「外観」メニューから「テーマ」をクリック
２．「新規追加」をクリック
３．「テーマのアップロード」をクリック
４．「ファイルの選択」をクリックして、事前にダウンロードしておいた「cocoon-master-〇.〇.〇.zip」を選択
５．「今すぐインストール」をクリック
６．「テーマのインストールが完了しました。」と表示されれば完了です。
７．管理画面左側の「外観」メニューから「テーマ」をクリックするとインストール済みのテーマの中に「Cocoon」が追加されているはずです。
８．カーソルをCocoonの上に移動すると「有効化」ボタンが表示されるのでクリックします。
９・Cocoonの親テーマが有効化されインストールは完了です。
Cocoon子テーマのインストール
次にCocoonの子テーマをインストールします。
親テーマのみインストールした場合は、テーマのアップデート時にCSSやテンプレートカスタマイズがリセットされてしまいます。子テーマをインストールしそちらをカスタマイズすることで、テーマカスタマイズを保持したままアップデートができます。
１．子テーマのインストールは親テーマの１～３までと同じように進みます。
４．「ファイルの選択」をクリックした後にインストールするファイルですが、今度は事前にダウンロードしていたもう一つのファイル「cocoon-child-master-〇.〇.〇.zip」になりますのでご注意ください。
５．５～６は親テーマと同様に進みます。
７．管理画面左側の「外観」メニューから「テーマ」をクリックするとインストール済みのテーマの中に「Cocoon Child」が追加されているはずです。
８．親テーマと同じように「有効化」をクリックし「Cocoon Child」が「有効」になればCocoonのインストールは完了です。
WordPressのカスタマイズ
WordPressへのテーマの導入も済み基本的なサイト構築は完了しましたが、続いては稼ぐために必須となってくるカスタマイズを行っていきたいと思います。
これから行うカスタマイズは基本的な設定のほか、ブログ記事を書き始めた後だと設定負担が大きくなってしまう可能性のある、現段階で済ませておきたい最低限の設定になります。
サイトタイトルとキャッチフレーズ
サイトの名前とキャッチフレーズを設定します。
①．管理画面左側の「設定」から「一般」をクリックすると一般設定画面に変わります。
②．「サイトのタイトル」と「キャッチフレーズ」を決め入力します。
※ここはいつでも変更可能なので仮のタイトルやキャッチフレーズでも構いません。
③．一般設定画面を開いたついでに変えておきたいのがWordPressアドレスとサイトアドレスです。
「http://~」となっているアドレスを「https://~」に変更します。WordPressアドレスとサイトアドレスの両方行ってください。
※半角の「s」を付け足すだけですが間違って入力・保存すると、WordPressにアクセスできなくなる場合があるので慎重に行ってください。
これはセキュリティ強化のためのSSL化設定で、本来はエックスサーバー側でも設定が必要ですが、クイックスタートでWordPressをインストールした場合は自動設定されているのでここだけ変更すれば大丈夫です。
設定が終わったら忘れずに「変更を保存」を押して設定を完了させてください。
パーマリンクの設定
パーマリンクとはブログの記事ごとに設定されるドメインの一部のことです。
例えば下記のようなURLがあった場合、赤く囲った部分がパーマリンクになります。
このパーマリンクは記事を作成するごとに自分で設定していきます。
まず管理画面で基本設定をしておきます。
①．管理画面左側の「設定」から「パーマリンク」をクリックするとパーマリンク設定画面に変わります。
②．共通設定で「投稿名」を選択し最後に忘れずに「変更を保存」を押します。
記事ごとのパーマリンクの設定方法については【初心者ブログ構築⑥】で解説しています。
サイドバーの設定
サイドバーとはメイン記事の右側（または左側）に設置されている領域のことで、運営者情報や投稿記事の情報などを表示し、ブログに訪問してくれた読者が使いやすいような機能を設定します。
管理画面左側の「外観」から「ウェジェット」をクリックするとウェジェット設定画面に変わります。
※ウィジェットとはWebページなどで動作する小さなアプリのことで、ウィジェットを利用してあらかじめ用意されているアプリをブログ内に表示させることができます。
ウェジェット設定画面は大きく分けて左側が追加できるウェジェット、右側がウェジェットを設置できる場所となっています。
まず左側の利用できるウェジェットから以下の3つを選びサイドバーに追加します。
・検索新着記事
・カテゴリー
１．一覧の中から「プロフィール」を選び ▼ を押します。
２．すると設置したい場所が表示されますので「サイドバー」を選んで「ウェジェットを追加」を押します。
３．同じように「検索」→「新着記事」→「カテゴリー」の順番でサイドバーにウェジェットを追加します。
すると右側のサイドバー領域に追加したウェジェットが表示されます。
不要なウェジェットの削除
初期設定のサイドバーには不要なウェジェットが設定されているので削除します。
１．追加した4つのウェジェットの上にある「ブロック」を削除します。
２．「ブロック」の右側の ▼ を押すと「削除」が出ますのでクリックして削除します。「ブロック」は3つとも削除してください。
３．サイドバー領域の下にサイドバースクロール追従領域がありますが、そこにも2つ不要な「ブロック」がありますので削除してください。
プロフィールの設定
サイドバーに設置したプロフィールを設定します。
サイドバーへ追加した「プロフィール」の▼をクリックします。
①タイトルの空欄へ「プロフィール」と入力。「筆者」「管理人」など自分の好きな表現でも問題ありません。
②「保存」をクリック。
③「あなたのプロフィール」をクリックするとプロフィールの設定画面へ切り替わります。
「ニックネーム」「ブログ上の表示名」「メール」を入力したら「プロフィール情報」欄に自己紹介文を記入します。
サイドバーのプロフィールはあまり長文にせず、ブログの管理者がどのような人物かわかるような文を簡潔にまとめると良いでしょう。
いつでも修正、加筆が出来るのでとりあえずは簡単な自己紹介で大丈夫です。
④最後に画面一番下の「プロフィールを更新」を忘れずにクリックしてください。
コクーンのカスタマイズ
次にWordPressにインストールしたテーマ「Cocoon」の設定を行いますが、すべての設定をすることは細かすぎて不可能なのでここでは必要最低限の設定を行います。
管理画面左側の「Cocoon設定」をクリック。
Cocoonの設定画面が開きます。
赤枠で囲んだ部分に表示された39項目の設定ができます。
Cocoon設定→「スキン」
スキンとは簡単にいうと「サイトの着せ替え」のようなものです。
ひとつひとつ細かな表示設定などをしなくても最初からお気に入りのデザインで始められるので初心者にとってはありがたい機能です。
80種類以上のサンプルの中から気に入ったデザインを選びます。
気に入ったデザインが決まったら「〇」にチェックを入れて「変更をまとめて保存」をクリックするとプレビュー画面に変更されたデザインが表示されます。
Cocoon設定→「全体」
全体の項目はサイト全体のカラー変更などができます。
スキン設定した場合は特に設定を変える部分はありませんが、しいて言うならフォントサイズ。
初期設定のフォントは少し大きい気がしますので「18px」を「16px」に下げます。
※フォントサイズも好みですので変更しなくても良いです。
Cocoon設定→「SEO」
カテゴリーやタグ・アーカイブ、添付ファイルを検索エンジンにインデックスさせるかどうかの設定です。
「タグページをnoindexとする」にチェックを入れます。
Cocoon設定→「アクセス解析・認証」
初期設定では「サイト管理者も含めてアクセス解析する」にチェックが入っているので外します。
チェックが入ったままだと管理画面にログインしているときに自分がブログのページを見た場合、その分のPVもカウントされてしまいます。
カウントされて問題があるわけではありませんが、正確なアクセス解析を行うためにはチェックを外したほうが良いでしょう。
Cocoon設定→「SNSシェア」
SNSシェアはブログを見てくれた人に記事を拡散してもらうための設定です。
１．トップシェアボタン
トップシェアボタンの表示の「メインカラムトップシェアボタンを表示」のチェックを外します。
２．ボトムシェアボタン
２－１．表示切替は「Twitter」「Facebook」「はてな」「Pocket」「LINE＠」の5つにチェックを入れる。
２－２．カラム数を「5列」に変更する。
※「SNSシェア」設定もお好みなので、この設定を参考にいろいろと試してみてください。
Cocoon設定→「画像」
画像設定では、アイキャッチ画像の設定ができます。
※アイキャッチ画像とは、記事のタイトルや内容文と一緒に表示される画像のこと。
アイキャッチの表示では「アイキャッチの中央寄せ」「アイキャッチをカラムの幅に引き延ばす」にもチェックをいれ、すべてのボックスにチェックを入れます。
Cocoon設定→「エディター」
エディタとは、文章の装飾やリンクの挿入など様々な機能が付いた投稿ページの作成画面のことです。
エディター設定では「Gutenberg（グーテンベルク）エディター」と「クラシックエディター（旧エディター）」のどちらを使うかを選択することができます。
WordPress（ver.5.0）以降では、投稿ページの作成画面は「Gutenberg」に変わりました。
はじめから使い慣れてしまえば何も問題ないのかもしれませんが「クラシックエディター」の方がワードやエクセル操作に似たところがあるため、初心者には「クラシックエディター」がおススメです。
Gutenbergの「Gutenbergエディターを有効にする」のチェックをはずすだけでクラシックエディターに設定変更されます。
以上でCocoon設定は完了ですが、最後に「変更をまとめて保存」を忘れずにクリックしてください。
Cocoonは利用者が多いこともあってネット上に様々な情報が公開されています。
使いながら少しずつオリジナルの設定をしていくと良いですね。
