codepen無料会員の状態でどうにか画像を使用する方法ないかと思い、探してみた方法を備忘用に記載します！
方法
- 対象の画像をGoogleドライブにアップロード
- 対象の画像を右クリックし、「リンクを取得」から共有設定
- 画像のパスをコピーし、codepen上で使用できるパスに編集
- 3で作成したパスをcodepenで使用
対象の画像をGoogleドライブにアップロード
googleドライブを開き、左上の＋マーク押下して「ファイルのアップロード」で指定の画像をアップロードする
今回はこちらのフリーの画像を使用
対象の画像を右クリックし、「リンクを取得」から共有設定
アップロードした画像を右クリック→「リンクを取得」を押下する
以下のようなポップアップが表示されるので「制限付き」と記載あるプルダウンメニューを押下して、「リンクを知っている全員」に変更する。
そうするとこのような表示になる
画像のパスをコピーし、codepen上で使用できるパスに編集
「リンクをコピー」押下でリンクを取得する
コピーしたパス：
https://drive.google.com/file/d/16utnSNWKpwoAr2y_Q5nstA5C0N08jk0u/view?usp=sharing
上記で取得したパスのうち、16utnSNWKpwoAr2y_Q5nstA5C0N08jk0uの部分を以下の赤文字部分にコピーする
https://drive.google.com/uc?export=view&id=コピー箇所
編集したパスがこちら
https://drive.google.com/uc?export=view&id=16utnSNWKpwoAr2y_Q5nstA5C0N08jk0u
3で作成したパスをcodepenで使用
上記パスをcodepenのurlの記述部分に記載すると、画像が表示される
↓完成品
See the Pen
by Seiya Takahashi (@takasei)
on CodePen.
終わり
ちなみに以下のようにWordPressに直接画像を添付することも可能でした。
読んで頂きありがとうございました！
コメント