less than 1 minute read

github pageをブログに使う場合の画像の取り扱い

githubのレポジトリはあまりサイズを大きくできない(公式の推奨で1GB)ので,このブログのメインコンテンツである画像はレポジトリに含めることができない.そこでテストとして画像はgoogle photoに入れて,その画像を埋め込む方法を試す.

実際に埋め込んでみる

まずgoogle photoにブログで使いたい画像をアップロードして,「共有」メニューからURLを取得する.このurlをそのままはるだけではダメで,どうも埋め込み用のURLに変換する必要があるらしい.今回は試しにlabnol.orgというサイトを見つけたのでここで試してみる.取得したurlを貼り付けるだけで埋め込み用のurlに変換してくれる.ただし,urlの最後に=w2400とついていて,これはpt単位の横幅(width)の指定なので自分の好きな数字に変更するか無くしてしまってもよい.

あとは変換したurlを通常のmarkdownの画像埋め込みの要領で貼り付ければ完成.

![キャプション](画像url)

または,通常のhtml形式のコードでも大丈夫.

<a> <img src="画像url" caption="This is a caption" /> </a>

以下が実際に埋め込んだ画像を表示したもの.

(caption) マークダウンによる埋め込み

jekyllのincludeを使う場合

jekyllではincludeコマンドを利用して画像を埋め込むこともできる.ちょっとしたショートカットになっていて,多少記述量を減らせる.(参考,minimal mistakesの解説

 {% include figure image_path="画像url" alt="this is a placeholder image" caption="This is a figure caption." %} 

この方法だと幅の調整なども自動で行ってくれるので,特段理由がなければincludeを使う方法が良さそうです.

Comments