ぴっぴのはてなブログでアフィリエイト

ブログ初心者ぴっぴがはてなブログでアフィリエイトに挑戦しています。

ぴっぴのはてなブログでアフィリエイト

 

はてなブログの始め方
はてなブログの使い方
アフィリエイト本17冊の比較
ブログアフィリエイトのおすすめASP

はてなブログの画像の使い方まとめ

はてなブログの画像の使い方まとめ

※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖°
  • はてなブログ初心者です。
  • ブログに画像を使いたいのですが上手にできません💦
  • はてなブログで画像を誰よりも上手に使えるようになりたいです!

ぴっぴ(@hiyoko_no_pippi)です!

はてなでブログを始めたばかりの頃、ぴっぴも上手に画像を使いたいと思いました。そんなぴっぴも毎日画像を使い続けたおかげで、はてなブログの画像の機能をだいぶん使えるようになっています。しかも画像を使ってトップページにレコメンドを設置できるようにもなりました。

ということで今回の「ぴっぴのはてなブログアフィリエイト」は、はてなブログの画像の使い方をまとめました。

  • はてなブログで画像を使うケース
  • はてなブログの画像の使い方
  • ブログで画像を使うときに注意すること
  • 画像を使うときに便利なツール

このようにこちらの記事では、はてなブログの画像に関することを網羅しています。またそれぞれの使い方の詳細記事にリンクを貼っていますので、ブックマークやブラウザのお気に入りにして素敵なブログ作りにお役立てくださいね!

はてなブログで画像を使う10このケース

はい、はてなブログで画像を使うケースは10個あります。それは次のとおりです。

ブログのアイコン

はい、ブログのアイコンに画像を使います。

はてなブログでは用途によってアイコンのサイズが自動的にリサイズされます。しかしサイズが小さ過ぎるとぼやけるので大きい目のサイズがよいですよ。

おすすめのサイズは152✖152ピクセル! 念のために各ブラウザで表示されるサイズを書いておきますね。

  • IEのタブ:16✖16
  • IE9のピン留め機能:24✖24
  • グーグルクロームのタブ:32✖32
  • ファイアフォックスのタブ:32✖32
  • サファリのタブ:32✖32
  • iosのホーム画面:152✖152
  • Androidのホーム画面:152✖152

アイキャッチ画像

はい、ブログのアイキャッチに画像を使います。

はてなブログアイキャッチ画像のサイズは縦横比が縦9横16になるようにすれば、どんな大きさでも大丈夫なはずです。

しかしURLを貼り付けてツイートしたものを見ると、縦252横448以上は見切れてしまいます。なのでアイキャッチ画像に枠を付けない方が見栄えが良くなるのでいいかも!

プロフィール画像

はい、プロフィールに画像を使います。はてなブログのデフォルトのプロフィールを使う場合、縦横比64✖64以上が良いようです(そのようにはてなブログヘルプに書かれています)。

ヘッダ画像

はい、ヘッダに画像を使います。

はてなブログのヘッダで使う画像は縦200横1200です。しかし、このサイズで設置すると画像の下側が少し見切れてしまいますので、縦を少し短くするか下側が見切れるのを承知のうえで設置しましょう。

記事に貼り付ける画像

普通、画像を貼り付けると記事幅にリサイズされます。しかし表示速度を考えると貼り付けた後に画像サイズを設定した方がいいですよ。

はてなスター

はい、はてなスターにも画像が使われています。使われる画像はプロフィールアイコンで設定した画像です。

はてなブックマーク

はい、はてなブックマークにも画像が使われます。使われる画像はプロフィールアイコンで設定した画像です。

ブログカード

ブログカードに画像が使われます。ブログカードに使われる画像は次のとおりです。

  • 自動生成されたもの
  • ブログ自体に設定したもの
  • 各記事に設定したもの

サイズはアイキャッチ画像を500✖500にトリミングしたものが使われます(アイキャッチ画像の中心から左右に250ピクセルずつ上下に250ピクセルずつ)。

サムネイル

はい、サムネイルに画像が使われます。サムネイルに使われる画像は次のとおりです。

  • 自動生成されたもの
  • ブログ自体に設定したもの
  • 各記事に設定したもの

サムネイルのサイズは記事一覧やサイドバー、関連記事で違います。

  • pro版の記事一覧:アイキャッチ画像の縦横比を保持したまま長辺500ピクセル
  • サイドバー:自由に設定可能
  • 関連記事:アイキャッチ画像を500✖500にトリミングしたものがリサイズされる

はてなブログ グループ

はてなブロググループに画像は使われます。使われる画像はアイキャッチ画像でサイズは500✖500にトリミングしたものです。

はてなブログで画像を使うときに注意すること

はい、はてなブログで画像を使うときに注意することがあります。

  • 大きい容量の画像を使わない
  • 著作権と肖像権

大きい容量の画像を使わない

はい、画像を使うとき容量の大きいものを使わないようにしましょう。理由は次のとおりです。

  • 表示速度が遅くなる
  • 画像をアップロードできない

表示速度が遅くなると、アフィリエイトの提携申請で非承認になる可能性や記事の直帰率が高くなりますし、はてなスターを付けた先のブログの表示速度が遅くなるので迷惑をかけます。なので画像を使うときは容量の大きいものは使わないようにしましょう。容量の大きい画像を使うとき圧縮することをおすすめします。

著作権と肖像権

はい、画像を使うときに著作権や肖像権に気を付けましょう。例えば芸能人の写真をブログに貼り付けたい場合、その許可を得る必要があります。映画やマンガの一場面も同様です。好きな芸能人やマンガでブログに使わないようにしましょう。

ブログで画像を使うときに便利なツール

ブログで画像を使うときに便利なツールがあります。

  • 画像の加工
  • 画像の圧縮

画像の加工

はい、画像の加工のツールをいくつか紹介します。

画像の圧縮

はい、続いて画像の圧縮に使うツールをいくつか紹介します。

はてなブログアイキャッチ画像の設定

はてなブログのアイキャッチ画像の設定方法

はてなブログではアイキャッチ画像のアイキャッチ画像の設定方法は3つあります。

ここでは、よく使われている記事ごとのアイキャッチ画像の設定方法について簡単に紹介します。詳しい設定方法は「はてなブログのアイキャッチ画像の設定方法」をご覧ください。

  1. >を押す
  2. +写真を投稿ボタンを押す
  3. 画像を選び開くボタンを押す
  4. キャプションを入力する
  5. alt属性を入力する
  6. 記事作成画面に貼り付けるボタンを押す
  7. 編集ボタンを押す
  8. 画像を選び🔽を押す
  9. メニューを選んで保存する

はてなブログのアイキャッチ画像の設定方法はこちら

はてなブログのアイコン画像の設定

はてなブログのアイコンの設定をまるっと説明!のアイキャッチ画像

はい、ここではブログのアイコンの簡単に設定方法を紹介します。詳しい設定方法は「はてなブログのアイコンの設定がまるっと分かりますよ!」をご覧ください。余談ですが、そちらではアイコン作りに便利な素材集も紹介しています。

  1. 設定画面に移動
  2. ファイルを選択
  3. アイコンにする画像を選ぶ
  4. 変更するボタンを押す
  5. 変更を確認する

はてなブログのアイコンの設定はこちら

はてなブログプロフィール画像の設定

はてなブログのプロフィール写真の設定変更

はい、さっきお話しましたがプロフィールにも画像が使われていますので、ここでは簡単にプロフィール画像の設定方法を紹介します。

詳しいプロフィールの設定については「はてなブログのプロフィール画像の設定変更」と「はてなブログのプロフィールの設定変更と削除を完全説明!」でお話しています。

念のためにお伝えしておきますが、サイドバーにプロフィール画像を反映するにははてなブログのプロフィールの設定変更と削除を完全説明!でお話しています方法が必要ですので、くれぐれもご注意くださいませ

  1. プロフィールに使う画像を用意する
  2. アカウント設定に移動
  3. ファイルを選択し画像を選ぶ
  4. 設定ボタンを押し画像をアップロードする
  5. 変更するボタンを押す
  6. デザイン画面に移動
  7. カスタマイズボタン
  8. プロフィール編集
  9. プロフィール画像の表示するにチェックを入れる
  10. 適用を押す
  11. 変更を保存する

はてなブログのヘッダー画像の設定

はてなブログのヘッダー画像の設定方法

はい、ここではブログのヘッダー画像の設定方法について簡単にお話しますね。なお詳しい手順は「はてなブログのヘッダー画像の設定方法」で紹介しています。もちろん画像付きすよ!

  1. ヘッダに使う画像の用意
  2. ヘッダに使う画像をアップロードする
  3. デザイン画面に移動
  4. カスタマイズボタン
  5. ヘッダ
  6. ファイルを選択
  7. 表示設定
  8. 変更を保存する

はてなブログのヘッダー画像の設定方法はこちら

はてなブログの記事に画像を貼り付ける方法

画像を貼り付ける

ここでは、はてなブログの記事に画像を貼り付ける方法を簡単に紹介します。詳しい方法は「はてなブログの記事に画像を貼り付ける方法と削除の仕方」をご覧ください。

  1. 写真を投稿を押す
  2. 画像をアップロードする
  3. 画像の設定をする
  4. 記事編集画面に貼り付けるボタンを押す

はてなブログの記事に画像を貼り付ける方法はこちら

はてなブログの記事に貼り付けた画像の削除方法

画像を削除する

貼り付けた画像は削除できます。簡単に削除方法を紹介しますので試してみてください。

  1. 削除したい画像を指定する
  2. キーボードのDeleteを押す

はてなブログの記事に貼り付けた画像の削除はこちら

はてなブログの画像のサイズ変更

画像のサイズ変更

はてなブログでは貼り付けた画像のサイズを簡単に変えられます。ここでは見たまま編集での貼り付けた画像のサイズ変更について簡単に紹介しますので試してみてください。

  1. サイズを変更したい画像を指定する
  2. 画像のサイズを変更する

詳しいはてなブログの画像サイズの変更はこちら 

はてなブログの画像を中央や右に寄せる方法

画像の位置を真ん中や左右に固定する

はてなブログは画像の位置を真ん中や左、右に固定できます。ただし見たまま編集ではできません。それ以外のHTML編集とはてな記法markdownの3つの編集方法で画像の位置を固定できます。3つとも手順は同じです。

  1. 画像を貼り付ける
  2. 画像のサイズを変更する
  3. 画像の位置を固定するコードを書く

詳しいはてなブログの画像の位置を固定する方法はこちら

はてなブログの画像にリンクを貼る方法

画像にリンクを埋め込む

はてなブログは画像にリンクを埋め込めます。4つの編集で画像にリンクを埋め込め、基本的な手順は同じです。詳しい手順は「はてなブログの画像にリンクを貼り付ける方法」をご覧ください。画像付きでお話しています。

  1. 画像を貼り付ける
  2. リンク先のURLをコピーする
  3. 画像にリンク先のURLを指定する

はてなブログの画像にリンクを埋め込む方法はこちら

はてなブログの記事に画像を横並びに貼り付ける方法

画像の横並び

はてなブログは記事に画像を横に並べて貼り付けられます。画像の貼り付けができたら簡単にできますので挑戦してみてください。

  1. 写真を投稿を押す
  2. 横に並べたい画像を複数選ぶ
  3. 必要事項の入力
  4. 横並びボタンを押す
  5. 選択した写真を貼り付けボタンを押す

詳しいはてなブログの画像の横並びにする方法はこちら 

はてなブログの画像の横に文字を回り込ませる方法

画像の横に文字を回り込ませる

はてなブログも画像の横に文字を回り込ませることができます。ただし見たまま編集ではできませんので、HTMLやはてな記法markdownを使う必要があります。それらを覚えるのが面倒くさいという方は「HTMLで画像の横に文字をグルグル回り込みさせてブログ記事をオシャレにしない?」で、それぞれのコードを紹介していますので、そちらをコピーしてお使いくださいね。

はてなブログで画像の横に文字を回り込みさせる方法はこちら

はてなブログのアップロードした画像の容量の確認

画像の容量を確認

はてなブログは、その月にアップロードした画像の容量を確認できます。確認す場所は次のとおりです。

ところで、無料版とpro版それぞれの容量は違いますのでご注意ください。

はてなブログの画像の容量を確認する方法はこちら

はてなブログにアップロードした画像の最大画像サイズを変更する

実は、はてなブログでは記事に画像を貼り付けるとき、アップロードした画像の長辺が1200ピクセルに縮小されています。

そんなの嫌だという方はご安心ください。もしも最大画像サイズを変えたい場合、はてなフォトライフで設定を変更できますよ。

  1. はてなフォトライフに移動
  2. ヘッダの設定を押す
  3. 画像サイズを変更する
  4. この内容に変更するを押す

はてなブログで画像を引用するときに使えるキャプションの設定

はい、画像を貼り付けるときに設定できるキャプションを使って、画像をよそから引用していることを伝えることができます。引用するときの説明文は次のとおりです。

  • 出典:〇〇サイト「記事名」
  • 出典:▢▢株式会社「記事名」

はてなブログの画像の使い方Q&A

質問されそうなことをこちらにまとめました。

Q1:画像を上手に編集できない

画像の縦横比を覚えて編集上手になろう

はい、画像の縦横比を覚えるといいですよ。画像にはきれいに見える縦横比があります。それを意識して画像作りをするだけで仕上がりが全然違いますので、この機会に縦横比を覚えてみてください。きっと画像を上手に編集できるはずです。

それと今回紹介しました画像の編集ツールを使ってみてください。画像編集ツールはたくさんありますが、一番使いやすいものを見つけるのが上達の近道だと思います。

画像の縦横比についてはこちら

Q2:アイキャッチ画像のサイズは何ピクセルがいいの?

はい、はてなブログ内での画像のサイズは縦500横500(中心から上下左右に250ピクセルずつ)でトリミングされることを念頭にアイキャッチ画像を作るといいと思います。例えば画像に文字を入れる場合、縦500横500の中に収めると読まれやすくなるでしょう。また上下左右見切れる部分があるので枠を入れるのは止めた方がいいかもしれません。

SNSの見え方はそれぞれ違いますので、画像の中心から上下左右に何ピクセル見えるかそれぞれ計算してみてはいかがでしょうか? そして、それぞれのサイズで作った狩野画像を重ねて、その重なる部分に文字を入れるといいかもですね。

  • ツイッターのタイムライン|縦1:横1.91
  • インスタグラム横長|縦1:横1.91
  • インスタグラム縦長|縦1.25:横1
  • インスタグラム ストーリーズ|縦1:横1.91
  • フェイスブック投稿画像|縦1:横1.91

まとめ

このようにはてなブログの画像の使い方は、たくさんあります。

  • ブログのアイキャッチ画像
  • ブログのアイコン
  • プロフィール画像
  • ブログのヘッダー画像
  • 記事に画像を貼り付ける
  • 記事に貼り付けた画像を削除する
  • 画像のサイズ変更
  • 画像の位置調整
  • 画像にリンクを貼る
  • 記事に画像を横並びに表示する
  • 画像の横に文字を回り込ませる

そのため一度に覚えるのは大変です。しかし、それぞれの操作は簡単なので覚えてしまうと上手に画像を使いこなせるようになりますよ。

画像の使い方を覚えるまでは、こちらの記事をブックマークしたりブラウザのお気に入りに保存したりしてご活用くださいね!

以上ぴっぴでした! ありがとうございます!

※こちらの記事を読まれた方は次の記事も読まれています°˖☆◝(⁰▿⁰)◜☆˖°

はい、ぴっぴからお知らせです💦

ぴっぴのはてなブログアフィリエイトでは、今回みたいにはてなブログの使い方についてお話しています。

その中にはSEO対策に関係のある記事もありますので、この機会にぜひお読み頂けると嬉しいです。