WordPressで本格的なブログを立ち上げる完全ガイド|HTML・CSS・JavaScriptの知識を活かして実践的なサイト開発に挑戦する


はじめに

前回の記事ではポートフォリオサイト公開前の最終チェックリストをコード品質・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をインストールしたら記事を書く前に以下の設定を必ず行います。

① パーマリンクの設定

  1. 「設定」→「パーマリンク」を開きます。
  2. **「投稿名」**を選択します。
  3. 「変更を保存」をクリックします。
設定後のURL例:
https://yourdomain.com/how-to-use-wordpress/

💡 パーマリンクは最初に必ず設定しましょう: 記事を投稿した後にパーマリンクを変更するとURLが変わりSEO評価がリセットされます。最初に必ず設定してください。

② 不要なプラグインを削除する

WordPressにはデフォルトでいくつかのプラグインが入っています。使わないプラグインは削除してセキュリティリスクと読み込み速度への影響を最小限にします。

削除してよいデフォルトプラグインの例:

プラグイン名理由
Hello Dollyランダムな歌詞を表示するだけのプラグイン
WP Multibyte Patch日本語環境では不要な場合が多い(要確認)

③ サンプル記事・コメントを削除する

  1. 「投稿」→「投稿一覧」でサンプル記事「Hello world!」を削除します。
  2. 「コメント」でサンプルコメントを削除します。
  3. 「固定ページ」でサンプルページを削除します。

4. テーマを選んで設定する

4.1 ブログ向けテーマの選び方

ブログ用テーマはポートフォリオサイト用とは求められる機能が異なります。

観点内容
表示速度記事数が増えても重くならないか
カテゴリー・タグの表示ブログらしい一覧ページが用意されているか
目次の自動生成長い記事に目次が自動で付くか
SNSシェアボタン記事にシェアボタンが付いているか
アドセンス・アフィリエイト対応広告を貼りやすい構造になっているか

4.2 国内ブログ向けテーマの定番

テーマ名料金特徴
SWELL17,600円(買い切り)国内ブロガーに圧倒的人気・Gutenberg完全対応
AFFINGER614,800円(買い切り)アフィリエイトに特化した機能が豊富
Cocoon無料機能が豊富な無料テーマの定番
Lightning無料(Pro版あり)シンプルで高速・カスタマイズしやすい

💡 最初は無料テーマのCocoonから始めるのがおすすめです: 機能が豊富でドキュメントも充実しており、ブログ運営の基礎を学ぶには十分です。収益化の見通しが立ってきた段階で有料テーマへの移行を検討しましょう。

4.3 必須プラグインを導入する

ブログ運営に必要なプラグインを導入します。第十一弾・第十二弾でも解説しましたが、ブログ特有のものを中心に改めて整理します。

カテゴリープラグイン名役割
SEORankMathSEO対策・サイトマップ自動生成
セキュリティWordfence Securityマルウェアスキャン・ログイン保護
バックアップUpdraftPlus自動バックアップ
キャッシュLiteSpeed Cache / WP Super Cache表示速度の改善
画像最適化EWWW Image OptimizerWebP変換・遅延読み込み
お問い合わせ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 ナビゲーションメニューを設定する

  1. 「外観」→「メニュー」を開きます。
  2. 「メニュー名」を入力して「メニューを作成」をクリックします。
  3. 作成したページ(プロフィール・お問い合わせなど)を追加します。
  4. 「メニューの位置」でヘッダーナビゲーションに設定します。

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アドセンスの審査対策・アフィリエイトの始め方・記事の方向性と収益化の関係まで、実践的な内容をお届けします。お楽しみに!

コメント

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