今回は、ワードプレスで画像の圧縮・alt設定・アップロードを同時に行って、効率的に記事に貼り付けていく方法をご紹介したいと思います。
単純に画像をアップロードするのではなく、「いかに少ないデータ容量の画像を使うのか」、「その画像はどんな画像なのか」もブログを作っていく上でとても重要な要素です。
画像を簡単に圧縮する方法
画像を圧縮してデータ容量を減らすことで、ページの表示速度が改善されます。
同じ画像でも、圧縮する・しないでかなり画像が持つデータ容量はかなり変わってきますので、実際にアップロードする前に、画像の圧縮方法をお伝えしたいと思います^^
圧縮には様々なプラグインやオンラインサービスがありますが、
個人的に便利だと思ったものがありますので、まだ設定されてない方はこちらの記事を参考にしてください↓
[sitecard subtitle=合わせて読みたい url=https://okap01.com/image-compression target=]
３つのアップロード方法
さて、画像の圧縮のやり方と便利なプラグインがお伝えできたので、さっそく画像のアップロードをしていきたいのですが、
実は、アップロード方法が大きく分けて３つあるので、まずはそれぞれの特徴を見ていきます。
①「メディア」からアップロード
ワードプレスにある「メディア」画面からアップロードしていく方法。
ここで「新規追加」を押して点線の枠内に画像をドラッグするか、
「ファイルを選択」から対象の画像を選ぶことでアップロードできます。
ただ、僕はこのメディア画面は主に、「各画像の代替テキスト入力」、「画像の圧縮が必要な場合に個別に圧縮する」ときだけ利用しています。
①の部分が代替テキスト入力欄です。
代替テキストとは、画像をテキストを使って説明する役割を持っていて、「alt（オルト）」と呼ばれるコードで指定します。
SEOの観点から入れておくのが推奨されていますので、なるべく入れるようにしましょう。
『altとは』
画像をテキストで説明したもの。
検索エンジンに対してわかりやすいサイトにする意味が強いです。
実は、画像のままだけではグーグルは意味を理解することができないのです。そのグーグルに「alt」で画像の意味を指定してあげて、画像の情報を渡します。
たとえば、altの設定のために使う画像なら、「alt設定 説明画像」といった感じでテキストとして画像を説明していきます。
今は、いかに記事内容が充実しているかが重要なので、グーグルにも
おかぴーこういう意味の画像を使っています〜^^
Mr.グーグルリョウカイデース（> ^）ー☆
と、教えてあげるとお互いに助かりますよね。
そのため１つずつの画像に書き込んでいくのが今のところブログにとってベストな選択でしょう。
また、「alt」にはもう一つ役割があって、もし画像のリンクが切れているとブログ上で画像が表示されないのですが、そのときに代わりにテキストが出てきてどんな画像か説明するといった役割もあります。
例えば、こんな感じ↓
先ほど出てきた説明画像の抜粋ですが、
画像へのリンク（URL）がきちんとつながっていれば画像は表示されます。
ところが、たまに画像名を間違えていたり、URLが違ったまま貼り付けてしまうときちんと表示されず以下のようなリンク切れを起こします↓
もし何も設定していなければ、この画像は本当は何だったのか？が伝わりません。
これが理由でせっかくのアクセスが減ってしまうのは、とてももったいないですよね。
そのときにalt設定でテキストを「alt設定 説明画像」というように入力していれば、「altについて説明している画像なんだな〜」というのが伝わるようになっています。
もちろん、リンク切れを起こさないのがベストですが、こんな形でブログに貢献してくれたりするんです。
でも、記事に一つ一つ毎回入れるのは大変なので、
このメディアの管理画面から、アップロード済みのデータに最初からalt設定でテキストをいれておくと、
それ以降の記事に画像を貼り付けたとき、設定した代替テキストが入力された状態で貼り付けが可能です。
ただ、すでに記事に貼り付けている画像にalt設定をするには、一つ一つ記事の編集画面から作業する必要がありますのでご注意ください。
同じ画像でも、このときだけ違うテキストを入れて説明を変える場合も出てくると思いますので、そのときは記事内で個別に設定してあげましょう。
②Compressボタン＝圧縮ボタン
こちらは、プラグインの「Compress JPEG ＆ PNG images」をインストールして有効化している場合に表示されます。
プラグインをインストールする前に、すでにアップロード済みの画像を個別に選んで圧縮できるボタンです。
アップロードした画像でも、
全て使っているとは限らないので、現在使っている画像で圧縮していないものがあれば、こちらで画像の圧縮ができます。
入力したら③の更新ボタンを押します。
このメディア管理画面でのおすすめの操作をまとめると、
- 画像だけ一気にアップロードしたい
- 記事に貼り付ける前の画像のalt設定
- 個別に画像を圧縮
といった利用で使うのがいいと思っています。
今回の記事を作成しながら画像のアップロードとalt設定はできますが、また記事編集画面に行かないといけないので、
メディア画面からはこういったやり方ができるとだけ覚えておきましょう^^
②「FTPソフト」を使ってアップロード
FTPソフトとは、ワードプレスのバックアップや画像のアップロード、
その他何か画面が真っ白になって動かなくなったときに対処できるなど、
ワードプレスを使っている方なら必須のツールなのですが、
こちらを操作して画像をアップロードすることもできます。
ですが、接続する手間を考えると他の方法がいいと思うので、
これでもできます〜くらいでこの記事ではサクッと終わろうと思います（笑）
FTPソフトについてはこちらの記事で解説していますので、
まだ利用していない方はこちらをご覧ください^^↓
[sitecard subtitle=合わせて読みたい url=https://okap01.com/filezilla target=]
③記事編集画面から直接アップロード
これが一番楽な方法だと個人的に思います。
容量のところでお話しした、「Compress JPEG & PNG images」というプラグインを入れていれば、アップロードした瞬間に自動的に容量を下げてくれますし、
「①メディアでアップロード」のように、
毎回ワードプレスの管理画面の「メディア」に行き、アップロードし、記事編集に戻るという作業を繰り返す必要もないですし。
というわけで、記事を作成しながら効率的に画像をアップロードし、貼り付けるには③の記事編集画面から直接してしまうのが便利だと思いますので、その方法を解説していきたいと思います^^
ワードプレスに画像をアップロードするおすすめ手順
では、一番効率的な方法がわかったところで、
実際にアップロードする流れを見ていきましょう。
まずは、記事の中で画像を貼り付けたいところでカーソルを合わせます。
左上の「メディアを追加」をクリックしましょう。
まだ、この段階では画像はアップロードしていません。
このような画面になったと思います。
今回はデスクトップにある画像を記事で使おうと思います。
この画像を画面に「ほいっ」っとドラッグしてください。
すると、このようにファイルをドロップ（画面上に落として）アップロードと表示されますので、指示通りに落としましょう。
アップロードされた画像が表示されました。
実は、この段階で「Compress JPEG ＆ PNG images」のプラグインを入れていて自動で圧縮される設定をして入れば、
わざわざ圧縮ボタンを押しに行かなくても裏側で自動でデータ容量を減らしてくれています。
なんてステキな機能なのでしょうか！
一つずつ圧縮しに戻らなくてもいいのは非常に楽ですよね。
本題のアップロードに戻りますが、ここで右側の代替テキスト①に画像の説明を直接入れていきます。
今回は、画像のアップロードについての画像だったので、
代替テキストのところに「画像アップロード方法」と入力することでグーグルに画像の内容も伝えられました。
その他、この画面で見るべきポイントは主にこちらです↓
URL
→画像がブログ内のどこにアップロードされているかを示すもの。
タイトル
→画像名。アップロードする前に事前に決めておくのがおすすめです。
配置
→画像を記事のどこに寄せて貼り付けるかを指定します。左・中央・右の設定が可能。
リンク先
→画像にリンクを設定できます。もし画像をクリックしてもらって別の記事を見てほしい場合はリンクをつけましょう。
リンクの設定方法はこちらにまとめています^^
↓↓↓
[sitecard subtitle=合わせて読みたい url=https://okap01.com/make-link target=]
サイズ
→画像の縦横の大きさ。単位はピクセル（px）
基本的に、この辺りを意識して設定できればいいと思います。
これらが決まったら、最後に右下の「投稿に挿入」をクリックします。
このように編集画面でも画像が貼り付けられたら、
右上のプレビューをクリックして実際の表示を確認します。
うまく記事内に画像を貼り付けることができました。
便利な機能・デベロッパーツール
みみこ確認は・・・どうすればいいんだろ？(´ω`)ハテ？
おかぴーそしてここで、これからずっと役立つ便利なテクニックを１つお伝えしたいと思います。
その名も、「デベロッパーツール」！
ちょっと難しそうな単語が出てきた！と思うかもしれませんが、大丈夫です！
むしろ、これがあるとパソコンだけでスマートフォンの画面ではどのように表示されるかなども簡単に確認できたりするので、
ブログのレイアウトが崩れていないかなどにも役立つ便利な機能なんですよ〜^^
（詳しい使い方などはまた別の記事でお話ししようかと思います）
Macの方と、Windowsの方で操作が変わりますので、それぞれ方法をまとめました。（ここから先は、Google Chromeでの操作をベースに進めます）
・command + option + i
・右クリックして、検証からでも表示可
・Ctrl + Alt + i
・F12キー
・右クリックして、検証からでも表示可
ブラウザは他にも、Safari、Firefoxなど様々なものがありますが、それらのブラウザでも同じようなデベロッパーツール（検証画面）が用意されていますので、
Google Chrome以外を使っている方は表示させる方法を調べてみてください^^
先ほどのプレビュー画面で、このコマンドを押してみてください。
すると、以下のような画面に切り替わると思います↓
左側が記事のプレビュー画面。
右は記事のソースコードが記載されたものです。
このソースコードでは、画像のリンク先やaltで設定した文言などのほとんどの情報を確認することができるようになっているんです。
つまり、ここできちんとalt設定ができているか確認できるというわけです。
この画面右上に、赤枠のようなマークがあるのですが、
左側の「↖︎」が載っているボタンをクリックしてみてください。
その状態でプレビュー画面の調べたい部分（今回は画像）にマウスを持っていきクリックすると、
その対象の部分のソースコード（画面右）の背景が青くなって、「ここだよ！」と知らせてくれるんです。
青くなった対象箇所を見てみると、「alt=”画像アップロード方法”」というのが載っているのが確認できると思います。
これで、画像に対してalt設定もきちんと行われているのがこれで確認できました。
ちなみに、その上の「https://」から始まる赤枠部分は画像のURLを表しています。
以上が、画像の圧縮・alt設定・アップロードを一番速く効率的にできるおすすめの方法でした。
アイキャッチ画像の設定方法
みみこ記事に画像を貼り付ける方法はわかりました！けど、よく記事一覧とかである見出しみたいな画像「アイキャッチ画像」っていうのはどこで設定すればいいんだろー？
記事の編集画面の一番上に貼り付けても、アイキャッチ画像として反映されないし・・(°▽°)
おかぴーアイキャッチ画像は記事に注目してもらうためにも、とても大事な要素ですよね。実は各記事の編集画面から設定ができるので、せっかくなので一緒に見ていきましょう！
記事への貼り付けと同じような感じです。
こちらをご覧ください↓
記事編集画面の右下に、ひっそりと（笑）「アイキャッチ画像を設定」とあるので、ここをクリックしてください。
同じように、アイキャッチ画像に使用したい画像を選び、
代替テキストの設定をしてから「アイキャッチ画像を設定」をクリック。
これが入りますよ〜と表示されますので、
先ほどのようにプレビュー画面で確認していきましょう。
無事アイキャッチ画像として表示されました！
ここまでできれば、画像のアップロードに自信を持っていただいて大丈夫だと思いますよ〜^^
まとめ
今回は具体的に僕がよく行っている画像のアップロード方法をご紹介しました。
余分な手間をかけずにできるところもあれば、
正直、alt設定などのように少し手間がかかると思う部分もあると思います。
僕も最初はそう思っていたのですが、
世界に一つしかない自分だけのブログを作っていると考えれば、
地味な作業だとしてもモチベーションにつながりました（笑）
まだ実践されていない方は、ぜひ試してみてください^^
コメント