Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

↓こんな感じのやつです。(※これはただの画像です(^^;)
スクリーンショット 2016-08-05 12.49.06.png

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

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

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

HeartRails Capture | サムネイル画像/PDF ファイル作成サービス
HeartRails Capture は、ウェブページや PDF ファイル、Office ファイルのサムネイル画像を作成するサービスです。対象ページ、対象ファイルの見た目をそのまま縮小した画像を、対象の URL を指定するだけで簡単に作成することができます。...

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

Create Link - Chrome ウェブストア
Copy current page title and URL to clipboard in various formats. *plain text ([page title] [page URL]) *HTML link (<A HREF="[page URL]">[page title]</a> *markdown *mediawiki...

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

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

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

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

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

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

↓サンプル

再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい!
何が原因か分からない(あとでわかった)のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。...

↓コード

<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テンプレート

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%

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

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

再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい!
何が原因か分からない(あとでわかった)のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。...

↓コード

<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テンプレート

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

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

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

↓サンプル

再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい!
何が原因か分からない(あとでわかった)のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。...

↓コード

| [再起動したら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テンプレート

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

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

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

↓サンプル

再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい!

タイトルが長いと回りこんじゃいますね。。。

↓コード

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テンプレート

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

まとめ

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

参考にさせて頂いたサイト

Markdown記法 チートシート - Qiita
Markdown記法 チートシート - Qiita...
ブログ記事の作成支援Chrome拡張「Create Link」の設定例まとめ
ブログ記事の作成を支援するのにタグ作成ツールの存在は欠かせません。 使用しているブラウザがGoogle Chromeなら、今のところ最も使われているのは「Create Link」だと思います。...
Qiitaで使えるHTMLタグは? - Qiita
HTMLタグのテーブル結合は使えなかった気がしたんですが、使えるようになってたので使えるタグを調べてみました。...
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした