【神ツール】ブログでの画像付きリンクの作成は「ShareHtmlを、もっと綺麗にしたメーカー」を使おう

【神ツール】ブログでの画像付きリンクの作成は「ShareHtmlを、もっと綺麗にしたメーカー」を使おう

ブログで楽に画像付きリンクを作る方法はありませんか?
PHPをいじってやる方法もあるみたいなんだけど、自分はエンジニアじゃないんでできません。誰か教えて下さい!

悩んでる人

ゆうが

こういった疑問に答えます!

記事を読むメリット

  • 簡単にブログで画像付きリンクを作る方法がわかる
  • 画像付きリンクを作ることで、CTR率がアップし、読まれるブログになる

画像付きリンクを作るメリットは、

  • 読者に対して視覚的に見やすくなる
  • クリックしやすいので、CTR率がUPする

こういったメリットがあります。
※設置する場所にもよります。

僕も実際にこちらの記事で使っています。
WordPressで必ず入れるべき、おすすめプラグイン9選【10個以上はアウト】

なので今回はそんな、画像付きリンク簡単にを作る方法を解説します。

結論としては、「ShareHtmlを、もっと綺麗にしたメーカー」という、画像付きリンク作成サイトで簡単に作れます。

しかもこのサイトは、あの有名なプロブロガーのマナブさんが作っているサイトなので、かなりブログに特化しているなというイメージです。

使い方もセットで解説していくので、ぜひ画像付きリンクを自分のブログに貼ってみてください。

本記事のもくじ
  • ブログでの画像付きリンクの作成は「ShareHtmlを、もっと綺麗にしたメーカー」を使おう
  • ShareHtmlを、もっと綺麗にしたメーカーの使い方

本記事の信頼性として、僕はブログを毎日更新していて徐々にアクセスが伸びているので、信頼性は担保されていると思います。

それでは、前置きはこれくらいにして、さっそくいきましょう!

スポンサーリンク

ブログでの画像付きリンクの作成は「ShareHtmlを、もっと綺麗にしたメーカー」を使おう

ブログでの画像付きリンクの作成は「ShareHtmlを、もっと綺麗にしたメーカー」を使おう

結論として「ShareHtmlを、もっと綺麗にしたメーカー」は、マジで超絶簡単に画像付きリンクが作れる最強のサービスです。

どのくらい最強なのかというと、

  • 3秒で画像付きリンクを作成できる
  • 押したくなるような、シンプルデザイン
  • スマホ対応もしていて、かゆいところに手が届く

それぞれ解説します。

3秒で画像付きリンクを作成できる

一度CSSをブログに登録してしまえば、わずか3秒でブログに画像付きリンクを作れてしまいます。

やり方は次項で解説しますが、サイトのURLをこのサイトに貼り付けて、HTMLコードをコピペするだけで簡単に作れてしまいます。

押したくなるような、シンプルデザイン

こちらの画像を見てもらえればわかるのですが、めちゃめちゃシンプルなデザインで、広告のように邪魔をしないので、自然に「この記事も気になるな、見てみよう。」となりませんか?

押したくなるような、シンプルデザイン

そのくらい画像の配置だったり、文字の大きさや色をこだわっているのが、このサイトのすばらしいところです。

スマホ対応もしていて、かゆいところに手が届く

またスマホのサイズにもきちんと対応していて、ブログを書いている人にとって手間がかからないように、「かゆいところに手が届くな〜」と感じます。

スマホ版の例

スマホ対応だとこんな感じになります。

スマホ対応もしていて、かゆいところに手が届く

レスポンシブなので、スマホユーザーの方にも便利に使えます。

スポンサーリンク

ShareHtmlを、もっと綺麗にしたメーカーの使い方

ShareHtmlを、もっと綺麗にしたメーカーの使い方

では実際に使い方を、スクショ付きで3つの手順で解説していきます。

STEP1:画像付きリンクを作りたいサイトのURLコピペする

画像付きリンクを作りたいサイトのURLコピペする

まずは、ShareHtmlを、もっと綺麗にしたメーカーへアクセスし、上記の画像のように画像付きリンクを作りたいサイトのURLコピペしてください。

そしたら、エンターキーを押して少し待ちましょう。

STEP2:CSSコードをWordPressのstyle.cssに貼り付ける

次に、#CSSコードというのが生成されるのでそれをコピーしてください。

おそらくコードが改行されていないので、見ずらいと思います。
なので見やすくしたい方は、こちらのコードをコピーでもOKです。

CSS
.link-box {
  border: 1px solid #e1e1e1;
  padding: 10px;
  display: flex;
}
.link-box:hover {
  background-color: #f3f3f3;
  -webkit-transition: background-color 0.35s;
  transition: background-color 0.35s;
}
.img-box {
  width: 25%;
  float: left;
}
.img-box div {
  min-height: 170px;
  background-size: cover;
  background-position: center center;
}
.text-box {
  width: 75%;
  float: left;
  padding-left: 20px;
  line-height: 1.7;
  margin: 0;
}
.text-box .title {
  font-size: 18px;
  font-weight: 600;
  color: #428bca;
  padding: 0;
  margin: 0;
}
.text-box .description {
  font-size: 15px;
  color: #333;
  padding: 0;
}

@media only screen and (max-width: 479px) {
  .img-box div {
    min-height: 80px;
  }
  .text-box {
    margin-left: 10px;
    line-height: 1.5;
  }
  .text-box .title {
    font-size: 13px;
    margin: 0;
  }
  .text-box .description {
    font-size: 11px;
    margin-top: 5px;
  }
}

そしたら、「外観→テーマエディター」へいきstyle.cssを選択して先程のコードを貼り付けてください。

CSSコードをWordPressのstyle.cssに貼り付ける

画像のようになればOKです。

STEP3:HTMLコードをブログに貼り付ける

そしたら最後に、#HTMLコードを自分のブログの好きなところに貼り付ければ完成です。

なんとこの3ステップでできるなんて、超簡単ですよね。

また、CSSは一度登録してしまえば再度コピペしなくていいので、なれるとマジで3秒でできます。

今回は以上です!
記事が参考になれば幸いです。

それでは最後まで見てくださり、ありがとうございました。