| 記事の種類 | はてなブログの使い方、はてなブログの書き方 |
| SEO対策 | 関係あり |
| SXO対策 | やや関係あり |
| 難しさ | 普通 |
| 重要さ | 実は超重要 |
次のような方にオススメ！
- はてなブログの記事に画像を貼りたい
- 貼り付けた画像のサイズを変えたい
- 画像の挿入の制限や注意事項を知りたい
はてなでブログを始めたばかりの頃、ぴっぴ（@hiyoko_no_pippi）も上手に画像を使いたいと思いました。
そんなぴっぴも 、はてなブログの画像に関する機能を覚えたおかげで、記事に画像を貼ったり画像のサイズを変えたりできるようになりました。
そのような訳で今回の「ぴっぴのはてなブログでアフィリエイト」は、はてなブログの画像の使い方をまとめです。
- はてなブログで画像を使うケース
- はてなブログの画像の使い方
- ブログで画像を使うときに注意すること
- 画像を使うときに便利なツール
このようにこちらの記事では、はてなブログの画像に関することを網羅しています。
またそれぞれの使い方の詳細記事にリンクを貼っていますので、ブラウザのお気に入りにして素敵なブログ作りにお役立てくださいね！
記事を書いた人
ひよこブロガー
- ・ブログ開始69日で合計1万PV
- ・ブログ開始75日で収益獲得
- ・アクセスの約90％が検索流入
応援していただけるとスゴク嬉しいです！
( ﾟдﾟ)ﾊｯ!
自己紹介させてください。
あらためまして、ぴっぴです！
現役のはてなブロガーで、ぴっぴのはてなブログでアフィリエイトでは「はてなブログ」に関する記事を書いています。
ちなみに、本ブログのコンセプトは、はてなブログに関して困っている方を一人でも減らすことです。
ブログの更新をしていない間も、おかげ様で毎月約2900人の方に本ブログを利用していただいています。
- はてなブログの記事に画像を貼り付ける方法
- はてなブログの記事に貼り付けた画像の削除方法
- はてなブログのアイキャッチ画像の設定
- はてなブログのアイコン画像の設定
- はてなブログのプロフィール画像の設定
- はてなブログのヘッダー画像の設定
- はてなブログの画像のサイズ変更
- はてなブログの画像を中央や右に寄せる方法
- はてなブログの画像にリンクを貼る方法
- はてなブログの記事に画像を横並びに貼り付ける方法
- はてなブログの画像の横に文字を回り込ませる方法
- はてなブログのアップロードした画像の容量の確認
- はてなブログにアップロードした画像の最大画像サイズを変更する
- はてなブログで画像を引用するときに使えるキャプションの設定
- はてなブログで画像を使う１０このケース
- はてなブログで画像を使うときに注意すること
- ブログで画像を使うときに便利なツール
- はてなブログの画像の使い方Ｑ＆Ａ
- まとめ
- これから記事を書く方へご案内
はてなブログの記事に画像を貼り付ける方法
ここでは、はてなブログの記事に画像を貼り付ける方法を簡単に紹介します。詳しい方法は「はてなブログの記事に画像を貼り付ける方法と削除の仕方」をご覧ください。
- 写真を投稿を押す
- 画像をアップロードする
- 画像の設定をする
- 記事編集画面に貼り付けるボタンを押す
はてなブログの記事に貼り付けた画像の削除方法
貼り付けた画像は削除できます。簡単に削除方法を紹介しますので試してみてください。
- 削除したい画像を指定する
- キーボードのDeleteを押す
はてなブログのアイキャッチ画像の設定
はてなブログではアイキャッチ画像のアイキャッチ画像の設定方法は３つあります。
- 自動生成
- 注目エントリーやSNSで利用されるもの
- 記事ごと
ここでは、よく使われている記事ごとのアイキャッチ画像の設定方法について簡単に紹介します。詳しい設定方法は「はてなブログのアイキャッチ画像の設定方法」をご覧ください。
- ＞を押す
- ＋写真を投稿ボタンを押す
- 画像を選び開くボタンを押す
- キャプションを入力する
- alt属性を入力する
- 記事作成画面に貼り付けるボタンを押す
- 編集ボタンを押す
- 画像を選び🔽を押す
- メニューを選んで保存する
はてなブログのアイコン画像の設定
はい、ここではブログのアイコンの簡単に設定方法を紹介します。詳しい設定方法は「はてなブログのアイコンの設定がまるっと分かりますよ！」をご覧ください。余談ですが、そちらではアイコン作りに便利な素材集も紹介しています。
- 設定画面に移動
- ファイルを選択
- アイコンにする画像を選ぶ
- 変更するボタンを押す
- 変更を確認する
はてなブログのプロフィール画像の設定
はい、さっきお話しましたがプロフィールにも画像が使われていますので、ここでは簡単にプロフィール画像の設定方法を紹介します。
詳しいプロフィールの設定については「はてなブログのプロフィール画像の設定変更」と「はてなブログのプロフィールの設定変更と削除を完全説明！」でお話しています。
念のためにお伝えしておきますが、サイドバーにプロフィール画像を反映するには「はてなブログのプロフィールの設定変更と削除を完全説明！」でお話しています方法が必要ですので、くれぐれもご注意くださいませ。
- プロフィールに使う画像を用意する
- アカウント設定に移動
- ファイルを選択し画像を選ぶ
- 設定ボタンを押し画像をアップロードする
- 変更するボタンを押す
- デザイン画面に移動
- カスタマイズボタン
- プロフィール編集
- プロフィール画像の表示するにチェックを入れる
- 適用を押す
- 変更を保存する
はてなブログのヘッダー画像の設定
はい、ここではブログのヘッダー画像の設定方法について簡単にお話しますね。なお詳しい手順は「はてなブログのヘッダー画像の設定方法」で紹介しています。もちろん画像付きすよ！
- ヘッダに使う画像の用意
- ヘッダに使う画像をアップロードする
- デザイン画面に移動
- カスタマイズボタン
- ヘッダ
- ファイルを選択
- 表示設定
- 変更を保存する
はてなブログの画像のサイズ変更
はてなブログでは貼り付けた画像のサイズを簡単に変えられます。ここでは見たまま編集での貼り付けた画像のサイズ変更について簡単に紹介しますので試してみてください。
- サイズを変更したい画像を指定する
- 画像のサイズを変更する
はてなブログの画像を中央や右に寄せる方法
はてなブログは画像の位置を真ん中や左、右に固定できます。ただし見たまま編集ではできません。それ以外のHTML編集とはてな記法、markdownの３つの編集方法で画像の位置を固定できます。３つとも手順は同じです。
- 画像を貼り付ける
- 画像のサイズを変更する
- 画像の位置を固定するコードを書く
はてなブログの画像にリンクを貼る方法
はてなブログは画像にリンクを埋め込めます。４つの編集で画像にリンクを埋め込め、基本的な手順は同じです。詳しい手順は「はてなブログの画像にリンクを貼り付ける方法」をご覧ください。画像付きでお話しています。
- 画像を貼り付ける
- リンク先のURLをコピーする
- 画像にリンク先のURLを指定する
はてなブログの記事に画像を横並びに貼り付ける方法
はてなブログは記事に画像を横に並べて貼り付けられます。画像の貼り付けができたら簡単にできますので挑戦してみてください。
- 写真を投稿を押す
- 横に並べたい画像を複数選ぶ
- 必要事項の入力
- 横並びボタンを押す
- 選択した写真を貼り付けボタンを押す
はてなブログの画像の横に文字を回り込ませる方法
はてなブログも画像の横に文字を回り込ませることができます。ただし見たまま編集ではできませんので、HTMLやはてな記法、markdownを使う必要があります。それらを覚えるのが面倒くさいという方は「HTMLで画像の横に文字をグルグル回り込みさせてブログ記事をオシャレにしない？」で、それぞれのコードを紹介していますので、そちらをコピーしてお使いくださいね。
はてなブログのアップロードした画像の容量の確認
はてなブログは、その月にアップロードした画像の容量を確認できます。確認す場所は次のとおりです。
- 記事編集画面
- はてなフォトライフ
ところで、無料版とpro版それぞれの容量は違いますのでご注意ください。
はてなブログにアップロードした画像の最大画像サイズを変更する
実は、はてなブログでは記事に画像を貼り付けるとき、アップロードした画像の長辺が1200ピクセルに縮小されています。
そんなの嫌だという方はご安心ください。もしも最大画像サイズを変えたい場合、はてなフォトライフで設定を変更できますよ。
- はてなフォトライフに移動
- ヘッダの設定を押す
- 画像サイズを変更する
- この内容に変更するを押す
はてなブログで画像を引用するときに使えるキャプションの設定
はい、画像を貼り付けるときに設定できるキャプションを使って、画像をよそから引用していることを伝えることができます。引用するときの説明文は次のとおりです。
- 出典：〇〇サイト「記事名」
- 出典：▢▢株式会社「記事名」
はてなブログで画像を使う１０このケース
はてなブログで画像を使うケースは１０個あります。
それは次のとおりです。
- ブログのアイコン
- アイキャッチ画像
- プロフィール画像
- ヘッダー画像
- 記事に貼り付ける画像
- はてなスター
- はてなブックマーク
- ブログカード
- サムネイル
- はてなブログ グループ
ブログのアイコン
はい、ブログのアイコンに画像を使います。
はてなブログでは用途によってアイコンのサイズが自動的にリサイズされます。
しかしサイズが小さ過ぎるとぼやけるので大きい目のサイズがよいですよ。
おすすめのサイズは152✖152ピクセル！ 念のために各ブラウザで表示されるサイズを書いておきますね。
- IEのタブ：16✖16
- IE９のピン留め機能：24✖24
- グーグルクロームのタブ：32✖32
- ファイアフォックスのタブ：32✖32
- サファリのタブ：32✖32
- iosのホーム画面：152✖152
- Androidのホーム画面：152✖152
アイキャッチ画像
ブログのアイキャッチに画像を使います。
はてなブログのアイキャッチ画像のサイズは縦横比が縦９横16になるようにすれば、どんな大きさでも大丈夫なはずです。
しかしURLを貼り付けてツイートしたものを見ると、縦252横448以上は見切れてしまいます。なのでアイキャッチ画像に枠を付けない方が見栄えが良くなるのでいいかも！
プロフィール画像
はい、プロフィールに画像を使います。はてなブログのデフォルトのプロフィールを使う場合、縦横比64✖64以上が良いようです（そのようにはてなブログヘルプに書かれています）。
ヘッダ画像
ヘッダに画像を使います。
はてなブログのヘッダで使う画像は縦200横1200です。
しかし、このサイズで設置すると画像の下側が少し見切れてしまいますので、縦を少し短くするか下側が見切れるのを承知のうえで設置しましょう。
記事に貼り付ける画像
普通、画像を貼り付けると記事幅にリサイズされます。しかし表示速度を考えると貼り付けた後に画像サイズを設定した方がいいですよ。
はてなスター
はてなスターにも画像が使われています。
使われる画像はプロフィールアイコンで設定した画像です。
はてなブックマーク
はてなブックマークにも画像が使われます。
使われる画像はプロフィールアイコンで設定した画像です。
ブログカード
ブログカードに画像が使われます。ブログカードに使われる画像は次のとおりです。
- 自動生成されたもの
- ブログ自体に設定したもの
- 各記事に設定したもの
サイズはアイキャッチ画像を500✖500にトリミングしたものが使われます（アイキャッチ画像の中心から左右に250ピクセルずつ上下に250ピクセルずつ）。
サムネイル
サムネイルに画像が使われます。サムネイルに使われる画像は次のとおりです。
- 自動生成されたもの
- ブログ自体に設定したもの
- 各記事に設定したもの
サムネイルのサイズは記事一覧やサイドバー、関連記事で違います。
- pro版の記事一覧：アイキャッチ画像の縦横比を保持したまま長辺500ピクセル
- サイドバー：自由に設定可能
- 関連記事：アイキャッチ画像を500✖500にトリミングしたものがリサイズされる
はてなブログ グループ
はてなブロググループに画像は使われます。
使われる画像はアイキャッチ画像でサイズは500✖500にトリミングしたものです。
はてなブログで画像を使うときに注意すること
はてなブログで画像を使うときに注意することがあります。
- 大きい容量の画像を使わない
- 著作権と肖像権
大きい容量の画像を使わない
画像を使うとき容量の大きいものを使わないようにしましょう。
理由は次のとおりです。
- 表示速度が遅くなる
- 画像をアップロードできない
表示速度が遅くなると、アフィリエイトの提携申請で非承認になる可能性や記事の直帰率が高くなります。
また、はてなスターを付けた先のブログの表示速度が遅くなるので迷惑をかけるおそれが。
なので画像を使うときは、容量の大きいものは使わないようにしましょう。
もしも容量の大きい画像を使うときは、圧縮することをおすすめします。
著作権と肖像権
画像を使うときに著作権や肖像権に気を付けましょう。
例えば芸能人の写真をブログに貼り付けたい場合、その許可を得る必要があります。映画やマンガの一場面も同様です。
好きな芸能人やマンガでブログに使わないようにしましょう。
ブログで画像を使うときに便利なツール
ブログで画像を使うときに便利なツールがあります。
- 画像の加工
- 画像の圧縮
画像の加工
画像の加工のツールをいくつか紹介します。
- ペイント
- ３Ｄペイント
- キャンバ
- pixlr
- エクセル
- ワード
- illustrator
- Photoshop
画像の圧縮
続いて画像の圧縮に使うツールをいくつか紹介します。
はてなブログの画像の使い方Ｑ＆Ａ
質問されそうなことをこちらにまとめました。
- 画像を上手に編集できない
- アイキャッチ画像のサイズは何ピクセルがいいの？
Ｑ１：画像を上手に編集できない
はい、画像の縦横比を覚えるといいですよ。画像にはきれいに見える縦横比があります。それを意識して画像作りをするだけで仕上がりが全然違いますので、この機会に縦横比を覚えてみてください。きっと画像を上手に編集できるはずです。
それと今回紹介しました画像の編集ツールを使ってみてください。画像編集ツールはたくさんありますが、一番使いやすいものを見つけるのが上達の近道だと思います。
Ｑ２：アイキャッチ画像のサイズは何ピクセルがいいの？
はい、はてなブログ内での画像のサイズは縦500横500（中心から上下左右に250ピクセルずつ）でトリミングされることを念頭にアイキャッチ画像を作るといいと思います。例えば画像に文字を入れる場合、縦500横500の中に収めると読まれやすくなるでしょう。また上下左右見切れる部分があるので枠を入れるのは止めた方がいいかもしれません。
各SNSの見え方はそれぞれ違いますので、画像の中心から上下左右に何ピクセル見えるかそれぞれ計算してみてはいかがでしょうか？ そして、それぞれのサイズで作った狩野画像を重ねて、その重なる部分に文字を入れるといいかもですね。
- ツイッターのタイムライン｜縦1：横1.91
- インスタグラム横長｜縦1：横1.91
- インスタグラム縦長｜縦1.25：横1
- インスタグラム ストーリーズ｜縦1：横1.91
- フェイスブック投稿画像｜縦1：横1.91
まとめ
このようにはてなブログには、画像を使う場面がたくさんあります。
- ブログのアイキャッチ画像
- ブログのアイコン
- プロフィール画像
- ブログのヘッダー画像
- 記事に画像を貼り付ける
- 記事に貼り付けた画像を削除する
- 画像のサイズ変更
- 画像の位置調整
- 画像にリンクを貼る
- 記事に画像を横並びに表示する
- 画像の横に文字を回り込ませる
そのため一度に覚えるのは大変です。
しかし、それぞれの操作は簡単なので覚えてしまうと上手に画像を使いこなせるようになりますよ。
画像の使い方を覚えるまでは、こちらの記事をブラウザのお気に入りに保存してご活用くださいね！
これから記事を書く方へご案内
ぴっぴのはてなブログでアフィリエイトでは、編集画面の使い方が分かる「画像でわかる【はてなブログの記事の書き方】」をご用意しています。
記事の内容
- 使用頻度の高い【機能の使い方を21枚の画像】で紹介
- オススメの記事の内容
- ネタの探し方
- 記事の品質の上げ方
このような盛りだくさんの内容になっています。
「良い記事を書きたい」または「検索する手間を省きたい」という方は、下記のリンクより「画像でわかる【はてなブログの記事の書き方】」をご覧ください。
