画像パス・リンク・スマホ表示を確認する

このページでは、記事を追加したあとに確認したい画像パス、リンク、スマホ表示について説明します。画像が表示されない、リンク先へ移動できない、スマホで横にはみ出すといったミスを防ぐための確認です。

追加後の確認

記事を追加したら、本文だけでなくリンクや画像も確認します。特にファイル名の間違いは、画像が表示されない原因になりやすいです。

記事一覧にリンクを追加したら、必ずクリックして確認します。

確認するポイントは以下です。

たとえば、HTMLに以下のように書いた場合、

<a href="chatgpt-beginner-screen-guide.html">記事を読む</a>

実際に同じ場所に、

chatgpt-beginner-screen-guide.html

というファイルが存在していないと、リンク切れになります。

リンクは、書いただけで安心せず、必ずブラウザでクリックして確認してください。

リンク確認は、ブログ化でとても大切です。記事ページを増やしても、読者がそこへ移動できなければ、記事がないのと同じ状態になってしまいます。

ブログはパソコンだけでなく、スマホで読まれることもあります。

そのため、新しい記事を追加したら、スマホ表示も確認してください。

確認するポイントは以下です。

画像を使っている場合は、CSSで以下のようにしておくと安全です。

img {
  max-width: 100%;
  height: auto;
}

記事カードが横並びの場合は、スマホでは縦並びになるように調整してください。

スマホ表示では、パソコンでは問題なく見えていた画像やカードが、横にはみ出すことがあります。記事を追加したあとは、必ず画面幅を小さくして確認してください。

画像が表示されない場合は、画像ファイル本体があるか、保存場所が合っているか、HTMLの src と画像の保存場所が一致しているかを確認します。

ファイル名、拡張子、大文字と小文字の違いも原因になりやすいです。書いただけで安心せず、実際にブラウザで表示を確認してください。

記事を増やしたあとは、以下を確認してください。