HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン
Bloggerで簡単に目次をつける方法
Bloggerでお問い合わせフォームのページを作る方法
新ブログはこちらから

Blogger*ブログカードを表示する簡単な方法

2019/11/08

カスタマイズ


Bloggerでブログカードを表示させる方法です。

ちなみに「ブログカード」とは、このようなカード型のリンクのことです↓

別のページへリンクをはりたいとき、Bloggerの投稿画面からはこのような文字だけのリンクを作成することができます。
→ Bloggerで最初にやっておいた方がいいこと

Bloggerの投稿画面から文字リンクを作成する方法です。
しかし、文字だけではリンクだということがちょっと分かりにくいですよね。

そんな時にブログカードがあれば、どこへのリンクなのかが一目瞭然です。

はてなブログには、このブログカードを自動で作成してくれる機能がついているのですが、残念ながらBloggerにはこの機能がありません。

ですが、はてなブログのブログカードをBloggerにも表示させることができるそうです。

↓こちらのブログで紹介されていました。

それでは、さっそくやってみたいと思います。

Blogger*ブログカードを表示する簡単な方法

まず、こちらのコードをコピーします。

<iframe class="hatenablogcard" style="display:block;width:100%;height:155px;margin:12px 0;
max-width:680px;" title="%title%" src="https://hatenablog-parts.com/embed?
url=リンク先のアドレスをコピペします" frameborder="0" scrolling="no"></iframe>

次に、Bloggerの投稿画面を「HTML編集」モードにしてから、ブログカードを置きたい場所に上記のコードを貼り付けます。

HTML編集モードにしてから、コードを貼り付けます。
さらに、「リンク先のアドレスを・・・」の部分にリンク先のアドレスをコピペします。

これで、ブログカードが作成されているはずです。

プレビューで確認してみてください。

これで、ブログカードの作成は完了です。
おつかれさまでした*


こちらもおすすめ♪

→ホームへ戻る