ShareHtmlを、もっと綺麗にしたメーカーを使ってブログカードを作ろう

「ShareHtmlを、もっと綺麗にしたメーカー」を使ってブログカードを作ろう

ブログでよくある画像付きリンク(ブログカード)を作る方法はありませんか?CTR率を上げてブログの滞在時間を伸ばしたいので誰か教えて下さい!

悩んでる人

ゆうが

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

本記事で解決できること

  • 簡単にブログカードを作る方法って?
  • ブログカードを作って、内部リンクのCTR率を上げたいな。

こういった疑問を解決できます。

みなさんはよく下記のような画像つきのリンクを見たことがありませんか?

manablog

これはよくマナブさんが使っているリンクでShareHtmlを、もっと綺麗にしたメーカーというサービスを使ってできます。今回はこれを簡単に実装する方法を解説していきます。

manablog.org

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

ShareHtmlを、もっと綺麗にしたメーカーとは?

ShareHtmlを、もっと綺麗にしたメーカーとは?

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

どのくらい最強なのかというと3つあります。それが下記

  • 3秒でブログカードを作成できる
  • 押したくなるような、シンプルデザイン
  • スマホ対応もしていて、かゆいところに手が届く

1. 3秒でブログカードを作成できる

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

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

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

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

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

ゆうが

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

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

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

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

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

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

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

手順1:ブログカードをを作りたい記事のURLコピペする

手順1:ブログカードをを作りたい記事のURLコピペする

まずは、ShareHtmlを、もっと綺麗にしたメーカーへアクセスし、「①:ブログカードをを作りたい記事のURLコピペ」してください。そしてエンターキーを押すと「②:ブログカードが作成」されます。

手順2:CSSをWordPressのstyle.cssに貼り付ける

手順2:CSSをWordPressの<code>style.css</code>に貼り付ける

つづいて#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です。

手順3:HTMLコードをブログに貼り付ける

手順3:HTMLコードをブログに貼り付ける

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

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

こんな感じで貼り付ければOKです。

あとは、プレビューできちんと表示されていたら完了です。

なんとこの3ステップでできるなんて、超簡単ですよね。また、CSSは一度登録してしまえば再度コピペしなくていいので、なれるとマジで3秒でできます。

超便利なのでブクマ必須ですよ。

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

参考になるかもしれない記事

【サイト運営者】無料ヒートマップ解析ツールUser Heatとは?機能や使ってみての感想【サイト運営者必須】無料ヒートマップ解析ツールUser Heatとは?機能や使ってみての感想 【2021年最新】WordPressで必ず入れるべきプラグイン9選【10個以上はアウト】【2021年最新】WordPressで必ず入れるべきプラグイン9選【10個以上はアウト】 ブログでiOS&Androidのアプリリンクを貼る方法ブログでiOS&Androidのアプリリンクを貼る方法【10秒でできる】 参考 【保存版】タイ・バンコク移住の完全ガイド【全ての悩みを解決します】manablog