Qiitaに「はてなブログ」のブログカード風リンク埋め込みを挿入する方法

個人的に、はてなブログで自分のブログを書いている関係から、Qiitaにはてブのブログカードみたいな外部サイトへのリンクを貼れないかな？と考えました。

↓こんな感じのやつです。（※これはただの画像です(^^;)
![スクリーンショット 2016-08-05 12.49.06.png](https://qiita-image-store.s3.amazonaws.com/0/110606/98eb261d-ef54-9088-6b30-a120c7c98856.png)

ところが、Qiitaで採用しているMarkDownでレイアウトを凝ったオブジェクト埋め込みを実現しようとすると結構大変でした。。。。。。（汗）いろいろと試行錯誤を繰り返して四苦八苦しましたが、なんとなく方法がまとまってきたので備忘録がてらシェアします。

大きくわけてHTMLタグを使う方法と使わない方法の２種類があり、それぞれ２種類のコードをサンプルとして紹介してます。

なおサイトサムネイルの取り込みにはHeartRailsというサービスを使っています。

<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>
 <A HREF="http://capture.heartrails.com/" TARGET="_blank"><STRONG>HeartRails Capture | サムネイル画像／PDF ファイル作成サービス</STRONG></A>
 <A HREF="http://b.hatena.ne.jp/entry/http://capture.heartrails.com/" TARGET="_blank">
 <IMG BORDER="0" SRC="http://b.hatena.ne.jp/entry/image/http://capture.heartrails.com/" BORDER="0" ALT="" /></a>
 <BR>
 HeartRails Capture は、ウェブページや PDF ファイル、Office ファイルのサムネイル画像を作成するサービスです。対象ページ、対象ファイルの見た目をそのまま縮小した画像を、対象の URL を指定するだけで簡単に作成することができます。... 
 </TD>
 <TD WIDTH=150px>
 <IMG STYLE="float:left;margin-right:.5em;" SRC="http://capture.heartrails.com/120x120/cool?http://capture.heartrails.com/" ALT="" WIDTH="120" HEIGHT="120" />
 </TD></TR>
</TABLE>

また、Chromeの「Create Link」というアドオンを使うと、このブログカード風リンクを埋め込むのに必要なコードをブラウザの右クリックから生成できます。最後にそのテンプレートも記載しておきます。

<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>
 <A HREF="https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja" TARGET="_blank"><STRONG>Create Link - Chrome ウェブストア</STRONG></A>
 <A HREF="http://b.hatena.ne.jp/entry/https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja" TARGET="_blank">
 <IMG BORDER="0" SRC="http://b.hatena.ne.jp/entry/image/https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja" BORDER="0" ALT="" /></a>
 <BR>
 Copy current page title and URL to clipboard in various formats. *plain text ([page title] [page URL]) *HTML link (&lt;A HREF=&quot;[page URL]&quot;&gt;[page title]&lt;/a&gt; *markdown *mediawiki... 
 </TD>
 <TD WIDTH=150px>
 <IMG STYLE="float:left;margin-right:.5em;" SRC="http://capture.heartrails.com/120x120/cool?https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja" ALT="" WIDTH="120" HEIGHT="120" />
 </TD></TR>
</TABLE>

ちなみに、このCreate Linkのテンプレートを使うときには、ブラウザ上で選択されたテキストが説明文のところに挿入されます。何も選択しないとタイトルと同じ文字列が挿入されます。またはてブ数についても誰からもブクマされていないページは何も表示されませんのでご注意を。

# TABLEタグを使って表現する方法

Qiitaは一部のHTMLタグが使えるのですが、TABLEタグもその一部に入っています。これを使って、Qiita標準の表の機能を使わず、あえてTABLEタグを使うやりかたで実現したものです。

> [注意]
>ちなみに、TABLEタグの閉じる方の前に改行を入れないと正常動作しないことを確認しています。
>TABLEタグ使うときは注意がいりそうですね。

## いちばんブログカードっぽいパターン

このQiita記事の先頭にも使っているスタイルです。
TABLEタグを使ってもBGCOLOR属性は有効にならないようなので１行目であるグレーが背景になってしまっています。
ただ強制的に１行目がTHタグになってしまうわけではないようで、無意味に太字になったりはしない模様です。
なおTABLEタグのALIGNをCENERにしているのは、どっちかに寄せると回りこみが発生してしまうためです。
ちなみに回りこみ解除は無効化されている模様。

**↓サンプル**

<TABLE ALIGN=CENTER>
  <TR>
    <TD WIDTH=400px>
      <A HREF="http://blog.mamohacy.com/entry/2013/03/29/192149" TARGET="_blank"><strong>再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！</strong></a>
      <A HREF="http://b.hatena.ne.jp/entry/http://blog.mamohacy.com/entry/2013/03/29/192149" TARGET="_blank">
      <IMG BORDER="0" src="http://b.hatena.ne.jp/entry/image/http://blog.mamohacy.com/entry/2013/03/29/192149" BORDER="0" ALT="" /></a>
      <BR>
      何が原因か分からない（あとでわかった）のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。...
    </TD>
    <TD WIDTH=150px>
      <IMG STYLE="float:left;margin-right:.5em;" src="http://capture.heartrails.com/120x120/cool?http://blog.mamohacy.com/entry/2013/03/29/192149" ALT="" WIDTH="120" HEIGHT="120" />
    </TD>
  </TR>
</TABLE>

**↓コード**

```HTML:
<TABLE ALIGN=CENTER>
  <TR>
    <TD WIDTH=400px>
      <A HREF="http://blog.mamohacy.com/entry/2013/03/29/192149" TARGET="_blank"><strong>再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！</strong></a>
      <A HREF="http://b.hatena.ne.jp/entry/http://blog.mamohacy.com/entry/2013/03/29/192149" TARGET="_blank">
      <IMG BORDER="0" src="http://b.hatena.ne.jp/entry/image/http://blog.mamohacy.com/entry/2013/03/29/192149" BORDER="0" ALT="" /></a>
      <BR>
      何が原因か分からない（あとでわかった）のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。...
    </TD>
    <TD WIDTH=150px>
      <IMG STYLE="float:left;margin-right:.5em;" src="http://capture.heartrails.com/120x120/cool?http://blog.mamohacy.com/entry/2013/03/29/192149" ALT="" WIDTH="120" HEIGHT="120" />
    </TD>
  </TR>
</TABLE>
```

**↓Create Linkテンプレート**

```HTML:CreateLinkTemplete
<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>%newline% <A HREF="%url%" TARGET="_blank"><STRONG>%title%</STRONG></A>%newline% <A HREF="http://b.hatena.ne.jp/entry/%url%" TARGET="_blank">%newline% <IMG BORDER="0" SRC="http://b.hatena.ne.jp/entry/image/%url%" BORDER="0" ALT="" /></a>%newline% <BR>%newline% %htmlEscapedText%... %newline% </TD>%newline% <TD WIDTH=150px>%newline% <IMG STYLE="float:left;margin-right:.5em;" SRC="http://capture.heartrails.com/120x120/cool?%url%" ALT="" WIDTH="120" HEIGHT="120" />%newline% </TD></TR>%newline%</TABLE>%newline%
```


# タイトルを１行目に出したパターン

列を結合させてタイトルとURLリンク、はてブ数を１行目に出したスタイル。
あえてサイトサムネイルを前に置いてるけど、後ろに回してもいいかもしれない。

<TABLE>
  <TR>
    <TD COLSPAN=2 WIDTH=550px>
      <A HREF="http://blog.mamohacy.com/entry/2013/03/29/192149" TARGET="_blank"><strong>再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！</strong></a>
      <A HREF="http://b.hatena.ne.jp/entry/http://blog.mamohacy.com/entry/2013/03/29/192149" TARGET="_blank">
      <IMG BORDER="0" src="http://b.hatena.ne.jp/entry/image/http://blog.mamohacy.com/entry/2013/03/29/192149" BORDER="0" ALT="" /></a>
    </TD>
  </TR>
  <TR>
    <TD WIDTH=150px>
      <IMG STYLE="float:left;margin-right:.5em;" src="http://capture.heartrails.com/120x120/cool?http://blog.mamohacy.com/entry/2013/03/29/192149" ALT="" WIDTH="120" HEIGHT="120" />
    </TD>
    <TD WIDTH=400px>
      何が原因か分からない（あとでわかった）のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。...
    </TD>
  </TR>
</TABLE>

**↓コード**

```HTML:
<TABLE>
  <TR>
    <TD COLSPAN=2 WIDTH=550px>
      <A HREF="http://blog.mamohacy.com/entry/2013/03/29/192149" TARGET="_blank"><strong>再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！</strong></a>
      <A HREF="http://b.hatena.ne.jp/entry/http://blog.mamohacy.com/entry/2013/03/29/192149" TARGET="_blank">
      <IMG BORDER="0" src="http://b.hatena.ne.jp/entry/image/http://blog.mamohacy.com/entry/2013/03/29/192149" BORDER="0" ALT="" /></a>
    </TD>
  </TR>
  <TR>
    <TD WIDTH=150px>
      <IMG STYLE="float:left;margin-right:.5em;" src="http://capture.heartrails.com/120x120/cool?http://blog.mamohacy.com/entry/2013/03/29/192149" ALT="" WIDTH="120" HEIGHT="120" />
    </TD>
    <TD WIDTH=400px>
      何が原因か分からない（あとでわかった）のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。...
    </TD>
  </TR>
</TABLE>
```


**↓Create Linkテンプレート**

```text:CreateLinkTemplete
<TABLE>%newline%<TR><TD COLSPAN=2 WIDTH=550px>%newline%<A HREF="%url%" TARGET="_blank"><strong>%title%</strong></a>%newline%<A HREF="http://b.hatena.ne.jp/entry/%url%" TARGET="_blank">%newline%<IMG BORDER="0" src="http://b.hatena.ne.jp/entry/image/%url%" BORDER="0" ALT="" /></a>%newline%</TD></TR>%newline%<TR><TD WIDTH=150px>%newline%<IMG STYLE="float:left;margin-right:.5em;" src="http://capture.heartrails.com/120x120/cool?%url%" ALT="" WIDTH="120" HEIGHT="120" />%newline%</TD><TD WIDTH=400px>%newline%%htmlEscapedText%%newline%</TD></TR>%newline%</TABLE>%newline%
```




# Tableタグを使わない方法

Qiitaの仕様変更でいつ使えなくなるかわかんないですし、コード量も多くなるので若干の不安が残ります。
対応可能なマークアップのみで表現するパターンとして２つ作ってみました。

# 表のマークアップと画像挿入を組み合わせるパターン

コードはだいぶスッキリなんですがWIDTH指定ができないので横がメチャ長いです。そもそも列の幅も勝手に設定されてしまうのでサムネイル画像の大きさもまちまちです。
またプレビューと実際の見え方がかなり違います。記事を書いてるときは注意がいります。
１行目は強制的にHTタグに変換されちゃうので全文太字になってます。
ちなみにMarkDownは改行に強い意味が設定されているので表で１行に収める部分は改行せず強引にでも１行で書かないと正しくタグ展開されません。便利なんですけど制約多いですね。

**↓サンプル**

| [再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！](http://blog.mamohacy.com/entry/2013/03/29/192149) ![](http://b.hatena.ne.jp/entry/image/http://blog.mamohacy.com/entry/2013/03/29/192149)<BR>何が原因か分からない（あとでわかった）のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。... | ![](http://capture.heartrails.com/120x120/cool?http://blog.mamohacy.com/entry/2013/03/29/192149)|
|:--|:-:|

**↓コード**

```Markdown:
| [再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！](http://blog.mamohacy.com/entry/2013/03/29/192149) ![](http://b.hatena.ne.jp/entry/image/http://blog.mamohacy.com/entry/2013/03/29/192149)<BR>何が原因か分からない（あとでわかった）のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。... | ![](http://capture.heartrails.com/120x120/cool?http://blog.mamohacy.com/entry/2013/03/29/192149)|
|:--|:-:|
```

**↓Create Linkテンプレート**

```text:CreateLinkTemplete
| [%title%](%url%) ![](http://b.hatena.ne.jp/entry/image/%url%)<BR>%htmlEscapedText%| ![](http://capture.heartrails.com/120x120/cool?%url%)|%newline%|:--|:-:|%newline%
```

## 表すら使わない超シンプルなパターン

MarkDownのみで書く場合はこっちのほうがシンプルかもしれません。
ただし改行を入れると画像の下に行ってしまうので本文の引用などは表示するのが難しく、タイトル＋リンク＋はてブ数のみとしてます。
もうちょっとなんとかしたかったんですけど、MarkDownのみでなんとかするにはこれが限界な気がしてます。

**↓サンプル**

![](http://capture.heartrails.com/120x120/cool?http://blog.mamohacy.com/entry/2013/03/29/192149) [再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！](http://www.ashinari.com/) ![](http://b.hatena.ne.jp/entry/image/http://blog.mamohacy.com/entry/2013/03/29/192149)
	
タイトルが長いと回りこんじゃいますね。。。

**↓コード**

```Markdown:Code
![](http://capture.heartrails.com/120x120/cool?http://blog.mamohacy.com/entry/2013/03/29/192149) [再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！](http://www.ashinari.com/) ![](http://b.hatena.ne.jp/entry/image/http://blog.mamohacy.com/entry/2013/03/29/192149)
```

**↓Create Linkテンプレート**

```Text:CreateLinkTemplete
![](http://capture.heartrails.com/120x120/cool?%url%) [%title%](%url%) ![](http://b.hatena.ne.jp/entry/image/%url%)%newline%
```

# まとめ

以上、ブログカード風のリンクをQiitaに埋め込む方法４種類のご紹介でした。
他にもいい方法があったら是非コメントにて教えて下さい！

## 参考にさせて頂いたサイト
<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>
 <A HREF="http://qiita.com/Qiita/items/c686397e4a0f4f11683d" TARGET="_blank"><STRONG>Markdown記法 チートシート - Qiita</STRONG></A>
 <A HREF="http://b.hatena.ne.jp/entry/http://qiita.com/Qiita/items/c686397e4a0f4f11683d" TARGET="_blank">
 <IMG BORDER="0" SRC="http://b.hatena.ne.jp/entry/image/http://qiita.com/Qiita/items/c686397e4a0f4f11683d" BORDER="0" ALT="" /></a>
 <BR>
 Markdown記法 チートシート - Qiita... 
 </TD>
 <TD WIDTH=150px>
 <IMG STYLE="float:left;margin-right:.5em;" SRC="http://capture.heartrails.com/120x120/cool?http://qiita.com/Qiita/items/c686397e4a0f4f11683d" ALT="" WIDTH="120" HEIGHT="120" />
 </TD></TR>
</TABLE>

<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>
 <A HREF="http://nelog.jp/create-link-exsamples" TARGET="_blank"><STRONG>ブログ記事の作成支援Chrome拡張「Create Link」の設定例まとめ</STRONG></A>
 <A HREF="http://b.hatena.ne.jp/entry/http://nelog.jp/create-link-exsamples" TARGET="_blank">
 <IMG BORDER="0" SRC="http://b.hatena.ne.jp/entry/image/http://nelog.jp/create-link-exsamples" BORDER="0" ALT="" /></a>
 <BR>
 ブログ記事の作成を支援するのにタグ作成ツールの存在は欠かせません。  使用しているブラウザがGoogle Chromeなら、今のところ最も使われているのは「Create Link」だと思います。... 
 </TD>
 <TD WIDTH=150px>
 <IMG STYLE="float:left;margin-right:.5em;" SRC="http://capture.heartrails.com/120x120/cool?http://nelog.jp/create-link-exsamples" ALT="" WIDTH="120" HEIGHT="120" />
 </TD></TR>
</TABLE>

<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>
 <A HREF="http://qiita.com/APO/items/f2212bee7f0b2c69228f" TARGET="_blank"><STRONG>Qiitaで使えるHTMLタグは？ - Qiita</STRONG></A>
 <A HREF="http://b.hatena.ne.jp/entry/http://qiita.com/APO/items/f2212bee7f0b2c69228f" TARGET="_blank">
 <IMG BORDER="0" SRC="http://b.hatena.ne.jp/entry/image/http://qiita.com/APO/items/f2212bee7f0b2c69228f" BORDER="0" ALT="" /></a>
 <BR>
 HTMLタグのテーブル結合は使えなかった気がしたんですが、使えるようになってたので使えるタグを調べてみました。... 
 </TD>
 <TD WIDTH=150px>
 <IMG STYLE="float:left;margin-right:.5em;" SRC="http://capture.heartrails.com/120x120/cool?http://qiita.com/APO/items/f2212bee7f0b2c69228f" ALT="" WIDTH="120" HEIGHT="120" />
 </TD></TR>
</TABLE>