紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

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

f:id:slash1196:20210619202111j:plain

hatena-beginner

はてなブログ初心者

「はてなブログで画像の貼り方ってどうしたらいいの?

気を付けることとかあるのかな。

教えてほしいな。」

 

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

 

この記事で分かること

  • はてなブログに画像を使う手順
  • はてなブログで画像を使うときに知っておきたいこと【SEOにも最適】
  • はてなブログの画像でやるべき対策方法

 

こんにちわ、紅蓮です。

 

はてなブログで書いていると画像の貼り方に気を付けないといけません。

今回は、はてなブログでの画像の使い方をお話していきます。

 

この記事を読むと画像の使い方に加えて、SEOに対応していくことができるようになります。

 

この記事を書く僕ははてなブログ歴は3年目。

今ではアフィリエイトで収益を月に3,000円ほどいただくまでになっています。

 

そんな僕も画像の使い方を間違ってえらいことになったことが…。

そんな経験も含めて、画像の使い方に関して丁寧に説明します。

 

では行ってみましょう。

Here We Go!!

 

 

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

step-of-setting-images-in-hatenablog

はてなブログに画像を使う手順をお話していきましょう。

手順は以下の通り。

 

  • 手順①画像をダウンロード
  • 手順②はてなブログの編集画面で、画像をアップロード
  • 手順③編集画面の入れたい位置にカーソルを移動
  • 手順④アップロードした写真をクリック
  • 手順⑤写真が貼り付けられる

 

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

 

手順①画像をダウンロード

まず一つ目の手順は、画像をダウンロードすることですね。

画像素材サイトなどでいいなと思うものをダウンロードしましょう。

 

  画像をダウンロードするときの注意点

この時に注意したいのは、画像は著作物に値することです。

勝手に無断転載すると著作権違反になるので注意が必要ですね。

 

もし画像をブログに使うときには、商用利用などができる画像素材サイトもあるので使うのがおすすめですね。

 

おすすめの商用利用できる画像素材サイトは、【初心者必見】アフィリエイトで使えるフリー素材サイトの選び方にて紹介していますので、是非そちらをお読みくださいね。

 

手順②はてなブログの編集画面で、画像をアップロード

手順の2つ目は、はてなブログの記事編集画面で、画像をアップロードします。

 

  • 手順①編集画面の横の一番上の画像アイコンをクリック
  • 手順②写真を投稿ボタンをクリック
  • 手順③好きな画像をクリック

 

すると画像がアップロードされます。

 

  写真のアップロードの際の注意点

じつは写真のアップロード先は、はてなブログの運営するフォトライフに保存される仕組みになっていますね。

 

またHatena Blog(private)というフォルダに入るようになっています。

 

ですから確認するときには、フォトライフにアクセスして確認するようにしましょう。

 

手順③編集画面の入れたい位置にカーソルを移動

手順の3つ目は、記事の編集画面の画像を入れたい場所にカーソルをあわせることですね。

 

以下のような感じですね。

want-to-paste-picture-here

 

手順④アップロードした写真をクリック

手順の4個目は、アップロードした写真をクリックすることです。

 

好きな画像をクリックしましょうね。

 

画像では、以下の感じ。

 

手順⑤写真が貼り付けられる

すると、入れたいところに画像が入っているはずです。

画像が貼り付けられていたら、OKですね。

 

プレビューを確認しましょう。

 

以下は当ブログでの確認画面。

success-to-paste-picture-here

 

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

this-is-the-point

ここでは、はてなブログで画像を使うときに知っておきたいことをお話していきます。

 

というのも実は、Google先生は以下のことを推奨しているんですね。

 

  • 気を付けたいこと①画像の軽量化をしてアップロードを行うこと
  • 気を付けたいこと②alt属性を使って万人に使えるものを作ること

 

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

 

気を付けたいこと①画像の軽量化

実はこの軽量化って実はものすごく重要です。

というのも読者が読むときに全然サクッと見れないのは困るからです。

 

しかもブログの中で1、2を争うくらいに画像の読込みってデータ量が大きいんですよね。

 

データ量が大きくなると表示速度が遅くなってしまって、読者にストレスもかかってしまい、SEO的にもよくないです。

 

なんせ、Google先生は10の事実の中で、以下のように言ってますよね。

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

 

そうなると、読者にストレスをかけないようにないといけません。

そのうえでも、ブログの画像の軽量化は気を付けたいところですね。

 

気を付けたいこと②alt属性を使って万人に使えるものを作ること

alt属性とは簡単に言えば、写真に書いてある情報を検索エンジンに伝える説明のようなものですね。

 

読者の場合は目で見てわかりますが、検索エンジンはロボットなので目で見ることができませんよね。

 

そこで有効になるのが、alt属性なのですね。

 

このalt属性とっても優秀で、なかなか出てこない時にはどんな情報が書いてあるかをテキストとして出してくれるんです。

そのために読者にも、なるほどっと思ってもらうことができるんですよね。

 

ですからやっておいたほうがいいですね。

 

はてなブログの画像でやるべき対策方法

how-to-optimize-the-image

ここではてなブログの画像でやるべき対策をお話していきましょう。

 

やるべきことは、以下の通り。

 

  • ①画像の軽量化の方法
  • ②画像にalt属性を入力する方法

 

では実際にやっていきましょう。

 

①画像を圧縮する方法

画像を圧縮する方法は、主に以下の3つですね。

 

  • 方法①フォトライフの設定で圧縮する方法
  • 方法②イメージ圧縮ツールを使う方法
  • 方法③画像編集ソフトを使う方法

 

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

 

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

まず一つ目の方法は、フォトライフの設定で圧縮する方法ですね。

 

この方法はフォトライフの設定をいじることで、画像の大きさを自動的にリサイズして小さくする方法ですね。

 

一度設定すると、大きいものを自動的にリサイズしてくれるために何度も何度も設定する必要がありません。

 

やり方は、以下の通り。

 

  手順①はてなの編集画面の横の「写真を投稿」をクリック

post-picture

まずはてなブログの記事編集画面の横の「写真を投稿」アイコンをクリックしましょう。

 

  手順②「はてなフォトライフで編集する」をクリック

次に「はてなフォトライフで編集する」をクリックしましょう。

 

すると、はてなフォトライフのホーム画面に行きます。

 

  手順③右上の「設定」をクリック

click-the-setting

すると右上に「設定」というところがあるので、そちらをクリックします。

  手順④「画像サイズ」と「画質」を変更

すると、上記の画面になるので、その中から「画像サイズ」と「画質」をクリックして変更します。

 

  画質のおすすめ

だいたい70%くらいにすると、画質が落ちずに見れるかなっていうぎりぎりのラインですね。

 

65%ではもう落ちてしまいますので、70%くらいがちょうどいいですね。

 

  手順⑤「この内容に変更する」をクリック

click-chage-this-contents

最後に「この内容に変更する」をクリックするのをお忘れなく。

 

方法②イメージ圧縮ツールを使う方法

画像圧縮する2つ目の方法は、イメージ圧縮ツールを使う方法です。

 

この方法は、画像圧縮ツールを使うことによってあらかじめ、画像を圧縮して置いたうえではてなブログにアップロードする方法ですね。

 

メリット的にははてなブログにアップロードする時点で小さくなっているために、負荷がかからないことですね。

 

ですから画像を圧縮した状態で使っても特に問題なくサクサク動きます。

 

画像圧縮ソフトは、TinyJPG がおすすめですね。

おすすめの画像圧縮ソフトに関しては、別記事でも説明しますので是非そちらもご覧くださいね。

 

方法③画像編集ソフトを使う方法

画像圧縮する3つ目の方法は画像編集ソフトを使う方法ですね。

 

説明画像を作るのには非常に重宝しますね。

 

画像編集ソフトを使うと画像のサイズを変更することができるので、ファイルの大きさを変更できますね。

 

また大きさや見た目をいじれるので、オリジナリティあふれる画像に出来上がりますね。

 

WINDOWSを使っているならもともと入っているペイントを使う大きさを変えられますね。

お試しにやってみるのもいいかも。

 

  おすすめの画像の解像度

画像の解像度に関してですが、どのくらいの解像度にすればいいのでしょうか。

 

この辺はテーマによってまちまちで決まりはありませんが、大体長辺が1,000px未満あれば大丈夫かなって思いますね。

 

しかもはてなブログの場合には、テーマに合わせてリサイズしてくれるので1,000pxを超えるようなものではない限りは特に問題はないと思いますね。

 

  ファイル形式はPNGよりもJPGを使うのがおすすめ

はてなブログのファイル形式は、PNG、JPG、GIFに対応しています。

 

その中でも、PNGとJPGどっちがいいのってなると思います。

これは間違いなくJPGですね。

 

というのもJPGのほうがものすごく軽いんです。

以下の画像はPNGとJPEGの画像ですね。

compare-with-png-and-jpg.png
compare-with-png-and-jpg.jpg

左がPNGで右がJPGですね。



大きさも、同じですね。

でもPNGは60.6KBで、JPEGは19.3KBなんです。

約3分の1くらいですね

 

見た感じそんなにわからないですよね。

読込速くするのにはJPEGのほうがいいですね。

 

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

はてなブログのalt属性を入力する方法ですね。

 

手順は、超簡単ですね。

画像を選ぶところまでは同じで、そのあと貼り付け時に詳細を設定するというところにチェックを入れます。

 

そのあと、選択した写真を貼り付けをクリックします。

すると以下のような画面になります。

here-is-to-write-alt-text

画像の赤く囲っているところに英語で書きましょう。

 

例えば、上記の画像の場合は、here-is-to-write-alt-textという感じですね。

 

なぜ英語なのかというと、Google先生が英語を推奨しているからですね。

 

なお言葉をつなぐのに使うものは、アンダースコア(_)を使うのではなくハイフンを使うようにしましょう。 

こちらもGoogle先生が推奨しているからですね。

 

書き終わったら普通にエンターを押してもらえば、画像の添付ができていますので確認をしてくださいね。

 

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

お疲れさまでした。

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

 

まとめると、以下のようになります。

 

まとめ
    • はてなブログに画像を使う方法は以下の通り.
      • 手順①画像をダウンロード
      • 手順②はてなブログの編集画面で、画像をアップロード
      • 手順③編集画面の入れたい位置にカーソルを移動
      • 手順④アップロードした写真をクリック
      • 手順⑤写真が貼り付けられる
    • でもそのままやってしまうとSEO的にはよくない。なぜならGoogle先生は以下のことを推奨しているから。
      • ①画像の軽量化
      • alt属性の入力
    • 画像の軽量化のやり方は、以下の通り。
      • ①フォトライフで設定をして圧縮する方法
      • ②画像圧縮ツールを使う方法
      • ③画像編集ツールを使う方法
  • Altの使い方は貼り付け時に詳細を設定するにチェックを入れてalt属性を入れる。この時には英語を使って、言葉と言葉をハイフンでつなぐ。

 

最終的にはてなブログの画像の使い方を知るのは、SEO的にもよくなりますからぜひともやってもらえたらと思います。

 

そして、ブログ運営に役立ててもらえたらと思います。

 

もしまだ始めていないというならばぜひ始めましょう。

 

以下の記事を読めばすぐに始められます。

 

 

ぜひ今から始めても全然遅くないので始めていきましょう。

 

ってことで今回はこの辺で。

また次回に。