どうも、はじめです。
ワードプレス(WordPress)でブログを
書いていると段々と画像の容量が増えてきて
サイトが重くなってしまったということは
ありませんか？
画像を圧縮したりサイズを小さくしたりと
工夫しても数が増えてくれば結局は容量を
圧迫してしまいます。
今回は画像をGoogleフォトに保管したまま
利用する方法について解説していこうと思います。
今回解説するのは
OS → macOS High Sierra
ブラウザ → safariバージョン12.0.3
を使用しての方法となります。
スポンサーリンク
googleフォトを使うメリットは？
googleフォトを使う最大のメリットは
何と言っても容量が無制限で使い放題
というところですね！
最初に設定さえしてしまえば勝手に圧縮
してくれて容量無制限になるんです！！
googleフォトの設定方法
まずはgoogleアカウントを取得します。
アカウントを持っていない方は以下のリンク
から登録をしてください。
↓↓↓↓↓↓
アカウントの作成が完了したら
googleフォトを開きます。
場所はgoogleのトップページの左上に
あります。
googleフォトを開いたら左側にあるアルバムを選択します。
「アルバムを作成」を選択します。
スポンサーリンク
写真を追加する画面になりますが、
先に共有設定をします。
ここで共有設定をしないと自分しか画像が
表示されないので必ずするようにしてください。
右上の点が三つ並んでいる奴をクリックし、
オプションを選択します。
共有をオンにし、共同編集をオフにします。
設定ができたら画像をこのアルバムに
追加します。
初めて画像をアップロードすると
アップロードサイズを聞かれるので、
高画質（容量制限なし、無料）
を選択してください。
こうすることで、規定値を超えるサイズの
画像が自動的に容量制限なしのサイズまで
圧縮されてアップロードされるようになります。
スポンサーリンク
WordPressでGoogleフォトの画像を使用する方法
googleフォトに画像をアップロードできたら
いよいよWordPressに画像を挿入しましょう！
やり方は2つあって、
私は後者をお勧めしていますが、
一応標準機能を使った方法も書いておきますね。
現在は操作が面倒なので
WordPressの標準機能を使用して
画像挿入をしています。
今後は分かりませんが、
現状では問題は無いので
こちらをお勧めします。
WordPressの標準機能を使う
途中までは通常の画像挿入と同じです。
メディアを追加をクリックして、
左のリストから「URLから挿入」をクリックします。
googleフォトで画像を開いて右クリックし、
「イメージのアドレスをコピー」を選択。
それをURLの入力欄にペーストします。
貼り付けたURLの一番右あたりに
「w1365-h854-no」のような部分が
あるかと思いますが、これが画像のサイズに
なっています。
（wは横幅、hは高さ）
ここの数字を変えることで好きなサイズに
することができます。
（縦横の比率は自動的に修正される）
ちなみに、ウインドウのサイズを変えると
自動的にこのURLのサイズ指定も変わるので、
あらかじめ好きなサイズにしてから
コピーするといちいち修正する手間が
省けます。
ちなみにこの記事の画像サイズは全て
w300-h300となっていますので
参考にしてください。
操作的にはこちらの方が簡単ですかね？
スポンサーリンク
safariのデベロッパーツールを使う
こちらはすこーしだけ手間が掛かりますが
その分メリットもあるので私はこちらを
おすすめしています。
デベロッパーツールを使うメリット
googleを愛用している方はご存知
かもしれませんが、googleフォトに限らず
googleはちょこちょこ知らない間に仕様変更
してたりしてURLが変わっていることがあるんです。
その場合、WordPressの標準機能を使っていると
URLで探しに行っているので仕様変更後は
画像が表示されなくなってしまいます。
デベロッパーツールを使うと手間は増えますが、
仕様変更があっても問題なく画像が表示される
のでこちらをお勧めしているのです。
デベロッパーツールを使うデメリット
この後やり方を解説しますが、そこそこ面倒です。
人によっては画面を見るだけで「いやだーむりー」
と拒絶反応を示すかも？
ただ、ずっと画像を表示させようと思う場合は
ぜひ頑張ってこちらを覚えましょう！
以下執筆中につき画像なしや未入力部分あり
その他Macについての記事はこちら
ファンクションキー（F1～F12)の存在意義とは？【Mac】
開発メニューを表示させる
まずは事前準備として開発メニューというものを
表示させないといけません。
とは言ってもとても簡単です。
画面左上から
「safari」→「環境設定」→「」→「開発メニューを表示する」
ここにチェックを入れればOKです。
「画像」
デベロッパーツールから画像を挿入する（おすすめ）
開発メニューが出たら標準機能を使う時と同じ
様にgoogleフォトの画面で画像を出します。
画像を右クリックし、「要素の詳細を表示」を
選択します。
「画像」
スポンサーリンク
すると画面下に良く分からない小難しいことが
掛かれていそうなウインドウが出てくるので(笑)
この中から
<ing aria-hidden から始まって
w○○-h○○-no”>==$0 で終わる
かたまりを探してコピーします。
（○○には数字が入ります）
（縦に長く、かなりスクロールできますが、
基本的には丁度目の前かすぐ上辺りにあります）
「画像」
WordPressの入力画面の右上にある
「テキスト」を選択し、画像を挿入したい所に
貼り付けます。
「画像」
この時、○○の数字を変えると画像サイズを
変えることができます。
こちらも標準機能の時と同じくコピーした時の
ウインドウのサイズによって変わってくるので
丁度良いサイズを自分で探しておくと後が楽に
なりますよ！
ウインドウを小さくしたときの画像サイズ
「画像」
ウインドウを大きくしたときの画像サイズ
「画像」
なお、この記事の画像は全てこちらの方法で
挿入しています。
サイズは全てw300-h300となっていますので
参考にしてください。
アイキャッチの画像もGoogleフォトで保管したい！
記事内の画像を外部参照にしたらアイキャッチも
同じようにしたいですよね！
アイキャッチの場合はプラグインを使うことで
解決できます。
まずはこちらのプラグインを入れます。
「Featured Image from URL」
入れ方は、「プラグイン」→「新規追加」
から検索窓にプラグイン名を入れて検索します。
似たような名前のプラグインがあるので
間違えないように注意してください。
「画像」×２
プラグインを入れると記事の執筆画面の
右下にあるアイキャッチ画像のところに
URLを入力するところが増えています。
ここにURLを入れるとアイキャッチ画像
として使用することができるようになります。
スポンサーリンク
記事内の一番上にある画像をアイキャッチにする場合
左の「Featured Image from URL」をクリック
「画像」
「Auto Set First Image」タブの一番上
use the first image as featured image
をオンにすると記事内の一番上の画像が
自動的にアイキャッチになります。
Featured Image from URLを使うデメリット
デベロッパーツールのところで説明した通り、
こちらもURLを使用しているのでgoogleの
仕様変更があったら画像が表示されなく
なってしまいます。
ただ、こちらはアイキャッチだけなので
そこまで深刻な影響はないかと思います。
とはいうものの記事数が多ければそれだけ
修正が大変なので誰か代わりのプラグイン
作ってくれませんかね？（切実）
ファンクションキー（F1～F12)の存在意義とは？【Mac】
まとめ
今回はWordPressの容量を圧迫せずに
画像を挿入する方法について書いてみました。
- googleフォトを使って外部参照とする。
- WordPressの標準機能は優秀だけどgoogleの仕様変更には対応できない。
（アイキャッチプラグインも同様）
WordPressの容量を圧迫しないので
サイトが重くなることを防ぐことができます。
そうすればサイトの表示時間が短くなって
ユーザビリティが向上するのでここで悩んでいる
方はぜひお試しください。
最後までご覧いただき
ありがとうございました！