アメーバブログ

アメブロの画像にリンクを貼る方法!初心者にもわかりやすく説明します

アメブロに画像リンク
sayomimi

アメブロの記事に、画像付きリンクを貼ることができるって知っていましたか?

この記事を読むことで

  • 画像の貼り方ってどんなやり方なのか
  • スマホでもできるのか
  • アプリでも手軽にやりたい
  • やり方を知って集客に繋げたい

アメブロの記事に画像付きリンクを貼り方を、画像付きで紹介していきます。

アメブロの記事内画像にリンクをつけたい!

アメブロ 画像リンク1

アメブロの記事内に、画像付きリンクをつける方法をそれぞれの項目に分けてお話していきます。

アメブロのフリースペース(サイドバー)にも画像リンクが貼れる!

アメブロのフリースペースのことを「サイドバー」と言います。

これは、パソコンからアメブロを開いた時に横に現れるものです。

ここにも、画像付きのリンクを貼ることができます。

貼り方を画像付きで説明します。

貼り付けが完了してる、画像付きURLのまま通常表示の隣のHTML表示をタップ。

アメブロPC版 HTMLテキストのコピー

この<a>から</a>までの部分をコピーします。

コピーできたら、ブログ管理から設定・管理フリースペース編集をタップ。

アメブロPC版 サイドバーに画像付きリンクを表示させる方法

フリースペース編集に、先程コピーしたテキストを貼り付けて保存をタップしたら完了です。

さよみみ
さよみみ
必ずサイドバーから指定したURLページに飛べるか確認してね!

アメブロの画像にリンクを貼る方法

アメブロ 画像リンク2

アメブロの画像にリンクを貼る方法【アプリ】

アプリで行うことも可能です。

ですが、手順がとても難しい為間違えてしまうとURL先のページに飛ばないこともあるので手順を一つ一つ丁寧にこなすことがポイントになります。

ここでのキーポイントとして、このHTMLを必ずどこかにコピーして下さい。

<a href=”リンク先のURL”><img src=”画像のファイル名(保存場所)” alt=”画像の説明文“></a>

さよみみ
さよみみ
スマホのメモ帳などにコピーしておけばすぐに使うことができるよ!

【アメブロアプリのやり方】

アプリを起動し、記事を書くをタップします。アメブロアプリ 記事を書くアイコンをタップ
カメラのアイコンをタップして画像を追加。アメブロアプリ 写真アイコンをタップ
記事に使いたい画像を貼り付ける。アメブロアプリ 記事内に画像を貼り付ける
入力完了をタップし、公開をタップしたら、下書き(非公開)にします。アメブロアプリ 下書き保存
一度、下書き保存したらもう一度その記事を編集します。その記事をタップして、編集開始したらHTML編集をタップ。アメブロアプリ HTMLテキスト編集
HTML編集になったら、色が付いている所にそれぞれコピー&ペーストしていきます。アメブロアプリ HTMLの貼り付け方 色分け表示
アメブロアプリ HTMLコピー
アメブロアプリ HTMLペースト
アメブロアプリ HTMLコピー
アメブロアプリ HTMLペースト
HTML編集の【リンク先】のところに飛ばしたいURLを貼り付けます。上の緑色の線で引かれているHTMLは削除します。アメブロアプリ HTML編集とURL追加
全てできたら完了をタップ。最後に全員に公開をタップして、公開します。アメブロアプリ 完成後全員に公開

赤色の線が引かれているHTMLを、下のHTMLの【画像のファイル名(保存場所)】にコピー&ペーストします。

黄色の線が引かれているHTMLも同様に、下のHTML【画像の説明文】にコピー&ペーストします。

見分け方としては、【画像のファイル名(保存場所)】となっているところはこの画像自体がどこに保存されているかを理解することになります。

この画像の保存場所はアメブロになります。

そのため「ameba」と最初に書かれているHTMLが保存場所になります。

ですが、「ameba」と言う文字は下にも書いてありますよね?

そしたら下も保存場所になるのでは?と思う方も多いと思います。

これが何故、【画像の説明文】になるのか。

HTMLで「img src〜」という表記になっているからです。

imgは画像を示すHTML表記になります

そのため、この後に続いているHTMLは画像についての説明をしているということになります。

そのため、先ほどのHTMLにそれぞれ当てはめていくことで一つのHTMLが完成するのです。

これでしっかり画像をタップした際に、URL先のページに飛べているかを確認してください。

アメブロの画像にリンクを貼る方法【スマホ】

スマホのwebからでもできます。

やり方は、アプリと同じやり方になります。

アプリのやり方を参考にして、web版でも画像にリンクを貼ることができます。

アメブロの画像にリンクを貼る方法【PC】

ブログを書くから作った画像をアップして貼り付けます。

アメブロPC版 記事内に画像を貼り付ける

画像の大きさが大きいと感じたら、ここからサイズ変更もして下さい。

アメブロPC版 画像を青くしリンクアイコンをタップ

1,画像の画面を青くした状態で、リンクのボタンをタップします。

2,この画面になったら、画像のURLになっているので貼り付けたいURLに編集をします。

3,この時に、別ウィンドウで開くにレ点を入れておきます。

読者は今読んでいるブログと、次にみたいURLを見ることができるので便利です。

4,最後に決定を押したら完了です。

アメブロPC版 画像にリンクを貼る際の手順

趣味のアメブロでも記事に画像付きリンクを貼ることで広告収入を得ることができる!

アメブロ 画像リンク3

2018年にアメブロはアフィリエイト広告が貼れるようになりました。

わたし企業家じゃないし・・・
別にトップブロガー目指しているわけじゃないし・・・

個人の趣味ブログでもアフィリエイト収入を得ることはできます!

詳細は「アメブロのアフィリエイトはこうやって稼いでいる」をご確認ください。

この画像付きリンクの貼り方を活用してアフィリエイトにも挑戦してみましょう!

さよみみ
さよみみ
収益化できるアメブロに育てるためのコツが詰まった400部売れたnoteはこちら。

【ブログ×SNSで0から1を生み出す攻略法】ブログで稼ぐ=ワードプレスだけじゃない!

\ブログ×SNSで0→1を生み出す攻略法/

ブログ×SNS(アメブロ)攻略note

アメトピ掲載されるためにもコツがある!

アメトピ掲載記事をジャンル別に大公開!

合わせて読みたい
アメトピに掲載されやすい8つのポイント!ジャンル別に100記事以上を大公開
アメトピに掲載されやすい8つのポイント!ジャンル別に100記事以上を大公開

アメブロで収益化する人が増えている!

アメーバブログで収入が得られる人、得られない人の違いとは?徹底解説!

合わせて読みたい
アメーバブログで収入が得られる人、得られない人の違いとは?徹底解説!
アメーバブログで収入が得られる人、得られない人の違いとは?徹底解説!

アメブロの運用方法を直接学びたい方はこちら。

【ブログの学校】マンツーマン単発講座

合わせて読みたい
【ブログの学校】マンツーマン単発講座!期間を決めてブログ×SNSに強くなる
【ブログの学校】マンツーマン単発講座!期間を決めてブログ×SNSに強くなる

ブログを仕事に
するLINE講座

ブログ×SNSの始め方を
公式LINE限定で無料配信中

登録者限定で、「今すぐできる1万円の稼ぎ方」を全員に無料プレゼントしています。

ABOUT ME
記事URLをコピーしました