超簡単!はてなブログの画像写真を貼り付けアップロードするやり方


2019年3月30日更新

パソコンとキーボード

ブログサポート60の石黒です。

はてなブログの写真は、パソコンから貼り付けたほうがいいの?スマホからアップロードしたほうが楽なの?」

「画像を圧縮して貼らないと、重くなるんじゃないの?」

「はてなブログに写真を貼り付けるときに、かんたんな方法がないの?」

という疑問などを感じている方も多いのではないでしょうか?

はてなブログの画像を貼り付けるときの基礎を学んでおけば、いろいろなことに応用ができます。

はてなブログ歴4年以上の経験からお伝えする、画像の貼り付けのやり方を、動画などを使って徹底解説しました。

かんたんに、はてなブログに画像を貼り付ける方法をたくさん解説します。

ぜひ、ご覧くださいね。

動画で一通り解説しました。

 

以下の画像の貼り付けのやり方を解説しています。

  1. スマホからの画像貼り付け方法
  2. 画像(写真)の貼り付け時に、キャプション(説明文)を付ける
  3. パソコン&スマホから画像を貼り付けるやり方
  4. はてなブログの画像を横並びに表示するやり方
  5. 画像貼り付け時にalt属性のやり方

 

はてなブログ 画像 (写真)の貼り付け スマホとパソコンのやり方

はてなブログに画像を貼り付けるやり方には、以下2つのやり方があります。

【1】パソコンから

【2】スマホから貼り付ける

 

はてなブログ に画像 (写真)の貼り付ける!スマホからのやり方

まずは、はてなブログのスマホアプリをインストールしてください。

はてなブログのスマホアプリからであれば、スマホで撮った写真をかんたんにブログにアップロードすることができます。

 

iPhone、iPadのはてなブログ、スマホアプリの画像貼り付けのやり方

↓カメラのアイコンをクリック

スマホの記事の書き方画面

 

↓フォトライブラリーを選択

iPhoneスマホ記事の管理画面

 

↓保存されている画像を選択します

保存されている画像を選択

 

アンドロイドのはてなブログスマホアプリの画像貼り付けのやり方

赤枠の「画像」→「ギャラリー」のアイコンをクリックして、写真を選ぶだけで貼り付けができます。

アンドロイドアプリからの写真の挿入のやり方

 

はてなブログに貼りたい画像をスマホからパソコンに送る3つの方法

「スマホの写真をパソコンに送る」

この作業がめんどくさいと感じている方も多いと思います。

はてなブログ歴4年のわたしがやっている、かんたんに貼り付ける方法をご紹介します。

 

【1】LINEに画像を送る

スマホのLINEから、自分宛てに画像送って、パソコンのLINEでダウンロードするというやり方があります。

パソコンにLINEのアプリをインストールできるのがご存知でしょうか?

LINEを使った、画像送信方法は、すぐに画像が送られてくるというメリットがあります。

以下にLINEから画像を送る作業を箇条書きにします。

  1. パソコンとスマホにLINEのアプリをインストールする
  2. スマホからLINEで自分専用のグループを作成する
  3. 自分専用のグループに「はてなブログに貼り付けたい画像」をスマホから送る
  4. パソコンのLINEから送られてきた写真をダウンロードする
  5. ダウンロードした写真をはてなブログに貼り付ける

 

LINEから画像を送る2つのデメリットが以下になります。

  1. LINEをパソコンにインストールしないといけない
  2. パソコンからパスワードを入力して、LINEにログインしないといけない

同じようなやり方では、スマホのGmailから、パソコンのGmailへ画像を送るというやり方もあります。

 

【2】グーグルフォトを使用する

Googleフォトの説明キャプチャ

Googleフォトを使用すれば、スマホから撮った写真が「インターネット上に勝手に保存」されます。(勝手に写真が保存されるようにする設定があります。自分しか見られないように共有の作業は慎重に!)

いちいち、パソコンにスマホで撮った写真を転送する必要がありません。

事前に撮っておいた画像をパソコンからダウンロードするときに便利です。

同期がすぐにされないことがあるので、「今撮った写真を、すぐにパソコンに送りたい!」というときには、不便です。(すぐに反映されるときもあります)

すぐにパソコンに送りたい場合は、LINEを使った送信方法がおすすめです。

わたしは、ダウンロードする時間ももったいないので、Googleフォトで表示させた写真を「画面キャプチャ」をして使用しています。

画面キャプチャソフトは、ファストストーンキャプチャという無料ソフトを使用しています。(Windowsパソコンのみ使用可能)

 

はてなブログとGoogleフォトを連携させて画像の貼り付けをするやり方

はてなブログにはGoogleフォトの写真を、かんたんに貼り付けできるやり方があります。

はてなブログの記事を書く画面の、編集サイドバーに「Googleフォト貼り付け」をクリックします。

サイドバーのGoogleフォト

 

「選択ウィンドウを開く」をクリックして、Googleのアカウントを選択します。

Googleにログインして連携する画面

 

許可ボタンを押します。

Googleフォト連携の許可の画面

 

「携帯の写真」を選択して、画像を選び、「選択」ボタンを押せば画像が貼り付けできます。

Googleフォトの写真を探す画面

 

【3】はてなフォトライフの画像のアップロード機能を使って複数の画像をアップするやり方

はてなフォトライフを使用すれば、複数のスマホの写真を一気に「はてなブログ」へアップロードできます。

スマホから、はてなフォトライフと検索します。

はてなフォトライフGoogle検索

 

アップロードをクリックします。

はてなフォトライフアップロード

 

「ファイルを選択」で、スマホの写真を選びます。複数の画像を選んだら「アップロード」をクリックします。

はてなフォトライフアップロード

 

↓パソコンのはてなブログの「記事を書く」画面の「トップフォルダ」をクリックすると、アップロードした画像が表示されます。

管理画面のフォトライフの使い方

↑あとは、スマホからアップロードした画像を選んでブログに貼り付けるだけです。

 

パソコンの画像をアップロードする場合は、赤枠のところから「はてなフォトライフ」の画像をアップロードするページへいけます。

管理画面のキャプチャ

スマホのやり方と同じ要領で貼り付けできます。

 

画像(写真)の貼り付け時に、キャプション(説明文)を付けるやり方

はてなブログでは、こんな感じに画像の下に説明文を挿入できます。

写真の説明文

【動画説明】キャプション(説明文)を付けるやり方

 

【画像説明】キャプション(説明文)を付けるやり方

「 貼り付け時に詳細を設定する」にチェックを入れて「写真を投稿」をクリック。

画像写真の貼り方説明

貼り付けたい画像を選択すると以下のような画面になります。

説明文の入れ方(キャプション)

画像の説明文を入れてあげましょう。

 

はてなブログの画像を横並びに表示するやり方

はてなブログでは、以下のように画像を横並びに貼り付けることができます。

横並びに表示するやり方

横並びに画像を貼り付けると、読者も見やすくなります。

【動画説明】はてなブログの画像を横並びに表示するやり方

 

【画像説明】はてなブログの画像を横並びに表示するやり方

「1、写真のアイコンをクリック」→「2、写真を複数選びます」→「3、横並びを選択します」

横並びにするやり方

「選択した写真を貼り付け」という青いボタンをクリックして完了です。

 

画像貼り付け時にalt属性を設定するやり方

できたら画像の「alt属性」の設定もしておきましょう。

alt属性とは、「画像を説明した文章」になります。

目の不自由な人が、文章だけで画像の内容を把握できるようにするためのものです。

alt属性を設定すると、Googleの評価があがり、検索されやすくなります。

画像検索にも引っかかるようになり、アクセスアップが期待できます。

↓「 貼り付け時に詳細を設定する」にチェックを入れて「写真を投稿」をクリック。

画像写真の貼り方説明

 

「画像にalt属性を指定する(上級者向け)」にチェックを入れ、画像の説明文を入れてあげましょう。

alt属性の入れ方

この写真の場合は、スマホとポケットWi-Fiと入れます。

 

はてなブログ 画像圧縮3つのやり方

スマホから撮った高解像度の画像をそのまま使用してしまうと、ブログの表示速度が落ちてしまいます。

ブログの離脱率も高くなります。

画像を貼り付けるときは、圧縮することをおすすめします。

 

【1】はてなブログの画像圧縮の設定をしておく

はてなブログに、写真をアップロードするときには、はてなフォトライフで設定をしておきましょう。

写真の貼り付け時に、自動で圧縮されます。

はてなフォトライフの画質設定

ブログのテーマによって、最適な「画像のサイズ」の横サイズは異なります。

600~640くらいに設定をしてみてましょう。

はてなブログに画像貼り付け後、パソコンからの表示を見て、ピッタリのサイズになっていればOKです。

画質も75%くらいでも、画像の見え方には影響はないでしょう。

 

【2】カメラの画質を落として撮ってからアップロードする

スマホから写真を撮るときには、画像の解像度を決められます。

1番低い解像度にしておけば、安心ですね!

ブログの表示速度が遅くなるのを防げます。

「【1】はてなブログの画像圧縮の設定」をやっておけば、【2】はやらなくても大丈夫でしょう。

 

【3】リサイズするソフトを使う

「画像 リサイズ」と検索すると、画像を圧縮してくれるソフトが見つかります。

「リサイズ超簡単!Pro」は、複数の画像を一気に圧縮してくれるの無料ソフトです。

「【1】はてなブログの画像圧縮の設定」をやっておけば、【3】はやらなくても大丈夫でしょう。

はてなブログの画像(写真)は無料画像サイトがおすすめ!

「はてなブログの、この部分に写真をいれたいんだけど、最適な画像がないなぁ。」と諦めているということはありませんか?

はてなブログにいれる画像(写真)は、無料画像サイトで最適な写真を使うことができます。

例えば、Pixabayという無料画像サイトの検索バーに「笑い」と入れると、笑った表情をした画像がピックアップされます。

笑いで検索した結果

ブログの内容に応じた最適な画像をいれることができます。

以下3つの無料画像サイトがおすすめです。

  1. Pixabay
  2. ぱくたそ
  3. イラストAC

 

【1】Pixabay

画像が豊富です。ほかのブログと画像(写真)がかぶりにくくなります。

日本人の写真がないので、親近感が得られにくいというデメリットがあります。

日本向けのサイトではないので、「笑い」と検索しても、笑いの画像があまり出てこなかったりということもあります。

 

【2】ぱくたそ

日本人が写っている写真が豊富です。

いろいろな人が使っているので、ほかのブログとかぶりやすいというデメリットがあります。

 

【3】イラストAC

とっても癒やされるイラスト画像があります。

ブログに柔らかい雰囲気を出すのには最適です。

種類も豊富です。
他のブログと写真が同じになりたくない方は、PIXTAなどの有料の画像を使用する方法もあります。

 

はてなブログの画像(写真)を加工する方法

「画像に文字を入れて、加工したい。でも難しそう。」と諦めているかたも多いのではないでしょうか?

画像の加工はとてもかんたんですよ!

ブログの滞在時間も伸びますので、積極的に画像の加工はしたほうがいいですね。

この画像も加工しました。
キーボードに文字のせ

 

おすすめ!無料の画像加工サイト

グーグルやヤフーなどで、「バナー工房」と検索してみましょう。

アプリをインストールしないで、無料で利用できます。

バナー工房

バナー工房のサイト

感覚で操作できるため、かんたんに文字載せができます。

少しいじれば、初心者の方でもかんたんに画像に文字を載せたり、モザイクをいれたり加工ができます。

はてなブログの冒頭とアイキャッチ画像には、以下の画像のような「文字載せ」した写真を入れましょう!

「加工して文字載せしたアイキャッチ画像」をもってくると、ブログの滞在時間が伸びます。

経験から、黄色と赤色の文字を挿入すると、はっきり文字が見える画像を作ることができます。

 

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

はてなブログの「記事を書く」画面の赤枠のところから、アイキャッチ画像の設定ができます。

アイキャッチの設定方法

最後に「丸い矢印のアイコン」をクリックしてください。

クリックしないと、アイキャッチ画像が更新されないことがあります。

アイキャッチ画像は、タイトルと一緒に見られる画像になります。

タイトルとアイキャッチ画像で興味を引かないと、記事を読んでもらうことができません。

記事のメインとなる画像なので、適切な写真をきちんと設定しておきましょう。

 

まとめ(はてな ブログ 画像を貼り付けアップロードするやり方)

画像の貼り付けは、意外と大変です。

写真をブログにスムーズに貼り付けられれば、はてなブログの作業を効率化できます。

ご自分にあった、画像貼り付けのやり方を確立してください。

はてなブログの初心者の方でも、かんたんにできるお得なカスタマイズ情報も公開しております。