README 画像挿入
Qiita記事では多くのREADMEについての画像の挿入の手順を解説している記事があります。
今回私は、上記記事でのやり方とは違った、googleの拡張機能を使用した画像作成・READMEに画像挿入までの手順を解説します！！
というのも、閲覧記事で参考になったものは多くありましたが、googleの拡張機能を使用した画像挿入についての記事は、調べたところでは見当たらなかったので、
自身で挿入から、解決まで行いました。
ご参考までにしていただけたら幸いです。
なぜ他記事を参考にしなかったか
今回、自身で作成したポートフォリオでは、トップページだけでもかなり下にスクロールして全体像が見えるという、課題がありました。
通常のスクリーンショットでは、一画面に収まりせんでした。
gif画像でもgyazoを使用して全体を撮影することも実行しましたが、
撮影秒数が決められたなか全てを撮影するのは困難且、見にくい画像となってしまいました。
そこでgoogle拡張機能の「Awesome Screenshot」を使用し、全体を撮影できるようにしました。
Awesome Screenshot
googleの検索で「Awesome Screenshot 拡張機能」と検索していただいたらでききます。
インストールを行ったら順位完了です！
Awesome Screenshotではフルページ画像がとる事ができ、非常に使い勝手が便利な拡張機能となっています。
画像撮影手順
インストールしたAwesome Screenshotを撮影したいHPでクリックします。
1.クリック後上部バーで「レコード」「キャプチャ」の選択蘭があるので、「キャプチャ」をクリック
2.「キャプチャ」をクリックしたら、「フルページ」をクリック
3.「フルページ」をクリック後、自動でページを撮影できます
4.撮影した画像をダウンロードして完了
非常に簡単な手順でフルページの撮影ができるのでおすすめです！！
READMEに画像情報記載
ダウンロードした画像を、自身の開発中コードのディレクトリに挿入します。
※画像専用のディレクトリを作成しておくことをおすすめします
私の場合、ダウンロードした画像を
public/imagesディレクトリに格納しています。
後は、格納した画像をREADMEに記述するだけで画像挿入ができます。
<img src="public/images/画像名">
まとめ
非常に簡単に且フルページでの画像挿入ができるので、スクリーンショットで何枚も画像をとる手間を省けます！！
今回掲載した内容は他のqiita記事には調べた限りなかった為、
共有させていただきます！！
issueを利用した画像挿入の仕方もあるので、その際は他の記事にも乗っているのでそちら参考にしていただけたらと思います！！
宜しくお願いします。