ワードプレスでGoogleフォトの写真を使う際の注意点&便利ツール

どうも、デジサンです!

このブログはワードプレス(WordPress)という機能を使って書いています。

昨今のブログライターは、ワードプレスを使用しているという人が多いのではないでしょうか。

今回はちょっと、自分が失敗から得た教訓や、そこから作ってみた便利ツールを紹介してみようと思います。

 

ワードプレスでGoogleフォトの写真を使う

「Googleフォト」、パソコンやスマホを使う人で、恐らくご存知ない方はほとんどいないと思いますが、ざっくり説明すると、Google先生が提供して下さっている、オンラインで写真(動画も)を保存するサービスのようなものです。

そういったサービスはいくつか存在するんですが、その中でGoogleフォトが異彩を放っているのは、「容量が無限」という点!

他のサービスだと、初期容量は数ギガで、追加したければお金を払うか、友達に紹介して登録してもらってねーというシステムになっています。

Googleフォトでは、使用料は当然無料であり、特に何かの条件を達成する必要もなく、最初から「容量無限になっています。これは凄まじいことだと思います。

※Googleフォトは、「容量無制限の場合は画像が圧縮される」と断りがありますが、圧縮されても画質が目に見えて変わるような事はほとんどありません。

 

ワードプレスでブログを書いている人は、記事の中に画像や写真を入れる人も多いと思いますが、レンタルしているサーバーには容量の限界があります。

サーバ容量を何百ギガも借りている人はそうそう逼迫しないと思いますが、低料金のライト系プランだと、重めの画像などをバンバンアップロードしていると、いつかは限界がきてしまいます。

僕はそれが嫌だったので、ブログに写真を載せる際は、容量無限のGoogleフォトから掲載するようにしています。

今回はそのやり方と、やる時の注意点を書いてみます。


共有アルバムを作ろう

Googleフォトは、ただアップロードしただけでは写真を公開することはできません。

画像からURLを取得して、ワードプレスで記事中に挿入する事はできますが、そのままではGoogleフォトにログインしている本人しか写真を見ることができず、他のお客さんからは画像が見えない状態になってしまいます。

僕もこれで一度失敗しました。

 

そこでどうするかというと、共有アルバムを作ります。

共有アルバムに格納してある写真は、フォトにログインしている本人でなくても、写真のURLを知っていればアクセスすることができます。

共有アルバムの作り方は以下です。

共有したい写真を選択するか、左上のチェックを入れます。

 

その状態で、メニューから「新規共有アルバム」を選択。

 

アルバムが作成されますので、分かりやすい名前を付けましょう。僕は「ブログ用」という名前にしています。

以上です。とっても簡単です。

一度共有アルバムを作ったら、今後はそこに追加していくだけです。

 

共有アルバムから載せたい写真のURLを取得

共有アルバムに写真が入っていれば、それはもう公開できる状態になっています。

次は、写真のURLを取得して、ワードプレスに載せる方法を紹介します。

作成した共有アルバムの、載せたい写真を選択します。

写真の上で右クリックし、Chromeブラウザを使っている場合は、「画像アドレスをコピー」を選択。これで写真のURLがコピーされます。

 

InternetExplorerを使っている場合は、写真を右クリックし、「プロパティ」からアドレス(URL)をコピーしましょう。

 

ワードプレスの記事投稿画面から、「メディアを追加」ボタンを押して・・・

 

「URLから挿入」を選択し、コピーしたURLを貼り付けます。

 

これで、記事中にGoogleフォトの写真を挿入できました!

 

ただ、ここでまた注意点があります!

 

写真のサイズに注意!

さきほどの手順でコピーしたURLを、メモ帳などに貼って、ちょっとよく見てみましょうか。

https://lh3.googleusercontent.com/C8f(中略)zg=w491-h368-no

GoogleフォトからコピーしたURLはびっくりするくらい長いですが、これはGoogle先生が一枚の写真から他の写真のURLを類推できないように複雑にしてくれているんだと思います。

今回着目して頂きたいのは、赤字にしてある末尾の部分!

w491-h368

GUIのシステムやCGグラフィックなどに触れた人ならすぐ分かると思いますが、

w:width(幅)

h:height(高さ)

を意味しています。

つまりこの数字は、写真のサイズを意味しているんですね!

 

僕はここでも一度、失敗しました。どんな失敗かというと・・・

普段とは違うパソコンで記事を書いている時、Googleフォトを表示しているウィンドウを、画面の省スペースのためにかなり小さくしていたんですね。

その状態で、前述の手順で写真を表示してURLを取得すると、なんとGoogleフォトは、「今表示しているサイズのURL」を渡してくるんですね!

記事を公開した後に確認して、なんで写真が小さいのか分からずに、しばらく悩んでしまいました。

つまり、小さいウィンドウで表示した写真からURLを取ってブログに載せると、小さいまま表示されるということ。

これには驚きました。

試しにGoogleフォトのウィンドウサイズを変えて写真のURLを取り直すと、やはり末尾の「w」と「h」の数字が変わるんです。

 

「じゃあ、せっかく高解像度の綺麗な写真を撮ったのに、画面の最大サイズまでしか載せられないのかーい!」

と思った人は、いないとは思いますがもしいたら、以下を見て下さい。

 

URLのサイズは変えられます

試しに、上の手順でGoogleフォトの写真から取得したURLの、「w」と「h」の数字を書き換えて表示させてみました。

まあ当然ではあるのですが、サイズが変わります!

w63-h47

w126-h94

w252-h188

 

リクエストするURLによって、取得する写真のサイズを変えられるということです!すごい!

Googleフォトの「情報」から、元写真のサイズを見ることができますが、最大でその数字までなら画質を落とさずに表示させる事が可能です。

ただ・・・

「URLを取得して、その中の数字部分をいちいち書き換えるのは面倒くさい!」

ですよね。

 

なので、僕はエクセルでこんなものを作りました。

 

・リンクで別窓に表示するときの幅・高さ
・記事中に表示するときの幅・高さ

を指定しておき、写真のURLを貼り付ければ、URL中のサイズから縦写真なのか横写真なのかを判断し、指定しておいたサイズで表示するHTMLを自動で生成します。

リンクなしで画像だけ表示するか、記事中の画像をリンクにしてクリックしたときに別窓で大きく表示するか、どちらのHTMLも生成するので、好きな方を選べます。

これをコピーして、ワードプレスの「テキスト」編集に貼り付けるだけ!

 

使ってみたいという方は、下のリンクからダウンロードしてください。

CreatePhotoHtml.xlsx

GoogleフォトのURLから画像掲載HTMLを生成するツール

使い方を詳細に紹介していきます。

ちなみに、xlsxという拡張子のファイルなので、Excel2007以降のOfficeソフトが必要になります。

標準のWindowsPCには入っていると思いますが、Officeがない方やスマホでしか投稿しない方は、すみません、スルーしてください・・・

(それでもどうしても使いたいという奇特な方が万が一いましたら、Googleスプレッドシートという無料ブラウザサービスにインポートすることで使えますが、その紹介は割愛)

 

①まず、以下の赤枠の位置に、デフォルトのサイズを指定しておいてください。

お使いのスマホやデジカメの設定によってサイズや縦横比は違うので、適切な値を入れて下さいね。

ちなみに僕は、スマホで撮影する画像サイズが「w4160×h3120」なので、Link(リンク先の画像サイズ)にはその半分の値を入れて、View(記事中に表示する画像サイズ)には元画像の0.15倍の値を設定しています。

一度設定すれば、カメラの縦横比を変えない限りはそのまま使えます。

 

②前述の手順でGoogleフォトの共有アルバムから画像のURLを取得し、以下の赤枠の位置に貼り付けます。

 

③以下の赤枠の位置にHTMLが生成されますので、Ctrl+Cキーでコピーします。
リンク無しの場合は青枠部分からコピーしてください。

 

④ワードプレスの編集モードを「テキスト」にし、画像を挿入したい位置にコピーしたHTMLを貼り付けます。

 

以上です!

一応プレビューなどで見た目を確かめてみてくださいね。

 

これで、サーバの容量を気にせずに、記事中にガンガン写真を載せていくことができます。

※念の為書いておきますと、アイキャッチ画像にはGoogleフォトの写真を使えず、直接アップロードするしかなさそうです。(何か方法があったら教えてください!)

 

長くなっちゃったのでなんだか煩雑そうな手順に思えちゃうかもしれませんが、慣れてみると全然カンタンです。

さらにGoogleフォトはブラウザ上で明度やコントラストを変える事ができるので、掲載後に写真を明るくしたい場合なども、再アップロードも不要で、変更が記事に即反映されます。素晴らしい!

Googleフォトとの連携で、快適なブログライフをお楽しみください!

それではまた~

 

あわせて読みたい

6件のフィードバック

  1. 匿名 より:

    初めまして。

    自分もこの方法で画像を載せてたんですが、初めは表示されていた画像が表示されなくなってたりしませんか?

    解決策はあるんでしょうか?

    • digisan より:

      初めまして。コメントありがとうございます。

      自分も、このブログの別記事で、ひとつだけ表示されなくなった写真がありました。
      原因は分かりませんが、その時は、再度同じ方法でURLを取得し直し、貼り直しました。
      その後再発はしていないので、とりあえずはその方法でいいかもしれません。

      全ての画像が表示されなくなるのでしたら、別の問題があるかもしれません。
      ちゃんと共有中のアルバムからURLを取得しているか、確認してみるといいかもしれませんね。

  2. ころころ より:

    こんにちわ。
    自分もこの方法で画像を載せていたんですが、後で見ると画像が表示されてない!
    なんてことが頻発してます。
    出てたり出てなかったり。

    画像URLが変化しているせいなのかと思ったんですが、
    こちらのブログは画像ちゃんと出てますよね。
    何か対策とられたのでしょうか?

  3. ころころ より:

    あ、すみません、同じ質問でした。
    削除して下さいね。

    画像が表示されなくなるのが不安で現在はやっていません。

    • digisan より:

      こんにちは。
      いえいえ、同じ質問でもコメントありがとうございます!

      うーん、自分の環境だと今のところ上に書いた一点以外の問題が起きていないので、なんとも言えないですね・・・

      共有中アルバムではなく普通のフォトから取得したURLでは、自分のログインセッションが切れた後だったり、ログインしていない他のPCやスマホだと見えなくなるので、そういう物が混ざっていたのかもしれませんが、分かりません。

      お力になれずすみませんが、Googleフォト以外の利用で問題ないのでしたらその方が安定していいかもしれませんね。

  1. 2017年2月12日

    […] 設定で共有アルバムを設定する 参考記事:ワードプレスでGoogleフォトの写真を使う際の注意点&便利ツール – デジサンポ! […]

コメントを残す

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