ブログの企画を開催したい方必見　HTMLでオシャレなバナーっぽい画像からリンクを飛ばす方法

企画初心者「現在ブログの企画をしています。せっかくなので記事内に「企画参加中の記事」であることを明記してもらい、一体感を出したいと考えています。ところが私の記事のURLを貼り付けてもらうと、【ヨダレを垂らしたクマ】が人様のブログに表示されるため、景観を壊してしまいます。何か良い方法はありませんか？」

さて、質問の内容を整理しましょう

ブログ企画を計画中
企画記事にリンクを飛ばしてもらい一体感を出したい
オシャレメゾッドでやりたい

あなた、変な悩みを持つ人ですね！いいですよ教えましょう！

「オシャレなバナーっぽく画像からリンクを飛ばす方法」

この記事でわかること

画像からリンクを飛ばすHTMLコード
HTMLで画像からリンクを飛ばす方法　Wordpress編　（要望次第）
HTMLで画像からリンクを飛ばす方法　はてなブログ編　（要望次第）
バナーっぽい画像をオシャレに作る方法（要望次第）

画像からリンクを飛ばすHTMLコード

追記・・・コピーされたい方はこちらをどうぞ。

さて、まずはこちらの画像をクリックして見てください。

私も参加している「週１ブロマガ」の紹介ページに飛びます。

飛んだ？ねえ？？？飛んだ？？

俺、すごくね？？？？

（あなたにもできますよ。）

では、この画像からリンクを飛ばすHTMLコードを紹介します。

さて、本題です。（無料です。）

f:id:mojamojafroo:20191027062147p:plain

「初心者ブロガー」を想定していますので、HTMLコードの説明から行います。

大丈夫！後で画像で説明するから！そんなExcel初めて触った時の私の父親と同じ顔しないでください！

今回紹介するHTMLというプログラミング言語は非常に簡単です。難易度は外国語の1/５０００と言われています。ぜひ、少しずつ勉強しながら「ブロガーの王」になりましょう！

一応、外国語の簡単なテストを用意しました。これがわからない人は難しいかもしれません。一方、全問わかる人は「HTML」を学ぶ才能に満ちあふれています。

I am Ken.
This is a pen.
لماذا ترجمت مع جوجل ؟ شكرا

ほんまに本題です・・。ごめんなさい。

コードはこちら。

私が実際に使用したコードはこれ。

<a href="飛びたい記事のURL">表示したい文字/画像 </a>

このコードは「表示したい文字/画像」が「飛びたい記事のURL」へのリンクコードを意味します。

今回の場合は「表示したい文字/画像」に<img src="画像のURL" alt="画像の名前"/>を置いて画像リンクを指示しています。

例えば「表示したい文字/画像」に「もじゃひつじを愛しすぎている人の企画」と打ち込むと文字リンクができます。

もじゃひつじを愛しすぎている人の企画

*コピペ可

<a href="https://menokumablog.com/blogmagazin/">もじゃひつじを愛しすぎている人の企画</a>

<img src="画像のURL" alt="画像の名前"/>

「画像のURL」の入力方法に関しては実際にやって見た方がわかりやすいので、後ほど説明します。

「画像の名前」には画像の代替の文字を入れてください。主に「何かトラブルで画像表示されないとき」に文字で画像を表現する役割がある、alt属性というものです。

alt属性

「alt」はラテン語圏で「代わりの」を意味する言葉。

画像にalt属性を設定するということは、「何かトラブルで画像表示されないときに「画像の名前」と表示します」ということです。また、検索エンジン上で画像を文字として認識するメリットもありSEOの観点から少し有利になります。

設定方法は、HTMLで設定するしかなさそうです。普段「HTML編集」でブログを書かない方は気づきもしない機能だと思います。

memo!!

たまにTwitter上で意識高い系ブロガーが「画像のalt属性はマジで大切すぎでしたwww」とか「alt属性もわからないでブロガー語らないでほしいwww」とか語ってるあれです。個人的には小数点「３」でないといけない理由の方が大切。

また、耳の不自由な方への音読ツールはalt属性を読み上げるようです。そこまで意識されてalt属性を設定される方はすごい・・・ただ、SEOのために設定されている方がほとんどでしょう。

HTMLで画像からリンクを飛ばす方法　Wordpress編

f:id:mojamojafroo:20200122060852j:plain

追記しました・・。

HTMLで画像からリンクを飛ばす手順

テキストエディタへ
コードをコピー＆ペースト
リンク先URLを設定
「メディアに追加」をクリック
画像のURLを確認・コピー
「画像のURL」に画像のURLをペースト

画像付き説明書！

1. テキストエディタへ

クリックしてみってば

2. 以下のコードをコピー＆ペースト

3. リンク先URLを設定

赤色の文字のとこに対象のページのURLをぶち込んでください。

4. 「メディアに追加」をクリック

f:id:mojamojafroo:20200123043019j:plain

5. 画像のURLを確認・コピー

ここっす

6. 「画像のURL」にコピーした画像のURLをペースト

終わり！

HTMLで画像からリンクを飛ばす方法　はてなブログ編

（要望により更新します）

バナーっぽい画像をオシャレに作る方法

みんな俺のこと好きよねぇwwwわかるぅww

センスです！

こればっかりは好みですから・・。

一応参考までに、私は３つ意識してます。

言いたいこと以外の言葉をできる限り削る
装飾はできるだけ淡白に
画像内の「人の目線」の先に文字を書く

画像の編集の仕方や使いやすいwebブラウザアプリは下の２つに昔書いた記憶があります。使うソフトさえわかってしまえばあとは「どう画像を加工するか」、人の真似して技を盗みましょう。

mojamojafroo.hatenablog.com

CANVAを使う中で以外とハードルなのが、「サイズ」。

いくらぐらいのpxにする？知らんわな。私も知らんかったっす。

Cocoonならとりあえず幅を800にしとけば良いです・・。（初期設定の幅が800のため。）色々、ブログのテーマによるみたいですので、「画像　ブログ　（あなたのテーマ）」とかで調べてみることをオススメします。

さ、で、バナーっぽい画像ですが、サイズは300あたりが適当です。

ちなみにこの下の画像のサイズは300 x 300。

f:id:mojamojafroo:20200122043748p:plain

何個かバナーのサイズを調べて見ましたが、こういう四角い形のバナーは300 x 250が多いみたい。

この寸法が多い理由はアメリカインターネット広告協会が推奨している大きさだから。もちろん、意識高いあなたのようなブロガーであればご説明する必要もなかったと思いますが。

最後に

例えば、こんな感じで使えば有効かと思います。

ーーーーーーーーーーーーー

「週１ブロマガ」をあなただけにオススメする３つの理由

「ブログを書く習慣化」が身につく
かけがえのないブロガーの友人ができる
ママブロガーとの大人な出会いも・・。

基本的にはみなさん「出会い目的」でブログをされていますが、私のように真剣に副業の収益化に向けて活動している人も中にはいますので、安心してください。私と一緒に夢のノマド生活を目指しましょう！

さあ、あなたもこのリンクをクリックしてぜひご参加を！

もじゃひつじの思いつき

blogの話とかしようかな