この記事では、ブログ初心者でも迷わず作業が進められるように、WordPressのインストールからブログの初期設定、サイトアイコンの設定までの流れについて詳しく解説していきます。
実際にあなたのブログを立ち上げるまでに必要な流れを、画像つきで丁寧に紹介していきます。
この手順通りに進めれば、特別な知識がなくても自分のブログを開設できるようになります。
※当ブログ内で使用している専門用語の意味については、「AI副業でよく使われる用語集（初心者向け）」のページをご参照ください。
WordPressをインストールする
レンタルサーバーの契約、及び独自ドメインの設定が完了したら、次はいよいよWordPressをインストールしていきましょう。
まず、エックスサーバーのサーバーパネルにログインします。
左のメニューから「WordPress ＞ WordPress簡単インストール」をクリックします。
「+ WordPressを追加」をクリックします。
以下のページが表示されたら、まず「対象ドメイン」の下向き矢印をクリックして、あなたが取得設定して独自ドメインを選択し、「サイトURL」の赤枠内にあなたの独自ドメインが表示されていることを必ず確認してください！
各項目は以下の通りに入力していきます。
・ブログ名：あなたが決めたブログのタイトル
・ユーザー名：WordPress管理画面へログインする際のユーザー名
・パスワード：WordPress管理画面へログインする際のパスワード
・メールアドレス：あなたのメールアドレス
同じページを下の方へスクロールしていくと「テーマ」という欄がありますので、必ず「Cocoon」を選択して、最後に「インストールする」をクリックします。
＊当ブログでは全てCocoonというテーマに対する解説を行っていますので、必ずCocoonを選択してください！
20秒ほどでWordPressのインストールが完了すると、以下の画面が表示されます。
あなたのドメインのところに、サイト名とURLが表示されていますので、早速URLをクリックして、現状のあなたのブログを見てみましょう。
なお、管理画面は今後ブログを作成していく際の入り口となりますので、「開く」をクリックして、開いた画面をお気に入り登録しておいてください。
以下のように表示されていれば、WordPressは正常にインストールされています。
WordPressの初期設定を行う
WordPressのインストールが完了したら、まず最初にブログ全体の基本設定を行います。
この段階で行う設定をきちんと済ませておくことで、後のトラブルを防ぎ、検索エンジンにも正しく認識されるようになります。
以下の画面よりWordPressのインストール時に設定したユーザー名とパスワードを使って管理画面へログインします。
WordPressの管理画面にログインしたら、左メニューの「設定 ＞ 一般」をクリックします。
一般設定画面では、キャッチフレーズが空白になっていますので、ここにブログの簡単な説明文を入力します。
WordPressアドレス（URL）及び、サイトアドレス（URL）の「http」の最後に「s」を追加して、「https」にします。
＊「https」に変更することで通信内容が暗号化され、第三者による盗聴や改ざんを防ぐことができますので、忘れずに行うようにしてください。
変更が完了したら、ページ最下部にある「変更を保存」ボタンを忘れないようにクリックします。
次に「設定 ＞ パーマリンク」をクリックして、パーマリンク構造の中から「投稿名」を選択し、ページ最下部にある「変更を保存」をクリックします。
これは、記事を投稿した際に、その記事のURLを自由に設定できるようにするためです。
初期段階でのWordPressの設定はこれだけですが、ブログ運営を継続していく中で、必要に応じて追加の設定をしていきます。
Cocoonの初期設定を行う
WordPressの初期設定が終わったら、次にテーマ「Cocoon（コクーン）」の初期設定を行います。
Cocoonは無料とは思えないほど高機能で、初心者でも使いやすいテーマとして多くのブログで利用されています。
まず、WordPress管理画面の左メニューから「Cocoon設定」をクリックします。
表示された以下のページにあるたくさんのタブの中から必要なタブ名をクリックして、それぞれの設定を行っていきます。
設定後は、ページ上部の「変更をまとめて保存」を忘れずにクリックしてください。
まずは「スキン」タブをクリックして、ブログ全体のデザイン色を設定します。
スキン一覧には100種類以上のデザインが用意されていますので、あなたの好きな色を選んでみてください。＊画像アイコンをポイントすると、デザインサンプルが表示されます。
以下は、「COLORS（ブラック）」を選択した時のものです。
Cocoonの設定についても最初から細かい設定をすべて完璧に行う必要はありません。
ブログの体裁を整えていく中で、必要に応じてその都度追加の設定を行っていきます。
プラグインを追加する
WordPressでは「プラグイン」を追加することで、ブログにセキュリティ対策やデザイン調整、SEO対策などのさまざまな機能を簡単に組み込むことができます。
ここでは代表的なプラグインを例に挙げて、プラグインの追加手順を覚えましょう。
管理画面の左メニューから「プラグイン」をクリック、開いた画面で「新規追加」をクリックします。
以下のページが開いたら、プラグインの検索窓にプラグイン名を入力すると、すぐ下のエリアに検索されたプラグインが表示されますので、目的のプラグインの「今すぐインストール」をクリックします。
以下は、「XML Sitemap Generator for Google」という名称のプラグインを検索した時のものです。
「XML Sitemap Generator for Google」は、あなたのサイト構造をGoogleの検索エンジンにしっかり認識させるためのものですので、必ずインストールしておきましょう。
インストールが完了すると、以下の表示に変わりますので「有効化」ボタンをクリックします。
プラグインの有効化が完了すると、以下のページが開き、追加／有効化した「XML Sitemap Generator for Google」がプラグイン一覧の中に表示されました。
これでプラグインの登録作業は完了です。
その他のプラグインについても同様の手順で追加していきましょう。
ブログ全体を自動でバックアップするためのプラグイン「BackWPup」についても追加しておくことをオススメします。
但し、プラグインをあまり多くインストールしすぎると、パソコン自体の動作が重くなる場合があるため、必要最小限のものだけを導入するようにしましょう。
プラグインについても、必要性が出てきた時点で都度追加インストールすることとします。
カテゴリーの作成と初期設定を行う
ブログの記事を整理分類するために、カテゴリー分けを行います。
カテゴリーを設定しておくことで、読者が目的の記事を探しやすくなり、検索エンジンにも内容を正しく伝えることができます。
WordPressの管理画面の左メニューから「投稿 ＞ カテゴリー」をクリックし、以下のページが開いたら、「カテゴリーの名前」と「スラッグ」を入力し、「カテゴリーを追加」ボタンをクリックします。
＊スラッグとは、カテゴリーページのURLの一部として使われる「識別名」です。
以下は「ブログ運営の基本」「WordPress初期設定」「ブログデザインとカスタマイズ」を追加した時のものです。
カテゴリーについても、ブログの運用と共に追加や修正が必要となってきますので、その都度追加／修正していきます。
メニューを作成する
ブログの見やすさを高めるために、サイト内のメニューを正しく設定していきましょう。
WordPressでは、画面上部（ヘッダー下部）に設置する「グローバルメニュー」と、サイドバーに表示する「カテゴリーメニュー」の2種類を使い分けます。
まず最初に「グローバルメニュー」の作成から行います。
管理画面の左メニューから「外観 ＞メニュー」をクリックし、表示されたページでメニュー名に「グローバルメニュー」と入力し、メニューの位置で「ヘッダーメニュー」を選択したら、最後に「メニューを作成」をクリックします。
以下のページが開いたら、左メニューのカテゴリー右端の▼をクリック、「すべて表示」タブをクリックして、先ほど作成した3つのカテゴリー全てにチェックを入れてから、最後に「メニューに追加」をクリックします。
すると、メニューに追加したカテゴリーが右側に表示されますので、そのまま「メニューを保存」をクリックします。
なお追加されたカテゴリーは、上下にドラッグすることで、並び順を変えることも出来ます。
グローバルメニューが正しく表示されているか、ブログを開いて確認してみましょう。
以下のようにヘッダー下部にグローバルメニューが表示されていればＯＫです。
各メニューをクリックすると、それぞれのカテゴリーページが表示されるはずです。
次に、サイドバーに表示する「カテゴリーメニュー」を作成します。
グローバルメニューを設定した時の画面上部にある「新しいメニューを作成しましょう。」をクリックします。
以下のページで先ほどと同じように、メニュー名に「カテゴリーメニュー」と入力してから「メニューを作成」をクリックします。
左メニューのカテゴリー右端の▼をクリックし、「すべて表示」タブをクリックして、3つのカテゴリー全てにチェックを入れてから、最後に「メニューに追加」をクリックします。
メニューに追加したカテゴリーが右側に表示されたら、「メニューを保存」をクリックします。
なおこの時点では、サイドバーの設定をしていませんので、サイドバーに表示する「カテゴリーメニュー」は表示されていません。
次のステップ「サイドバーを設定する」が完了した時点で表示されるようになります。
サイドバーを設定する
サイドバーとは、ブログ画面の右側に表示される赤枠のエリアのことです。
ここには、プロフィールや新着記事、カテゴリー、検索ボックスなどを配置することで、読者がサイト内を回遊しやすくなります。
サイドバーには、あなたがブログを運営していく中で好きなものを設定すれば良いのですが、ここでは上から順に「ブログ内検索」「メニュー」「新着記事」「アーカイブ」を設定してみます。
管理画面の左メニューから「外観 ＞ウィジェット」をクリックします。
画面右側に表示される「サイドバー」エリアと「サイドバースクロール追従」エリアから全てのブロックを左側にドラッグして削除します。
以下のように一旦空にしたサイドバーのエリアに、4つの項目を追加設定していきます。
左側の一覧からまず「検索」を探し、右端の▼をクリックすると、プルダウンメニューが表示されますので、サイドバーに✔が入っていることを確認し、「ウィジェットを追加」をクリックします。
すると、右側のサイドバーのエリアに「検索ウィジェット」が追加されていますので、タイトルに「ブログ内の検索」と入力し、「保存」をくりっくします。
検索ウィジェットと同じ要領で、他の3つもサイドバーのエリアに追加していきましょう。
左側の一覧から「ナビゲーションメニュー」を探し、サイドバーのエリアに追加します。
追加されたナビゲーションメニューで、タイトルに「メニュー」と入力、メニューを選択の下向き矢印をクリックして「カテゴリーメニュー」を選択、最後に「保存」をクリックします。
次に左側の一覧から「[C] 新着記事」を探し、サイドバーのエリアに追加します。
追加された[C] 新着記事で、表示数・表示タイプをあなたの好きな形に設定し、最後に「保存」をクリックします。
最後に左側の一覧から「アーカイブ」を探し、サイドバーのエリアに追加します。
ここでは「投稿数を表示」にチェックを入れておくと、あなたが投稿した記事数が月単位で表示されます。
最後に「保存」をクリックします。
それでは、あなたのブログがどのように表示されているか確認してみましょう。
以下のようにサイドバー上に設定した4つのウィジェットが表示されていればＯＫです。
なお、サイドバーに配置する項目は多すぎると読みにくくなるため、なるべく基本的な要素に絞るのが効果的です。
以上で、サイドバーの基本設定が完了しました。
サイトアイコンを設定する
次に、ブログの「サイトアイコン」を設定します。
サイトアイコンとは、以下のようにブラウザのタブやスマホのホーム画面などに表示される、小さな丸いシンボル画像のことです。
このアイコンを設定することで、あなたのブログがひと目で認識できるようになり、信頼感やブランドイメージの向上にもつながります。
サイトアイコンを設定するためには、まずサイトアイコンとして表示するための画像が必要となります。
サイトアイコン画像の推奨値は、以下の通りです。
画像サイズ：512×512ピクセル以上
拡張子：PNG
＊拡張子とは、ファイル名の末尾につく「.jpg」や「.png」などの文字列で、ファイルの種類を示します。PNGは、画像を劣化させずに保存できる形式。
サイトアイコン画像を設置する際の推奨サイズは512×512ピクセル以上と大きなものですが、実際に見るときの実サイズは 16〜32px 程度ですので、かなり単純で目立つものにする必要があります。
下の画像は、私のサイトで使用しているサイトアイコンです。
上のような単純なデザインであれば、当ブログ内で紹介しているAI画像生成ツール「Leonardo.Ai」を使わなくても、ChatGPTに「こんな画像作って」とお願いすれば、すぐに作ってくれます。
ChatGPTの基本的な使い方については、以下の記事を参考にして下さい。
→ ChatGPTと関連ツールの使い方：AIライティングを効率化するための基本操作
ChatGPTに指示を出す文章（プロンプト）は、以下のような程度で十分です。
「ブログ用のサイトアイコンを作成して。背景色は〇色で、中央に△の白文字（又は女性の顔など）の正方形の画像」
すると、今回は以下の画像をChatGPTが生成してくれました。
赤枠内のアイコンをクリックして画像をダウンロードしましょう。
ブラウザ右上隅にあるダウンロードアイコンをクリックすると、「最近のダウンロード履歴」が表示されますので、一番上のフォルダアイコンをクリックします。
すると、「Downloads」フォルダが自動的に開き、その中にダウンロードした画像が保存されていますので、それをダブルクリックしてください。
開いた画像の再上部にはファイル名が表示され、拡張子は「png」となっているのでＯＫ。
但し、画像最下部に表示されている画像サイズを見ると、「1024×1024」となっていますので、サイトアイコンの推奨サイズ「512×512」に合致していません。
ChatGPTに画像生成を指示する際にサイズを指定すれば良さそうですが、仮にサイズを指定したとしても、ChatGPTの仕様で正方形の場合は、このサイズでのみ出力されるようです。
このままのサイズでサイトアイコンに設定することは可能かもしれませんが、念のため推奨サイズの「512×512」に縮小しておきたいと思います。
ここでは、画像サイズの変更だけではなく、かなり幅広い機能を持ち、しかもログインなしで無料で使用できる画像編集用オンラインツール「iLoveIMG」をご紹介します。
以下のリンクをクリックして「iLoveIMG」を開いたら、「画像のサイズ変更」をクリックします。
下の画面が表示されますので、「画像を選択」へ縮小する画像をドラッグします。
以下の画面で「幅 (px):」に「512」と入力します。
「横縦比を維持」にチェックが入っていれば、高さは自動的に「512」に変わります。
最後に「画像のサイズ変更」ボタンをクリックします。
すると、Downloadsフォルダに縮小された画像が保存されていますので、それをダブルクリックして開いてみてください。
サイズがきちんと「512×512」に縮小されていることが確認出来ました。
なおファイル名が「ChatGPT Image 2025年11月7日 10_56_44 (1).png」のようになっていると思いますので、短い名前（半角英数字）に変更しておきましょう。
ここまでで、サイトアイコン用画像の準備が整いました。
次に出来上がったサイトアイコンを、あなたのブログへ設置します。
WordPressの管理画面から「外観 ＞カスタマイズ」をクリックします。
次のページで「サイト基本情報」をクリックします。
次に「サイトアイコンを選択」をクリックします。
以下の画面内に、先ほど作成したサイトアイコン用の画像をドラッグします。
以下の画面が表示されたら、そのまま画面右下隅にある「選択」ボタンをクリックします。
以下の画面で「サイトアイコン」のところに今設定した画像が表示されていることを確認し、「公開」ボタンをクリックします。
あなたのブログを開き、タブの左端にサイトアイコンが表示されていたら、設定作業は完了です。
ここまでで、WordPressのインストール～サイトアイコンの設定まで全て完了しました。
サイトアイコンの設定まで完了した方は、以下の手順へ進んでください。
コメント