初心者でもWordPress運用前に押さえておきたい19のポイント 16~19

「初心者でもWordPress運用前に押さえておきたい19のポイント」もいよいよ最終段階、16~19の解説です。

今回は、WordPressの投稿をより豊かにするための、画像の扱いについてのポイントを中心にお伝えします。

カッコいい写真素材はやっぱり買わなければならないのか?

使っているテーマやサイトの内容にもよりますが、アイキャッチ画像などの画像素材は、WordPressでサイトを運営する上で一つのポイントとなります。

画像素材は無料で提供するサイトが多数ありますが、やはり、有料素材の方が使いやすい素材が多い様に思います。

特に、日本の画像素材サイトは、以前は無料のサイトだったものが、最近は一部有料やすべて有料になってきています。

以下のサイトでは、商用利用無料、帰属表示不要で高品質な画像素材が入手できますので、お勧めのサイトをご紹介します。

  • Pixabay
    海外のサイト。世界中の様々な写真が高品質で提供されています。
  • Unsplash
    海外のサイト。世界中の様々な写真が高品質で提供されています。
  • ぱくたそ
    日本のサイト。ユニークな写真が多いので、記事のテーマに合った写真が見つかるかも。
  • 写真AC
    日本のサイト。要会員登録。1日の無料ダウンロード数に制限があります。
  • freephotos.cc
    クリエイティブ・コモンズ(CC)ライセンス提供されている写真を検索可能。詳しいライセンス表記がないのがちょっと心配。

サイトにより、利用規約がありますので、規約を確認の上、ルールに乗っ取った利用を心がけましょう。

ところで、たまに他のサイトから画像ファイルを「引用」として使っているサイトがありますが、無断で引用している場合は著作権法違反になっていると思われます。

出典を明らかにすれば、無制限に「引用」出来ると勘違いしている人が多い様です。

簡単に説明すると、その引用がなければその文章や文脈が成立しない際に、出典を明らかにすれば「引用」出来る、という事です。

グラフなどのデータを示す画像でない限り、この定義には当てはまらない可能性が高いです。

イメージ画像の「引用」は、明らかにこの範疇を超えていますので、先方に断りを入れていない限りは「引用」ではなく、単なる無断掲載になります。

どうしても他のサイトの画像を使いたい場合は、予め先方のサイト運営者に許可を取った上で、掲載条件を守って利用しましょう。

SNSを意識したアイキャッチ画像の設定

アイキャッチ画像は、トップページやページのメイン画像としてだけではなく、twitterやfacebookでシェアされたときのアイキャッチ画像として利用されます。

この設定は、twitterでは「twitterカード設定」、facebookでは「OGP設定」と呼ばれています。

テーマでこれらの設定が用意されていることもありますが、テーマにその様な機能がない場合は、プラグインを利用するか、functions.php にコードを追加する必要があります。

「All in One SEO Pack」などのプラグインを利用していれば、プラグインで設定することができます。

OGPタグが設定されているかわからない場合は、以下の手順で確認します。

  1. 記事ページを開く
  2. 右クリックして「ページのソースを表示」を選択する
  3. F3キーを押して検索ダイアログを表示し「og:」で検索する

<meta property=”og:・・・という記述があれば、OGP設定がされています。

検索されない場合は、OGP設定がされていませんので、設定することをお勧めします。

functions.php にコードを書き込むのは、初心者には難易度が高いので、プラグインを利用して設定すると良いでしょう。

「All in One SEO Pack」や「JetPack」を使っている場合は、OGP設定の機能を備えていますので、設定を確認してみましょう。

これらのプラグインを使っていない場合は、「Open Graph protocol」というプラグインでOGP設定、「JM Twitter Cards」というプラグインでtwitterカード設定を行う事ができます。

メディア追加時のやっておきたい、画像ファイルの設定とは!?

メディアの追加で画像をアップロードする際、画像情報を編集せずにそのままにしていませんか?

画像には、以下の情報を入力することができます。

  • タイトル:アップロード時はファイル名が入力されます。メディア一覧で表示されるファイル名で、自分の分かり易い名前に変更可能。
  • キャプション:キャプションを設定すると、画像の下にテキストが表示されます。
  • 代替テキスト:「alt属性」(画像の代替テキスト)に設定するテキストです。
  • 説明:画像の説明を入力します。通常は表示されませんが、画像ファイルのページで画像の説明として表示されます。

この中でも、「代替テキスト」については、必ず設定しておくことをお勧めします。

「代替テキスト」は、「IMGタグ」の「alt属性」に出力されます。

通信のトラブルなどにより、画像ファイルが読み込まれなかったときに、画像の代わりに「代替テキスト」設定したテキストを表示します。

また、検索エンジンでは、「alt属性」に設定されたテキストを読み込みます。

SEOに有効との解説もありますが、やたらとキーワードを入力したからと言って、効果はありません。

検索順位に大きく影響を及ぼすものではありませんので、「画像を説明するテキスト」を入力しておく様にしましょう。

その他、テキストブラウザでは「alt属性」の内容がテキストとして表示され、ブラウザの音声読み上げ機能では、「alt属性」の内容が読み上げられます。

その他の項目ついては、テーマやプラグインなどで表示に利用することがありますので、それぞれの説明に従って、必要な項目は入力するようにしましょう。

画像を多用したいけど、表示スピードは大丈夫!?

ページのテーマによっては、画像を多用するケースがあると思います。

この際、気になるのは表示スピードです。

50枚も写真を張り付けて大丈夫だろうか・・・。

この対策については、予め、サイトのアクセス傾向を調べておいた方が良いです。

ほとんどがスマホからのアクセスであれば、画像サイズをなるべく抑える様に調整した方が良いです。

逆にパソコンからのアクセスがほとんどであれば、気にせず高解像度の画像を利用すればよいでしょう。

しかし、画像サイズはなるべく抑えるに越したことはありません。

対策の一つとして、「画質を保持しながら画像ファイル自体を圧縮する」方法が考えられます。

画像編集ソフトで予め編集してファイルサイズを小さくすれば良いのですが、これだと、画質を落とさないためには、画像毎に調整が必要になります。

EWWW Image Optimizer」というプラグインを利用すれば、画像のアップロード時に、画質を落とさずに自動的にファイルサイズを最適化してくれます。

インストールしておくだけですので手間いらずで非常に便利です。

画像ファイル自体の対策も大事ですが、ページに画像を張り付ける際に、適切な画像サイズを選択するのも有効な手段です。

WordPressでは、ファイルのアップロード時に、「設定」≫「メディア」で指定したサイズで、「大」「中」「サムネイル」というように複数のサイズでファイルを作成します。

画像挿入の際には、この中から最適なサイズを選ぶようにしましょう。

例えば、スマホからのアクセスが多いサイトであれば、「設定」≫「メディア」で「中」サイズを横幅300ピクセル程度で設定しておき、パソコンでは、右寄せもしくは左寄せで表示し、スマホでは、画面幅で表示する様にすると、ページ全体の画像サイズは大幅に軽減できます。

画像ファイルを挿入する際に、「リンク先」に「メディアファイル」を指定しておけば、パソコンで表示した際に画像をクリックすれば、拡大表示することができます。

ただし、これだと画像ファイルがブラウザ画面で表示されてしまい、戻るにはブラウザの「戻る」ボタンを押さなければなりません。

この場合、「Simple Lightbox」のようなLightbox系のプラグインを入れておけば、ページ内で画像をポップアップ表示することができます。

その他、テーマによっては、テーマで利用する画像サイズを加えるものもありますので、アップロード時に生成される画像ファイルを調べて、適切なサイズの画像を利用すると良いでしょう。

ポイントを押さえて

いかがでしたでしょうか?

WordPressについての質問の中で、多いものを中心に説明いたしましたが、運用すればするほど、疑問点もわいてくるかもしれません。

サイトの内容により、最適な運営方法も異なりますので、ご自身のサイトに合わせて、色々試してみて下さい。

質問などございましたら、お気軽にお問い合わせ下さい

それでは、皆様のサイトがより発展しますよう、共に頑張りましょう!

無料相談