この記事では、Googleフォトの写真を使ってサーバーの容量を削減する方法、WordPressの投稿に画像を挿入する方法を解説します。
Googleフォトの共有アルバムを作成
Googleフォトにログインし、アルバム > アルバムを作成をクリックします。「タイトルを追加」にお好きなアルバム名を入力してください。
右上の(その他アイコン) > オプションをクリックします。
リンクの共有を「オン」にします。
リンクの共有以外を「オフ」にします。
アルバム名の下に「共有中」と表示されます。
「写真を追加」をクリックまたはこの画面に写真をドラッグして画像を追加してください。
画像のアドレスを取得
作成した共有アルバムからWordPressサイトに表示させる写真をクリックして画像を開きます。写真を右クリックして「画像のアドレスをコピー」を選択します。
アルバム内の写真が一覧された画面ではなく、必ず写真をクリックして開いてから画像のアドレスをコピーしてください。
WordPressの投稿に画像を挿入
WordPressの投稿を新規追加または編集して画像を挿入します。WordPressの投稿編集画面 > 画像ブロック > URLから挿入 > 右クリックして「貼り付け」を選択し、Googleフォトの共有アルバムからコピーした画像のURLを貼り付けます。
URLから挿入した画像はメディアライブラリに保存されません。Googleフォトの共有アルバムから写真を削除したり、アルバムの共有を「オフ」したり、またはアルバムの共有を「オフ」にしてから再度「オン」にしても画像のアドレスが変更されるため、画像は表示されなくなります。
画像のURLパラメータについて
URLパラメータとは、URL末尾に付け加える変数を指します。Googleフォトから取得する画像のアドレスは「パラメータ付きURL」で、URLパラメータを指定することでさまざまな効果を付加できます。https://lh3.googleusercontent.com/v...Hk=w1280-h720-no
URL末尾の「=w1280-h720-no」がパラメータです。以下では、このパラメータを変更します。なお、パラメータをすべて削除しても画像は表示されます。
縦横比を維持して画像を拡大・縮小する
指定する数値(ピクセル)は最大値です。自動で可変しますが、指定したサイズを上回ることはありません。【横幅を指定】
https://lh3.googleusercontent.com/v...Hk=w640
【高さを指定】
https://lh3.googleusercontent.com/v...Hk=h480
【横幅と高さを指定】
https://lh3.googleusercontent.com/v...Hk=w640-h300
【横幅と高さのどちらか大きい辺を指定】
https://lh3.googleusercontent.com/v...Hk=s640
縦横比を維持して画像をトリミングする・その1
画像の中央を基準にトリミングします。【正方形にする】
https://lh3.googleusercontent.com/v...Hk=w640-c
https://lh3.googleusercontent.com/v...Hk=h480-c
https://lh3.googleusercontent.com/v...Hk=s640-c
【横幅と高さを指定】
https://lh3.googleusercontent.com/v...Hk=w640-h300-c
縦横比を維持して画像をトリミングする・その2
画像の「最も興味深い部分」が自動でトリミングします。画像の中央が表示されるとは限りません。【正方形にする】
https://lh3.googleusercontent.com/v...Hk=w640-p
https://lh3.googleusercontent.com/v...Hk=h480-p
https://lh3.googleusercontent.com/v...Hk=s640-p
【横幅と高さを指定】
https://lh3.googleusercontent.com/v...Hk=w640-h300-p
元のサイズで画像を表示する
=s0、=w0、=h0、=w0-h0のように数値を0にすると画像を元のサイズで表示します。https://lh3.googleusercontent.com/v...Hk=s0
画像をダウンロードする
ブラウザにパラメータ付きURLを入力またはリンクをクリックすると、画像ファイルをダウンロードできます。【元のサイズを指定】
https://lh3.googleusercontent.com/v...Hk=d
【サイズを指定】
https://lh3.googleusercontent.com/v...Hk=w640-d
https://lh3.googleusercontent.com/v...Hk=w640-c-d
など
