ウェブ

CodePen(コードペン)で画像を取得し表示させる方法【Googleドライブ】

CodePen(コードペン)で画像を取得し表示させる方法

CodePenで自身が指定した画像を表示させるためには、Googleドライブが必要でGoogleドライブに画像をアップロードし、その画像を読み込むといった流れです。

codepen
codepen

Googleドライブを開く

マイドライブ
マイドライブ

Googleドライブ新規ファイルのアップロード画像ファイルをアップロードで画像をドライブにアップロードします。

画像アップロード
画像アップロード

画像の上で右クリックリンクを取得をクリック。

リンクを取得
リンクを取得

制限付きをクリック。

制限付き
制限付き

リンクを知っている全員を選択しクリック。

リンクを知っている全員
リンクを知っている全員

リンクをコピーを選択し完了をクリック。

リンクをコピー
リンクをコピー

ここまでがGoogleドライブでの操作になります。

GoogleドライブのURLを変更する

Googleドライブの画像リンクURLを取得したらメモ帳などに一度張り付けて残しておきます。

ここからCodePen用にURLを変更します。

▪GoogleドライブのURL⇩

https://drive.google.com/file/d/19Z_BMxDckb_AAca7FTl94iHO_OjlSpVI/view?usp=sharing
https://drive.google.com/file/d/(ここのURLを使用します)/view?usp=sharing

▪CodePen用のURL⇩

https://drive.google.com/uc?export=view&id=(ここにGoogleドライブの一部URLを張り付け)

▪上記GoogleドライブのURLだった場合⇩

https://drive.google.com/uc?export=view&id=19Z_BMxDckb_AAca7FTl94iHO_OjlSpVI

CodePen

➡ CodePenのサイト

See the Pen Untitled by pull-design (@design90806871) on CodePen.

CodePenをもっと便利に使う

▪Codepenの始め方と使い方-記事内にコード埋め込みについて

codepen使い方
Codepenの始め方と使い方-記事内にコード埋め込み【無料便利機能】「自分で書いたコードを共有したい」「記事内にコードを埋め込みたい」「コードのプレビューを表示したい」この悩みを解決してくれる便利な機能が揃ったサイトを紹介します。無料会員で自由にコードが書ける「Codepen」ブラウザ上でHTML・CSS・JSのコーディングがプレビュー付きで利用できるサービスで、プレビューがリアルタイムで反映されるのでコードの修正にも使用可能です。...

▪Codepenをもっと便利に使うための設定

more-codepen
Codepenをもっと便利に使うための設定【無料機能】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。子テーマに施したカスタマイズは、親テーマをアップデートしても影響はありません。サイトをカスタマイズする場合は基本子テーマに記述していかなければなりません。そこで必要になってくるのが、JSファイルを子テーマで読み込みです。ブログサイトなどで独自のJSを追加したい場合のファイル構成と追加コードについて解説。...

↓下記本はHTML&CSSをテスト形式で学べる本です。

Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認
Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認

▪Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認
サーティファイWeb利用・技術認定委員会が主催する、「Webクリエイター能力認定試験 HTML5対応版 エキスパート」に対応する「公式テキスト」です。実技問題・知識問題に必要な知識を習得することができるようになっています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA