こんにちは、キジトラのコムギです。
このブログではTHE THORのカスタマイズ方法やプログラミングについてまとめています。
GitHub Pagesで画像が反映されない原因
ローカルでは、以下のように画像のパスを記載していました。
background-image: url(../images/pf-roofroom.jpg);
赤文字の部分が画像のパスです。
GitHubに画像をアップするとこの部分のパスが変わるので、変更する必要があります。
画像を反映させる方法
GitHub Pagesにアップした画像を表示させるには、Github上での正しいパスを記載する必要があります。
アップした画像のパスはGitHub独自の形式に変わるので、そのパスを確認すればOKです。
わかりやすいように順番に解説します。
アップした画像のファイルをクリック
私の場合はjpg画像をアップしたのでこちらをクリックします。
画像の上で右クリック
以下のようにアップした画像が表示されるので、その上で右クリックをします。
Macのタッチパネルの場合は２本指でタップするとメニューが出ます。(わたしの設定かな？)
画像アドレスをコピーする
右クリックするとメニューが出るので、「画像アドレスをコピーする」を選択してコピーします。
これで下準備は完了です。
画像URLのあるファイルをクリック
初めにアップした画像ＵＲＬのコードが記載されているファイルをクリックします。
htmlに記載しているならindex.html、css内に記載しているならstyle.cssが主になるかと思います。
わたしはサイトの背景としてstyle.cssで画像を読み込んでいたので、「style.css」のファイルをクリック。
ファイルを編集して画像アドレスを貼る
変更したら、ページ下部の「Commit changes」をクリックして保存すれば完了です。
それでも画像が反映されない場合
画像パスを正しく入力したはずなのに反映されない場合がありますが、GitHub Pagesは反映に時間がかかります。
アップした直後〜数分は反映されないものと考えてください。
わたしも反映されずに困りましたが、10分後に確認すると反映されていました。
原因を知ってしまえば簡単ですが、初めは慣れないことも多いです。
この記事が役に立った、〇〇について知りたいなどありましたら、お気軽にコメントお待ちしております。