はじめに
前回の記事ではポートフォリオサイト公開前の最終チェックリストをコード品質・SEO・パフォーマンス・セキュリティ・アクセシビリティの5つの観点でまとめました。今回からは新しいフェーズとしてWordPressを使った本格的なブログの立ち上げ方を解説します。これまでの連載でHTML・CSS・JavaScriptの基礎を学び、ポートフォリオサイトを公開できるレベルになりました。その知識をWordPressに活かして、より実践的なWebサイト開発に挑戦していきましょう。
1. なぜWordPressでブログを立ち上げるのか
1.1 静的サイトとWordPressの違い
これまで作ってきたポートフォリオサイトは静的サイトでした。ページを追加するたびにHTMLファイルを作成してGitHubにプッシュする必要があります。ブログのように頻繁に記事を投稿するコンテンツには向いていません。
| 種類 | 更新方法 | 向いているコンテンツ |
|---|---|---|
| 静的サイト | HTMLファイルを直接編集 | ポートフォリオ・LP・企業サイト |
| WordPress | 管理画面からGUIで更新 | ブログ・ニュースサイト・ECサイト |
1.2 WordPressブログのメリット
| メリット | 内容 |
|---|---|
| 管理画面から記事を投稿できる | HTMLを書かなくても記事を追加できる |
| SEOプラグインが充実している | RankMathやYoast SEOで検索対策がしやすい |
| カスタマイズの自由度が高い | 学んできたHTML・CSS・JavaScriptの知識をフル活用できる |
| 世界シェアNo.1 | 案件・転職・フリーランス案件の需要が非常に高い |
💡 第七弾〜第十二弾で解説した内容が今回のベースになります: WordPressの環境構築・管理画面の操作・テーマのインストール・SEO対策・セキュリティ対策はすでに解説済みです。今回は「本格的なブログとして育てていくための立ち上げ手順」に絞って解説します。
2. ブログの方向性を決める
2.1 テーマとターゲットを明確にする
WordPressをインストールする前にブログの方向性を決めておきましょう。方向性が曖昧なまま始めると記事の一貫性がなくなり、SEO効果も読者の定着も期待しにくくなります。
| 決めること | 内容 | 例 |
|---|---|---|
| ブログのテーマ | 何について書くか | プログラミング学習・Web制作・副業 |
| ターゲット読者 | 誰に向けて書くか | プログラミング初心者・転職希望者 |
| 収益化の方向性 | どう収益化するか | アフィリエイト・自社サービス・案件獲得 |
| 更新頻度 | どのくらいの頻度で投稿するか | 週1本・月4本 |
2.2 ドメイン名を決める
ブログのドメイン名はブランドの一部です。以下の基準で決めましょう。
| 基準 | 内容 |
|---|---|
| 覚えやすさ | 短くシンプルな名前 |
| ブログテーマとの関連性 | 内容が伝わる単語を含める |
| 拡張子 | .com・.jp・.net が信頼性が高い |
⚠️ 後からドメインを変更するとSEO評価がリセットされます: 一度決めたドメインを変更すると検索エンジンの評価がゼロに戻ります。最初に慎重に決めておきましょう。
3. 環境構築・WordPress設置
※本記事にはプロモーション(広告)が含まれています。
3.1 レンタルサーバーを準備する
第十弾で解説した通りエックスサーバーまたはConoHa WINGが国内の2大スタンダードです。ブログ運営には以下の観点でサーバーを選びます。
| 観点 | 推奨 |
|---|---|
| 表示速度 | エックスサーバー・ConoHa WING(ともに高速) |
| 料金 | 月額1,000円前後から |
| WordPressの簡単インストール | 両サービスとも対応 |
| 独自ドメインの無料取得 | 両サービスとも初年度無料キャンペーンあり |
3.2 WordPressを設置する
エックスサーバーとConoHa WINGはともに管理画面から「WordPressかんたんインストール」で数分でWordPressを設置できます。詳しい手順は第十弾を参照してください。
設置後に確認すること:
✅ https://yourdomain.com でサイトが表示されるか
✅ https://yourdomain.com/wp-admin で管理画面にログインできるか
✅ SSL(鍵アイコン)が表示されているか
3.3 WordPress設置直後の必須設定
WordPressをインストールしたら記事を書く前に以下の設定を必ず行います。
① パーマリンクの設定
- 「設定」→「パーマリンク」を開きます。
- **「投稿名」**を選択します。
- 「変更を保存」をクリックします。
設定後のURL例:
https://yourdomain.com/how-to-use-wordpress/
💡 パーマリンクは最初に必ず設定しましょう: 記事を投稿した後にパーマリンクを変更するとURLが変わりSEO評価がリセットされます。最初に必ず設定してください。
② 不要なプラグインを削除する
WordPressにはデフォルトでいくつかのプラグインが入っています。使わないプラグインは削除してセキュリティリスクと読み込み速度への影響を最小限にします。
削除してよいデフォルトプラグインの例:
| プラグイン名 | 理由 |
|---|---|
| Hello Dolly | ランダムな歌詞を表示するだけのプラグイン |
| WP Multibyte Patch | 日本語環境では不要な場合が多い(要確認) |
③ サンプル記事・コメントを削除する
- 「投稿」→「投稿一覧」でサンプル記事「Hello world!」を削除します。
- 「コメント」でサンプルコメントを削除します。
- 「固定ページ」でサンプルページを削除します。
4. テーマを選んで設定する
4.1 ブログ向けテーマの選び方
ブログ用テーマはポートフォリオサイト用とは求められる機能が異なります。
| 観点 | 内容 |
|---|---|
| 表示速度 | 記事数が増えても重くならないか |
| カテゴリー・タグの表示 | ブログらしい一覧ページが用意されているか |
| 目次の自動生成 | 長い記事に目次が自動で付くか |
| SNSシェアボタン | 記事にシェアボタンが付いているか |
| アドセンス・アフィリエイト対応 | 広告を貼りやすい構造になっているか |
4.2 国内ブログ向けテーマの定番
| テーマ名 | 料金 | 特徴 |
|---|---|---|
| SWELL | 17,600円(買い切り) | 国内ブロガーに圧倒的人気・Gutenberg完全対応 |
| AFFINGER6 | 14,800円(買い切り) | アフィリエイトに特化した機能が豊富 |
| Cocoon | 無料 | 機能が豊富な無料テーマの定番 |
| Lightning | 無料(Pro版あり) | シンプルで高速・カスタマイズしやすい |
💡 最初は無料テーマのCocoonから始めるのがおすすめです: 機能が豊富でドキュメントも充実しており、ブログ運営の基礎を学ぶには十分です。収益化の見通しが立ってきた段階で有料テーマへの移行を検討しましょう。
4.3 必須プラグインを導入する
ブログ運営に必要なプラグインを導入します。第十一弾・第十二弾でも解説しましたが、ブログ特有のものを中心に改めて整理します。
| カテゴリー | プラグイン名 | 役割 |
|---|---|---|
| SEO | RankMath | SEO対策・サイトマップ自動生成 |
| セキュリティ | Wordfence Security | マルウェアスキャン・ログイン保護 |
| バックアップ | UpdraftPlus | 自動バックアップ |
| キャッシュ | LiteSpeed Cache / WP Super Cache | 表示速度の改善 |
| 画像最適化 | EWWW Image Optimizer | WebP変換・遅延読み込み |
| お問い合わせ | Contact Form 7 | お問い合わせフォーム |
| SNSシェア | SNS Count Cache | シェア数のキャッシュ |
5. ブログの基本ページを作成する
5.1 固定ページとして作成する必須ページ
記事を書き始める前に以下の固定ページを作成します。
| ページ | 必要な理由 |
|---|---|
| プロフィール・About | 読者・Googleに誰が書いているかを伝える(E-E-A-T) |
| プライバシーポリシー | GA4・Cookieを使う場合は必須 |
| お問い合わせ | 読者・企業からの連絡窓口 |
| 免責事項 | アフィリエイト・広告を掲載する場合に必要 |
5.2 プロフィールページの重要性
GoogleはE-E-A-T(経験・専門性・権威性・信頼性)をコンテンツの評価基準として重視しています。プロフィールページを充実させることはSEOにも直接影響します。
プロフィールページに含めるべき内容:
| 項目 | 内容 |
|---|---|
| 名前・顔写真 | 実名でなくてもHN可。顔写真は信頼感を高める |
| 経歴・実績 | ブログテーマに関連した経験・資格 |
| ブログを書く理由 | なぜこのテーマで書いているか |
| SNS・GitHubへのリンク | 外部の信頼性を高める |
5.3 ナビゲーションメニューを設定する
- 「外観」→「メニュー」を開きます。
- 「メニュー名」を入力して「メニューを作成」をクリックします。
- 作成したページ(プロフィール・お問い合わせなど)を追加します。
- 「メニューの位置」でヘッダーナビゲーションに設定します。
6. HTMLとCSSの知識をWordPressに活かす
6.1 テーマのカスタマイズ
これまで学んだHTML・CSSの知識はWordPressのテーマカスタマイズに直結します。
子テーマを使ったCSSのカスタマイズ(第十四弾):
/* 子テーマのstyle.cssに追記する */
/* 本文の最大幅を制限する */
.entry-content {
max-width: 720px;
margin: 0 auto;
line-height: 1.9;
}
/* 見出しのスタイルをカスタマイズ */
.entry-content h2 {
border-left: 4px solid var(--color-accent, #1A5FC0);
padding-left: 16px;
margin: 48px 0 24px;
}
/* コードブロックのスタイル */
.entry-content code {
background: #1e1e2e;
color: #cdd6f4;
padding: 2px 8px;
border-radius: 4px;
font-family: 'Fira Code', monospace;
font-size: 0.9em;
}
6.2 functions.phpを使ったカスタマイズ(第十四弾)
// 子テーマのfunctions.phpに追記する
// 抜粋文字数を変更する
function my_blog_excerpt_length( $length ) {
return 120;
}
add_filter( 'excerpt_length', 'my_blog_excerpt_length' );
// アイキャッチ画像を有効化する
add_theme_support( 'post-thumbnails' );
// カスタムメニューを登録する
function my_blog_menus() {
register_nav_menus( array(
'primary' => 'ヘッダーメニュー',
'footer' => 'フッターメニュー',
) );
}
add_action( 'after_setup_theme', 'my_blog_menus' );
6.3 JavaScriptでインタラクションを追加する(第十六弾)
// 読了時間を自動計算して記事タイトル下に表示する
document.addEventListener( 'DOMContentLoaded', () => {
const content = document.querySelector( '.entry-content' );
if ( ! content ) return;
const text = content.textContent;
const wordCount = text.length;
const readingTime = Math.ceil( wordCount / 500 ); // 1分500文字として計算
const timeEl = document.createElement( 'p' );
timeEl.className = 'reading-time';
timeEl.textContent = `読了時間:約${readingTime}分`;
const title = document.querySelector( '.entry-title' );
if ( title ) {
title.insertAdjacentElement( 'afterend', timeEl );
}
} );
7. SEOを意識した記事の書き方
7.1 記事構成の基本
ブログ記事はSEOと読者の両方を意識した構成で書きましょう。
【記事構成のテンプレート】
タイトル(h1):キーワードを含む・32文字以内
│
├── はじめに(リード文)
│ ・この記事で解決できること
│ ・誰に向けた記事か
│
├── 目次(プラグインで自動生成)
│
├── 本文(h2・h3で構成)
│ ├── h2:大見出し
│ │ ├── h3:小見出し
│ │ └── h3:小見出し
│ └── h2:大見出し
│
└── まとめ
・記事の要点を箇条書き
・次のアクション(関連記事へのリンクなど)
7.2 RankMathでSEO設定をする
記事を投稿する際にRankMathでSEO設定を行います。
| 設定項目 | 内容 |
|---|---|
| フォーカスキーワード | 記事で狙うメインキーワードを入力 |
| SEOタイトル | 検索結果に表示されるタイトル(32文字以内) |
| メタディスクリプション | 検索結果のスニペット(120文字前後) |
| OGP画像 | SNSシェア時のカード画像 |
7.3 内部リンクの設計
記事を書いたら関連する過去記事へのリンクを追加しましょう。内部リンクはSEO・回遊率・離脱率の改善に直結します。
<!-- 記事内での内部リンクの書き方 -->
<p>
WordPressの表示速度については
<a href="/wordpress-speed-optimization/">
第十三弾:表示速度改善完全ガイド
</a>
で詳しく解説しています。
</p>
8. ブログ立ち上げ後の運用チェックリスト
立ち上げ時チェック
✓ パーマリンクを「投稿名」に設定したか
✓ 不要なデフォルトプラグインを削除したか
✓ サンプル記事・コメント・ページを削除したか
✓ 必須プラグイン(SEO・セキュリティ・バックアップ・キャッシュ)を導入したか
✓ プロフィール・プライバシーポリシー・お問い合わせページを作成したか
✓ ナビゲーションメニューを設定したか
✓ RankMathのサイトマップを有効化してSearch Consoleに送信したか
✓ GoogleアナリティクスのトラッキングコードをWordPressに設置したか
✓ SSL(HTTPS)が有効になっているか
✓ Wordfenceのファイアウォールを有効化したか
運用開始後チェック(月次)
✓ WordPress本体・テーマ・プラグインを最新版に更新したか
✓ UpdraftPlusのバックアップが正常に取れているか
✓ Search ConsoleでCore Web VitalsとインデックスエラーをCheck
✓ GA4でユーザー数・人気記事・流入チャネルを確認したか
✓ PageSpeed Insightsでスコアが維持されているか
まとめ
今回はWordPressで本格的なブログを立ち上げる手順を解説しました。ポイントをまとめると:
- ブログのテーマ・ターゲット・収益化の方向性を最初に決めてからWordPressを設置する
- パーマリンクは「投稿名」に設定してから記事を書き始める
- 不要なプラグインを削除してセキュリティリスクと読み込み速度の影響を最小化する
- 必須プラグイン(SEO・セキュリティ・バックアップ・キャッシュ・画像最適化)を導入する
- プロフィール・プライバシーポリシー・お問い合わせの3ページは記事を書く前に作成する
- HTML・CSS・JavaScriptの知識は子テーマのカスタマイズとfunctions.phpでフル活用できる
- RankMathでフォーカスキーワード・SEOタイトル・メタディスクリプションを設定する
次の記事では、WordPressブログで収益化を目指すための具体的な手順を解説します。Googleアドセンスの審査対策・アフィリエイトの始め方・記事の方向性と収益化の関係まで、実践的な内容をお届けします。お楽しみに!
コメント