ここでは、WDの記事内の画像の取り扱い。具体的には、記事に挿入して表示する画像の置き場所と置き方について解説しています。
事前インプット
画像サイズとアスペクト比
画像サイズは、1600px × 1131pxにリサイズしています。これは、Retina対応サイズ（高精細表示用）です。。
アスペクト比は、白銀比（1:√2 ≈ 1:1.414）を維持（1600px × 1131px）してください。
なお、これまでの記事内では、1500px ✕ 1361pxや1920px ✕ 1538pxなどのサイズが混在していますが、これはこのままで、今後は、1600px × 1131pxで統一してください。なお、これまでの画像もアスペクト比は、白銀比（1:√2 ≈ 1:1.414）で維持されています。
画像の置き場所について
WordPressのメディア内に置いて（アップロードして)ください。
2010年から2021年分までは、wayfaring.jp/b/wp-admin/upload.php にアップロードしていましたが、2022年分からは、wayfaring.jp/c/wp-admin/upload.phpにアップロードしてください。
事前準備
Captionタグとイメージタグが用意された記事のフォーマット
下記のフォーマットをダウンロードしてください。
フォーマットは、Visual Studio Codeで編集していきます。
WD記事フォーマット◯2025.09.17更新
さらに詳しく
フォーマットのファイル名は、『149-v1-202220101.html』となっています。
149-v1-202220101.html・・・〝149〟は記事の番号です。制作する記事の番号に合わせて変更してお使いください。
149-v1-202220101.html・・・〝v1〟は記事のバージョンです。制作した記事の更新回数に合わせて変更してお使いください。
149-v1-202220101.html・・・〝202220101〟は旅に出た日付けです。同時に記事の公開日になります。旅に出た日、記事の公開日に合わせて変更してお使いください。
このフォーマット『149-v1-202220101.html』の場合だと、記事の番号は、〝149〟で、バージョンは〝v1〟、旅に出た日・記事の公開日は、〝202220101〟で、2022年1月1日になります。この日は神奈川県の川崎大師に初詣に出かけた日です。
取り組み
1.画像素材が置いてある場所を確認して画像をダウンロード
下記の〝202504wd管理シート〟の【ReName済み画像URL▶WPのメディアへ】の欄に貼り付けてあるGoogle Photo Albumの画像をダウンロードしてください。
202504wd管理シート◯2025.09.18更新
画像の整理
画像は、AdobeのLightroomクラシックで半分自動でリサイズ、解像度の調整を行っています。
そのため、重複しているものや不適切な画像も混ざり込んでいる可能性があります。
そこで、同じような画角の画像や他人の顔がハッキリ写り込んでいる画像など、不要だと思われる画像を取り除いておきます。
画像のアップロード
ダウンロードした画像をWordPressのメディアにアップロードします。
2022年分（No.149）からは、wayfaring.jp/c/wp-admin/upload.phpにアップロードしてください。
エディターでファイルを開く
エディター（Visual Studio Code）を開き、Captionタグとイメージタグが用意された記事のフォーマットを開き、ファイル名をこれから編集するコンテンツに合わせておきます。
アップロードした画像の配置
メディアからアップロードした画像を表示させます。
画像のURLをコピーして、imgタグのsrcに貼り付けていきます。
ココに注意
ステージングで限定公開して検証
画像の貼り付けが完了したら、ステージングの該当の記事（#149であれば、#149の記事）にて限定公開して画像表示をチェック
ココに注意
よくありがちなのが、画像を〝img src="" 〟ではなく、〝alt=""〟などに貼り付けてしまっていて、表示されないケース。
同じ画像を連続して並べているケースなどがあるので、ここでチェックして修正しておきます。
altタグとCaptionの挿入
この画像は何の画像なのか？が分かるように画像のaltタグ（alt=""）とCaptionに画像のタイトル、説明を入れていきます。
挿入箇所は下記の2箇所です。
alt="◯◯"
/>◯◯[/caption]
なお、◯◯は画像のタイトル、説明は同じで構いません。
完成形
下記内容をチェック
- 画像はWordPressのメディアにアップロードされたものを配置しているか？
- アップロードしたWordPressは指定されたものか？
- 重複した画像や不適切な画像は入れていないか？
- 画像は時系列で並んでいるか？
- altタグとCaptionの挿入は出来ているか？
以上が、3.wd画像の配置手順です。