第2回 のんびり研究所構築日記｜パーマリンクと画像サイズを確認

2026.07.21
この記事は約7分で読めます。

前回は、WordPressへCocoonの親テーマと子テーマをインストールし、記事などに表示される公開名を変更しました。

今回は、記事のURLを決める「パーマリンク」と、WordPressへ画像をアップロードしたときに作成される画像サイズを確認します。

どちらも、記事や画像が増えてから変更すると整理が大変になる可能性があります。

本格的に記事を増やす前に、一度確認しておきましょう。

このシリーズについて

※実際の作業量によって、記事数や各回の内容を変更する場合があります。

パーマリンクとは？

パーマリンクとは、WordPressで作成した投稿や固定ページに割り当てられるURLのことです。

例えば、この記事のURLが次のようになっている場合、赤太字にした部分が記事ごとに設定される部分です。
https://nonbiri-lab.jp/build-02/

この「build-02」のような部分は「スラッグ」と呼ばれます。

パーマリンクとスラッグの違い

パーマリンクは、記事のURL全体を指す言葉です。

スラッグは、そのURLの中にある、記事ごとに設定する文字列を指します。

  • パーマリンク：https://nonbiri-lab.jp/build-02/
  • スラッグ：build-02

パーマリンクの設定画面を開く

WordPressの管理画面へ戻り、左側のメニューから次の順番で進みます。

設定 → パーマリンク設定

パーマリンク設定画面を開くと、投稿のURLをどのような形式にするか選択できます。

パーマリンクの種類を確認する

「共通設定」には、次のような選択肢が表示されています。

  • 基本
  • 日付と投稿名
  • 月と投稿名
  • 数字ベース
  • 投稿名
  • カスタム構造

のんびり研究所では、「投稿名」を使用します。

すでに「投稿名」が選択されている場合は、そのままで大丈夫です。

「投稿名」を使用する理由

「投稿名」を選択すると、記事ごとに設定したスラッグがURLに使用されます。

例えば、第2回の構築日記に「build-02」というスラッグを設定すると、URLは次のようになります。

https://nonbiri-lab.jp/build-02/

日付や記事番号だけのURLと比べて、短く整理しやすいURLにできます。

また、記事のタイトルを後から少し変更しても、スラッグを変更しなければURLはそのまま維持できます。

のんびり研究所のスラッグ方針

記事タイトルは、内容が分かりやすい日本語で付けます。

スラッグは、半角英数字とハイフンを使って、短く分かりやすく設定します。

続き物の記事では、シリーズ名を表す文字と連番を組み合わせます。

  • 第1回：build-01
  • 第2回：build-02
  • 第3回：build-03

設定を保存する

「投稿名」が選択されていることを確認したら、画面の一番下まで進みます。

「変更を保存」をクリックします。

画面上部に「パーマリンク構造を更新しました」と表示されたら、設定は完了です。

すでに記事を公開している場合の注意

パーマリンクの設定や、公開済み記事のスラッグを変更すると、その記事のURLも変わります。

以前のURLをブックマークしている人や、他のサイトに掲載されたリンクから記事を開けなくなる可能性があります。

そのため、パーマリンクはサイトを作り始めた段階で決め、公開後はできるだけ変更しない方が安全です。

公開済み記事のスラッグを確認する

パーマリンクの共通設定を確認したら、前回公開した記事のスラッグも確認してみます。

WordPress管理画面の左側から、次の順番で進みます。

投稿 → 投稿一覧

確認したい記事を開き、サイドメニュー→投稿内の「URL」または「スラッグ」の項目を確認し、必要に応じて書き換えます。初期は「記事タイトル」が入っているはずです。

第1回の記事では、次のスラッグを設定しました。

build-01

今回の第2回には、次のスラッグを設定します。

build-02

スラッグには、日本語ではなく半角英数字を使用します。単語を区切りたい場合は、空白やアンダーバーではなく、半角のハイフン「-」を使用します。

WordPressの画像サイズを確認する

続いて、WordPressへ画像をアップロードしたときに作成される画像サイズを確認します。

WordPressでは、1枚の画像をアップロードすると、元の画像とは別に、表示する場所に応じた複数サイズの画像が自動的に作成されます。

例えば、記事の一覧に表示する小さな画像と、記事本文に表示する大きな画像で、同じ大きさの画像を使用する必要はありません。

小さく表示する場所では小さな画像を使用することで、必要以上に大きな画像を読み込まずに済みます。

メディア設定を開く

WordPress管理画面の左側のメニューから、次の順番で進みます。

設定 → メディア

メディア設定画面には、次の画像サイズを設定する項目があります。

  • サムネイルのサイズ
  • 中サイズ
  • 大サイズ

サムネイルのサイズ

サムネイルは、画像を小さく表示するときに使用される画像サイズです。

設定画面には、「幅」と「高さ」の入力欄があります。

その下には、次のチェック項目があります。

サムネイルを実寸法にトリミングする

この項目を有効にすると、縦長や横長の画像も、指定した幅と高さに合わせて切り抜かれます。

正方形のサムネイルをそろえて表示したい場合には便利ですが、画像の上下や左右の一部が切れる場合があります。

トリミングとは？

トリミングとは、画像の不要な部分を切り取ることです。

元画像の縦横比と、設定したサムネイルの縦横比が違う場合、画像の一部を切り取って指定サイズに合わせます。

中サイズと大サイズ

中サイズと大サイズには、それぞれ「幅の上限」と「高さの上限」があります。

画像は、ここで設定した幅と高さの範囲内に収まるように縮小されます。

元画像よりも大きく引き伸ばすための設定ではありません。

例えば、横幅が大きなスクリーンショットをアップロードした場合、その画像を表示する場所に応じて、中サイズや大サイズを選択できます。

現在の設定値を記録する

設定を変更する前に、現在入力されている数値を確認しておきます。

今回確認した設定は、次のとおりです。

  • サムネイルの幅：［150］px
  • サムネイルの高さ：［150］px
  • 実寸法へのトリミング：［有効］
  • 中サイズの幅の上限：［300］px
  • 中サイズの高さの上限：［300］px
  • 大サイズの幅の上限：［1024］px
  • 大サイズの高さの上限：［1024］px

現時点では、Cocoonでサイトを表示しながら必要な画像サイズを確認していくため、設定値はすぐに変更せず、現在の状態を記録しておきます。

画像サイズは、大きければ必ずよいというものではありません。

大きすぎる画像はファイル容量が増え、ページの表示速度に影響することがあります。

反対に、小さすぎる画像を大きく表示すると、画像がぼやけて見えることがあります。

今後、実際に記事一覧、アイキャッチ画像、記事本文などの表示を確認しながら、必要であれば調整します。

設定変更後にアップロードした画像へ反映されます

メディア設定で画像サイズを変更しても、すでにアップロード済みの画像が自動的に新しいサイズで作り直されるとは限りません。

そのため、画像が増える前に設定を確認しておくことが大切です。

画像の整理方法も決めておく

画像サイズとあわせて、アップロードする画像のファイル名も整理しておきます。

スマートフォンやパソコンで撮影した画像には、次のようなファイル名が付いていることがあります。

  • IMG_1234.jpg
  • Screenshot_20260721.png
  • 名称未設定.png

このままでもアップロードできますが、画像が増えると、何の画像なのか分かりにくくなります。

アップロードする前に、画像の内容が分かる半角英数字のファイル名へ変更しておくと管理しやすくなります。

例えば、パーマリンク設定画面の画像なら、次のような名前にできます。

wordpress-permalink-settings.png

メディア設定画面の画像なら、次のようにできます。

wordpress-media-settings.png

のんびり研究所の画像ファイル名方針

  • 画像の内容が分かる名前にする
  • 半角英数字を使用する
  • 単語の区切りにはハイフンを使用する
  • 個人名やメールアドレスなどをファイル名に入れない
  • スクリーンショット内の個人情報も加工して隠す

今回のまとめ

今回は、パーマリンクと画像サイズの設定を確認しました。

  • パーマリンクには記事のURL構造を設定する
  • のんびり研究所では「投稿名」を使用する
  • スラッグは短い半角英数字で設定する
  • 続き物の記事では「build-01」のように連番を付ける
  • 公開後のパーマリンクやスラッグは、できるだけ変更しない
  • WordPressは画像のアップロード時に複数サイズの画像を作成する
  • 画像サイズは「設定 → メディア」で確認できる
  • 画像ファイル名も、アップロード前に整理する

パーマリンクは、記事が増えてから変更すると、過去の記事へのリンクが切れる原因になる可能性があります。画像サイズも、画像が増えてから変更すると、以前の画像と新しい画像で作成されるサイズが異なる場合があります。

どちらも、サイトを作り始めた段階で一度確認しておくことが大切です。

次回は、お問い合わせフォームを作成する「Contact Form 7」を導入します。