VuePressで作成したページに画像・動画を埋め込む
動画を埋め込むのに少し苦労したのでやり方を残しておきます。
画像
画像については情報がたくさんあるので書く必要がない気もしますが一応書いておきます。
/docs/.vuepress/publicに画像を入れておけば参照できます。たとえば、publicにhoge.jpgがある場合はmarkdownでは以下のように書けば良いです。
public内にフォルダを作った場合は、たとえばpublic/piyo/huga.jpgを埋め込みたい場合は、
とすれば良いです。
動画
動画はGoogle DriveにUploadし、そこから埋め込み用のリンクを取得しました。リンクの取得方法は見ればわかるような気がしますが、たとえば以下のページでも説明されています。ファイル共有のリンクとは別なので注意が必要です。
ちなみに、Google Driveから共有するとそのアカウントの名前が見えるので、ハンドルネームを使っている人は誤って本名を晒してしまわないように気をつけましょう。
さて、このままだと動画のサイズが微妙なので、CSSを書いていい感じにレスポンシブにしました。どこにCSSファイルを置けば良いのかについてですが、/docs/.vuepress/stylesを作成すると、そこに置いたindex.stylとpalette.stylが読まれるようです。この辺については以下を参照すると良いです。
ちなみに.stylというのはCSSメタ言語らしいですが、CSSをそのまま書いても動くのでとりあえずはあまり気にしなくて良いと思います。
index.stylとpalette.stylの違いについては、以下を読むとわかる気がします。
具体的なCSSのコードについては以下のページを参考にしました。
この記事が気に入ったらサポートをしてみませんか？