$hide=page-404-mobile

$type=carousel$columns=4$cat=hide$show=home

ブログカードを1クリックで作成してブログに設置する方法


見た目が良いブログカードをBloggerの記事内に設置する方法を一つ前の記事で紹介しました。この記事で紹介している方法は、はてなブログの提供するツールを利用してiframeでブログカードを表示する手法です。


本記事では、Chromeの拡張機能を使用して任意のウェブページを1クリックでブログカードを作成して、ブログ記事に設置する方法を紹介します。
ここで紹介する方法は、BloggerだけでなくWordPressや他の無料ブログなどでも利用可能です。
[post_ads]

ブログカードのソースコード

上で表示したブログカードのソースコードは以下になります。
<iframe class="hatenablogcard" frameborder="0" scrolling="no" src="https://hatenablog-parts.com/embed?url=https://blogger101.blogging-life.com/2018/08/embed-hatena-blogcard.html" style="height: 175px; margin: 15px 0px; max-width: 680px; width: 100%;" title="Bloggerの記事内にブログカードを埋め込み表示する方法 - Blogger101@ブロギングライフ"></iframe><br />

定形のコードにウェブページのURLとタイトルをパラメーターに入力し、作成されたブログカードをiframeを使用して埋め込み表示する仕組みです。

ブラウザーの拡張機能を使ってブログカードのコードを作成する

この様なページURLとタイトルを付加するような決まったパターンのコードの作成は、ブラウザーの拡張機能を使用すると簡単に対応できます。

Chromeの拡張機能アプリ Create Link は、表示しているページのURLとタイトルを、任意のフォーマットでクリップボードに保存する機能を備えています

Create Link の設定方法

Chromeを使用してChrome Web Store にアクセスして、検索欄に"Create Link"を入力して実行するとCreate Linkが表示されます。ボタンを押してChromeに追加します。



Chromeのウィンドウ右上に表示される拡張機能のアイコンの中から、Create Linkをクリックし表示されるドロップダウンリストから"Configure"を選択します。

Create Linkの設定ページが表示されます。項目の中の"Formats"の下に表示される表の下の"+"を押します。

新しいフォーマットの入力欄が追加表示されます。

名前(例:はてなブログカードiframe)を入力し、Formatの欄には以下のコードを貼り付けます。
[<iframe class="hatenablogcard" style="width:100%;height:175px;margin:15px 0;max-width:680px;" title="%title%" src="https://hatenablog-parts.com/embed?url=%url%" frameborder="0" scrolling="no"></iframe>]

設定項目入力後の例

以上で設定完了です。設定ページを閉じます。

ブログページのブログカードを1クリックで作成する

ブログカードを作成するページをChromeで表示します。ページ上の任意の場所から、右クリックし表示されるドロップダウンリストからCreate Linkをマウスオーバーし、続いて表示されるフォーマットのリストから上で設定したブログカードの作成フォーマット名を選択します。

Create Linkのリストのブログカードの作成フォーマットを選ぶと、設定したブログカードのコードにページのURLとタイトルを追加してクリップボードに保存されます。

クリップボードに保存されたブログカードのコードをブログ記事に貼り付ける

Bloggerの投稿編集画面の記事内のブログカードを挿入する箇所にカーソルを持っていき、クリップボードに保存されたコードを貼り付けます。(右クリックでペーストするか、ショートカットでペーストします。)

HTMLの入力モードで編集している場合は、以下の様になります。


編集モードを「作成 (Compose)」にした場合は、以下の様にブログカードが表示されます。


以上です。文字通り、1クリックで簡単にサイト内外のページのブログカードを作成することができます。


YouTube ビデオ


本記事で紹介した設定作業を実際に行って、Bloggerブログにブログカードを設置する手順を紹介しています。

コメント

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,10,Blogger 活用法,18,Bloggerの基本機能と使い方,9,Bloggerの基本設定,7,MagOne,3,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : ブログカードを1クリックで作成してブログに設置する方法
ブログカードを1クリックで作成してブログに設置する方法
Chromeの拡張機能を使用して任意のウェブページを1クリックでブログカードを作成して、ブログ記事に設置する方法を紹介します。 この方法は、BloggerだけでなくWordPressや他の無料ブログなどでも利用可能です。
https://2.bp.blogspot.com/-Q7gc5yqjUnQ/W3hzur5tsZI/AAAAAAAAC4M/GBx1S337ugwDmDirpuojZssSbClnSrT3wCK4BGAYYCw/s640/Create%2Bblogcard%2Bin%2B1click.png
https://2.bp.blogspot.com/-Q7gc5yqjUnQ/W3hzur5tsZI/AAAAAAAAC4M/GBx1S337ugwDmDirpuojZssSbClnSrT3wCK4BGAYYCw/s72-c/Create%2Bblogcard%2Bin%2B1click.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/08/create-blogcard-in-1click.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/08/create-blogcard-in-1click.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事 ラベル アーカイブ SEARCH ALL POSTS お探しのページが見つかりませんでした。 Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy