
色々とった写真をブログに埋め込むのに、一つ一つFC2にアップロードするのが面倒なので、Googleに置いたファイルを直接埋め込むことができないか調べてみました。
Googleドライブのファイルを共有したときに表示される共有リンクをちょっと加工すればできるみたいです。
【共有をするのに使用するURL】
https://drive.google.com/file/d/○○○/view?usp=sharing
※ ○○○ がファイルのIDになるみたい
【埋込みに使用するURL】
https://drive.google.com/uc?export=view&id=○○○
このURLをうまく埋め込むことができればいいはず。
実際に埋め込んでみました
実際には同じこと何回も書きたくないので、下のJavaScriptをテンプレートに埋め込むことにしてます。
=====
<script>
function EmbedGoogleDriveImage(drv_img_id, img_px, direction){
var v_direction ="width";
var v_img_px =120;
var v_tgt_url = 'https://drive.google.com/uc?export=view&id=' + drv_img_id;
if(img_px != null && img_px > 25){
v_img_px = v_img_px;
}
if(direction != null && direction == "H"){
v_direction ="height";
}
document.write('<a href="' + v_tgt_url + '" target="_blank">');
document.write('<img src="' + v_tgt_url + '" ' + v_direction + '="' + v_img_px +'px"></a>');
}
</script>
=====
使うときはこんな感じです。
<script>EmbedGoogleDriveImage("○○○")</script>
=====
【Googleドライブ有効活用】
Googleドライブのファイルを共有したときに表示される共有リンクをちょっと加工すればできるみたいです。
【共有をするのに使用するURL】
https://drive.google.com/file/d/○○○/view?usp=sharing
※ ○○○ がファイルのIDになるみたい
【埋込みに使用するURL】
https://drive.google.com/uc?export=view&id=○○○
このURLをうまく埋め込むことができればいいはず。
実際に埋め込んでみました
実際には同じこと何回も書きたくないので、下のJavaScriptをテンプレートに埋め込むことにしてます。
=====
<script>
function EmbedGoogleDriveImage(drv_img_id, img_px, direction){
var v_direction ="width";
var v_img_px =120;
var v_tgt_url = 'https://drive.google.com/uc?export=view&id=' + drv_img_id;
if(img_px != null && img_px > 25){
v_img_px = v_img_px;
}
if(direction != null && direction == "H"){
v_direction ="height";
}
document.write('<a href="' + v_tgt_url + '" target="_blank">');
document.write('<img src="' + v_tgt_url + '" ' + v_direction + '="' + v_img_px +'px"></a>');
}
</script>
=====
使うときはこんな感じです。
<script>EmbedGoogleDriveImage("○○○")</script>
=====
【Googleドライブ有効活用】

| ホーム |