はてなブログで画像の使い方【気を付けたいことも解説】

こんなお悩みにお答えします。

この記事でわかること

記事の信頼性

こんにちわ、Jouji(@jouji0720)です。

僕は今webライター四年目で、フリーランスライターとして生活しています。そんな僕がはてなブログでの画像の扱い方をお話していきます。

結論から言うと、はてなブログは画像の貼り方に気を付けないといけません。というのもWordpressと違って、プラグインがないからです

この記事を読むと画像の使い方がばっちりわかるようになりますから、最後まで読んで、一緒にやっていきましょう。

はてなブログに画像を使う手順

はてなブログで画像を入れる手順は、以下の通りです。

それぞれ解説します。

画像をダウンロード

はてなブログに画像を使う手順の1つ目は、画像をダウンロードすることです。いいなと思った画像をダウンロードしましょう。

ダウンロードするときには、著作権に気を付ける

とはいえ、なんでもダウンロードすればいいわけではないです。というのも、著作権に引っかかってしまう可能性があるからです。勝手に無断転載すると著作権違反になるので注意が必要です。

もし画像をブログに使うときには、商用利用などができるフリー画像素材サイトを使うようにしましょう。

おすすめの商用利用できる画像素材サイトは、【初心者必見】アフィリエイトで使えるフリー素材サイトの選び方にて紹介していますので、参考にしてみましょう。

はてなブログに画像をアップロード

はてなブログに画像を使う手順の2つ目は、はてなブログに画像をアップロードすることです。画像のアップロード方法は以下の通り。

アップロード先はHatena Blog(private)

写真をアップロードした後に、「失敗した」と思うときもあるものです。写真のアップロード先は、Hatena Blog(private)というフォルダに保存されます。

Hatena Blog(private)の横にあるリンクボタンを押すとフォトライフにつながるようになっています。失敗した場合には、フォトライフで削除を行いましょう。

画像を入れたい場所を決める

はてなブログに画像を使う手順の3つ目は、画像を入れたい場所を決めることです。入れたい場所を決めて、そこにカーソルを移動しましょう。

アップロードしたい画像を選ぶ

はてなブログに画像を使う手順の4個目は、アップロードしたい画像を選ぶことです。画像を選んでクリックしましょう。

貼り付けられた画像を確認する

はてなブログに画像を使う手順の5つ目は、貼り付けられた画像を確認することです。画像が貼り付けられたら必ず確認しましょう。

というのもたまに、うまく貼り付けられていないこともあるからです。しっかりと確認して、貼り付けられていたらOKです。

はてなブログで画像を使うときに知っておきたいこと【SEOにも最適】

はてなブログで画像を使うときに知っておきたいことは、以下の通りです。

では詳しく見ていきましょう。

画像の軽量化をしてアップロードを行うこと

はてなブログで画像を使うときに知っておきたいことの1つ目は、画像の軽量化をしてアップロードを行うことです。というのもはてなブログには、Wordpressのように軽量化してくれるプラグインが入れられないからです。

画像はデータ量が大きいです。そしてサイズが大きくなると読み込みに時間がかかります。そのために表示速度が落ちる原因になります。

Google先生も「Googleが掲げる10の事実」の中で、以下のように言ってます。

遅いより速いほうがいい。(Google について | Googleより引用）

ですから画像を使うときには、軽量化をしてから使うようにしましょう。

画像の軽量化のやり方

画像の軽量化のやり方は、以下があります。

それぞれ解説します。

フォトライフの設定で圧縮する

画像の軽量化のやり方の1つ目は、フォトライフの設定で圧縮することです。手順は、以下の通りです。

※フォトライフにてアップロードした画像は、800pxまでリサイズされますが、僕自身は長編を640でで設定しています。なお、画質に関しては、75％に設定しています。

イメージ圧縮ツールを使う

画像の軽量化のやり方の2つ目は、イメージ圧縮ツールを使うことです。画像圧縮ツールを使うことによって、画像を圧縮して、はてなブログにアップロードする方法です。

この方法のいいところは、何回もリサイズできることです。とはいえ、アップロードできない大きさもあるので注意が必要です。

おすすめの画像圧縮ツールは、無料で使える高画質な画像圧縮ツール7選【ブログ記事向き】にて詳しく解説していますので、参考にやってみましょう。

alt属性を使ってわかりやすくする

はてなブログで画像を使うときに知っておきたいことの2つ目は、alt属性を使ってわかりやすくすることです。

alt属性とは、画像の情報を検索エンジンに伝える説明文です。読者は人間なので目で見てわかりますが、検索エンジンは目で見てわかりません。

alt属性に何も書いてないと、判断できないので、検索にインデックスされなかったりということもあります。ですからはてなブログで画像を使うときには、やっておいたほうがいいです。

画像にalt属性を入力する方法

画像にalt属性を入力する方法は、以下の通り。

それぞれ解説します。

画像のアップロードが伴うとき

画像のアップロードが伴うときの手順は以下の通り。

写真のアップロードが完了すると、上記のような確認画面が出てきます。赤く囲ってある部分に写真の名前を英語表記で入力します。というのも英語の表記のほうが理解が速いからです。

そのあと記事編集画面に張り付けるボタンをクリックすると、Alt属性を設定することができます。

過去にアップロードして、画像のアップロードがいらない時

過去にアップロードして、画像のアップロードがいらない場合のalt属性の設定方法は、以下の通りです。

画像を貼っている場合には、alt属性を自分で入力しないといけません。画像のURLの後に入力しておきましょう。内容は、英語表記で書きましょう。

まとめ｜はてなブログでの画像の使い方を知って検索エンジンにも読者にもいい記事にしよう

ここまで、はてなブログでの画像の使い方と注意点をお話してきました。

はてなブログは、Wordpressと違って投稿した記事にを貼り付けた画像の大きさをリサイズしてくれる機能がありません。

そのために画像を使うときには、注意が必要です。はてなブログの画像の使い方をしっかりと理解しましょう。

今回は以上です。

あわせて読みたい記事

おすすめのフリー素材サイトを知りたい場合には、こちら。

はてなブログの書き方を知りたいなら、こちら。