WordPress関連の初期設定

WordPress でブログを始めて数記事投稿してみて、少し操作にも慣れてきました。
そろそろ初期設定をしっかり整えておこうと思い、

Copilot に相談しながら環境を見直してみました。
その結果、以下の6つを設定しておくと良いと分かったので、

自分用の備忘録としてまとめておきます。

パーマリンク設定

パーマリンクは、WordPress の記事URLの形式を決める設定です。

初期状態では「日付＋投稿名」になっていましたが、これを「投稿名」のみに変更しました。

理由としては、日付があると古くなった時、読まれなくなるのを防ぐ意味もありますし、

仮に記事を再編集し直しても、どうもＵＲＬの日付が変わらないみたいなんですよね…

編集し直して新しい内容にしても日付がそのままだとわかりづらいと思ったので変えました。

後々記事が多くなった時に変更しずらい＋管理しずらいので変えた感じです

投稿名に変更したパーマリンク設定画面
設定＞パーマリンクの設定後の画像です。

ログインURL変更

プラグイン「WPS Hide Login」を導入しました。

このプラグインは、WordPressのログインURLを自由に変更できるものです。

私はこのプラグインを使って、初期設定の「login」から別のURLに変更しました。

プラグインとは項目を分けて紹介しているのは、

Copailotによるとこれは、「最低限のセキュリティ設定」らしいです。

デフォルト状態だとURLを推測されやすいとのことです。

初期設定のままだとボットによる不正アクセスの対象にされてしまうかもしれないが、

ログインURLの変更するだけで、ボットの９割は防げるといわれてるとのことです。

軽くて安全、設定も簡単ということなので導入してみました。

WordPress のプラグイン追加画面で WPS Hide Login を検索した結果
プラグイン＞プラグイン追加＞WPS Hide Loginで検索。このプラグインは優先順位が高いようです。

プラグイン導入

以下のリストは、「WPS Hide Login」以外に追加したプラグイン一覧です。

  • Disable XML-RPC（XML-RPC の無効化）
  • WP Multibyte Patch（日本語サイトの安定化）
  • XML Sitemap（検索エンジン向け）
  • Limit Login Attempts Reloaded（ログイン試行制限）
  • WP-Optimize（データベースの掃除）

WordPress のプラグイン追加画面で Disable XML-RPC を検索した結果

プラグイン＞プラグイン追加＞Disable XML-RPCで検索。XML-RPCは使わない人にとってはセキュリティホールになり得るとのこと。

WordPress のプラグイン追加画面で WP Multibyte Patchを検索した結果
プラグイン＞プラグイン追加＞WP Multibyte Patchで検索。文字化けを防いでくれたり、パーマリンクの挙動を安定化してくれるようです

WordPress のプラグイン追加画面で XML Sitemapを検索した結果
プラグイン＞プラグイン追加＞XML Sitemapで検索。検索エンジンにサイト構造を伝えるためのサイトマップを自動生成してくれるプラグインです。

WordPress のプラグイン追加画面で Limit Login Attempts Reloadedを検索した結果
プラグイン＞プラグイン追加＞Limit Login Attempts Reloadedで検索。ログイン周りの防御をまとめて強化してくれるプラグインです。

WordPress のプラグイン追加画面で WP-Optimizeを検索した結果

プラグイン＞プラグイン追加＞WP-Optimizeで検索。データベースの掃除でサイトを軽く保つために導入しました。

テーマの基本調整（追加CSSを含む）

初期設定のまま書いてきたのですが、

「そもそも見やすい記事ってどう書くんだろう…？」っと思ったので、

Copailotに相談しました。

すると、

  • 見出し（H2/H3）のデザイン調整
  • 本文フォントの調整（読みやすさの要）
  • スマホ表示の最適化（読者の7〜8割がスマホ）

この３つを勧められました。

ようするに、文字の大きさ・幅・色などを統一して、読みやすさを整えるということらしいです。

さっそく設定してみようとしたのですが…

Cocoon Child の設定

私が使っているテーマはこのCocoon Childです。…Cocoonを使ってるもんだとばかり…

初期設定から特に何も変更してなかったと思うので、私が初期にこれを選択してたみたいですね。

Copailotによると、カスタマイズ性や安全性を考えると子テーマのほうが正解らしいので、

このまま Cocoon Child を使っていきます。

見出しの幅や文字サイズを調整しようとしたのですが、

Cocoon 設定＞全体 では色は変えられるものの、

肝心の見出しデザインや文字サイズを調整する項目が見当たりませんでした。

そこで再び Copilot に相談したところ…

追加CSSでの微調整

まさかの追加ＣＳＳでの力業解決を勧められました。

ただ、やってみると意外と面白くて、見た目も一気に整うので採用することにしました。

このあと、実際に使った CSS コードと設定画面の画像を載せていきます。

追加CSS（スタイルシート）に見出しデザインのコードを追加しているところ
外観＞カスタマイズ＞追加CSS　左側に表示されている追加CSS（スタイルシート）にコードを書き込みました

画像左側の追加ＣＳＳに書いたコードは以下のとうりです。Copailotが頑張ってくれました。

見出し・フォント・スマホ向けにデザインを整えるための CSS です。

Cocoon の設定だけでは調整できなかった部分を追加CSSで補っています。

/* ============================
   H2（大見出し） 左に太線
   ============================ */
.entry-content h2 {
  border-left: 4px solid #007acc; /* 太線の色（青系） */
  padding-left: 12px;
  font-size: 22px;
  font-weight: 600;
  margin-top: 2.2em;
  margin-bottom: 1.2em;
  color: #333;
}

/* ============================
   H3（中見出し） 細い左線
   ============================ */
.entry-content h3 {
  border-left: 2px solid #999; /* 細い線（薄いグレー） */
  padding-left: 10px;
  font-size: 18px;
  font-weight: 500;
  margin-top: 1.8em;
  margin-bottom: 1em;
  color: #444;
}


/* ============================
   本文フォントの最適化
   ============================ */
.entry-content {
  font-size: 17px;        /* 読みやすい標準サイズ */
  line-height: 1.75;      /* 行間を広めにして読みやすく */
  color: #333;            /* 真っ黒より優しい濃いグレー */
  font-weight: 400;       /* 細すぎず太すぎず */
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* スマホ向け（横幅480px以下） */
@media screen and (max-width: 480px) {
  .entry-content {
    font-size: 16.5px;    /* スマホは少しだけ小さめが読みやすい */
    line-height: 1.8;     /* 行間はさらに広め */
  }
}


/* ============================
   スマホ最適化（画像のはみ出し防止）
   ============================ */
.entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.2em auto;
}

/* ============================
   段落の余白調整（スマホで詰まらないように）
   ============================ */
.entry-content p {
  margin-bottom: 1.2em;
}

/* ============================
   箇条書きの行間調整
   ============================ */
.entry-content li {
  margin-bottom: 0.6em;
  line-height: 1.7;
}

迷った部分

追加ＣＳＳの話をしてきましたが…Copailotに当初相談した際に言われたのは、

「Cocoon 設定＞全体 」で設定できると説明されてました。ところがそれがなぜか見当たらなかった。

なので、仕方なくこの追加ＣＳＳを入れる話になったわけです。

私が見落としてただけで、どこかに設定できる箇所があったかもしれないんですよね…

あくまでやりたかったことは、見出し・フォント・スマホ向けにデザインを整えることですから

私は追加ＣＳＳで整えましたが、楽に設定できるならそちらのがいいと思ってます。

Google系の設定

テーマの調整が終わったので、次は Google 系の設定に進みます

ブログを作っただけでは検索に出ないので、Search Console と GA4 の設定は必須らしい…

ということで、ここも Copilot に相談しながら進めました。

Search Console の設定

Search Console の設定は、URL プレフィックスでサイトの URL を登録し、

確認方法として HTML タグを選びました。

発行されたタグを Cocoon の「ヘッド用コード」に貼り付けるだけで、

Google がサイトの持ち主だと認識してくれます。

所有権の確認が終わったら、

Search Console のサイトマップ欄に sitemap.xml を送信しました。

Cocoon が自動で作ってくれるので、特別な設定は不要です。

最後に「所有権を証明しました」という確認画面が表示されれば、設定は完了です。

Search Console で HTML タグによる所有権確認が完了した画面
手続き完了通知

Google Analytics 4（GA4）の設定

アクセス解析のために、Google Analytics 4（GA4）の設定も行いました。

計測 ID を発行して、Cocoon 設定＞アクセス解析・認証のGoogle Analytics設定にある、

測定IDに貼り付けるだけで計測が始まります。

WordPress Cocoon のアクセス解析設定画面。Google Analytics 4 の測定 ID を入力する欄がある
見切れてますが、Google Analytics設定の↓にスクロールしたところにGA4測定IDの乱があります。そこに計測IDを張ります

画像の最適化（Squoosh導入）

今まではスクリーンショットをそのまま載せていましたが、

サイトの負荷軽減を考えて Squoosh（スクワッシュ）を導入することにしました。

使い方はとてもシンプルで、画像をドラッグ＆ドロップして品質を調整するだけです。

私は「品質75％・横幅900px」を基本ルールにして、

見た目を保ちながら軽量化するようにしています。

Squoosh でブログ用画像を品質75％・横幅900pxに調整している画面
スクワッシュで品質75％・横幅９００pxの調整画面です

代替テキスト（ALTテキスト）

検索エンジン用にALTテキストを書くようにしていきます。

誰かに見られるわけでもないようなので、淡々と「画像が何を示しているか」

だけを書くのが最適とのことです。

画像右側にあるのが代替テキスト（ALTテキスト）。スクワッシュの説明の際に使った画像の説明が書いてあります。

まとめ

今回やった6つの初期設定

  • パーマリンク設定
    記事URLの基礎を整えて、後から困らないように固定化。
  • ログインURL変更
    セキュリティ対策として、WordPress の入口をカスタム化。
  • プラグイン導入
    必要最低限のものだけ入れて、軽さと安全性を両立。
  • テーマの基本調整（追加CSS含む）
    Cocoon のデザインを自分好みに整えつつ、読みやすさを確保。
  • Google 系の設定
    Search Console と GA4 を設定して、検索エンジンとの接続を完了。
  • 画像の最適化（Squoosh導入）
    品質75％・横幅900pxを基本ルールにして、表示速度と画質のバランスを調整。

ブログの初期設定として必要な部分を、

Copilot に相談しながらなんとか整えることができました。

パーマリンクやログインURLの変更から、

テーマ調整、Google 関連の設定、画像の最適化まで、一通りの土台はこれで完成です。

正直、思っていたより時間がかかって苦戦しましたが、

そのぶんブログの仕組みが少しずつ分かってきた気がします。

ここからは記事づくりに集中して、少しずつ育てていこうと思います。

コメント

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