【Web】GitHub PagesのHTMLに画像を表示する(Web勉強記 7.5日目)

投稿日:2020年3月25日
最終更新日:2020年3月25日

Github Pagesに画像を表示したい

今回はGithub Pagesで公開しているおみくじに画像をつけてみる。

 

画像を準備する

画像はなんでも良いが、今年の干支はネズミということで、ドット絵のネズミを描いてみた。これをおみくじに表示する。

次に、github pagesで表示しているhtmlファイルを置いてあるローカルのディレクトリにimagesというディレクトリを作成し、先ほどのネズミの絵をimagesに置く。

 

ちなみにドット絵はEDGEというソフトウェアで描いている。EDGEによるドット絵製作は以下の日記で紹介しているので、興味があればどうぞ。

【Unity】EdgeとUnityでドット絵2Dゲームをつくろう日記

 

HTMLを変更する

つぎに、HTMLを変更する。前回の日記で作成したweb_omikuji_center.htmlをコピーしてweb_omikuji_image.htmlという名前に変更し、内容を以下のように変更した。

変更したのは <p><img src=”images/mouse.png”></p>だけ。相対パスで指定してhtmlと画像ファイルの位置関係を変えなければ、githubにpushしても問題なく画像を表示できる。

あとはgithubにローカルのディレクトリの変更をcommitしてpushするだけ。これで、おみくじに画像を表示することができた。

実際にgithub pagesで公開しているページはこちら。

https://wakkyfree.github.io/

前回同様、index.htmlに画像ありおみくじへのリンクを追加している。web_omikuji_imageをクリックすれば画像ありのおみくじを表示できる。

 

勉強記まとめ

今までの勉強記は以下にまとめています。初学者の目線で色々つくったり、試してみたりしてるので、興味があればどうぞ。

【Web】HTML/CSS/JavaScriptでおみくじをつくろう日記


投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください