個人的に、はてなブログで自分のブログを書いている関係から、Qiitaにはてブのブログカードみたいな外部サイトへのリンクを貼れないかな？と考えました。
↓こんな感じのやつです。（※これはただの画像です(^^;)
ところが、Qiitaで採用しているMarkDownでレイアウトを凝ったオブジェクト埋め込みを実現しようとすると結構大変でした。。。。。。（汗）いろいろと試行錯誤を繰り返して四苦八苦しましたが、なんとなく方法がまとまってきたので備忘録がてらシェアします。
大きくわけてHTMLタグを使う方法と使わない方法の２種類があり、それぞれ２種類のコードをサンプルとして紹介してます。
なおサイトサムネイルの取り込みには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属性は有効にならないようなので１行目であるグレーが背景になってしまっています。
ただ強制的に１行目が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テンプレート
<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リンク、はてブ数を１行目に出したスタイル。
あえてサイトサムネイルを前に置いてるけど、後ろに回してもいいかもしれない。
|
再起動したら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テンプレート
<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が登場したときの話 - 電磁波に撃たれて眠りたい！ 何が原因か分からない（あとでわかった）のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。... |
|
|---|
↓コード
| [再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！](http://blog.mamohacy.com/entry/2013/03/29/192149) <BR>何が原因か分からない（あとでわかった）のですが、Ubuntuを再起動したらいきなりこんな画面が出てきました。... | |
|:--|:-:|
↓Create Linkテンプレート
| [%title%](%url%) <BR>%htmlEscapedText%| |%newline%|:--|:-:|%newline%
表すら使わない超シンプルなパターン
MarkDownのみで書く場合はこっちのほうがシンプルかもしれません。
ただし改行を入れると画像の下に行ってしまうので本文の引用などは表示するのが難しく、タイトル＋リンク＋はてブ数のみとしてます。
もうちょっとなんとかしたかったんですけど、MarkDownのみでなんとかするにはこれが限界な気がしてます。
↓サンプル
タイトルが長いと回りこんじゃいますね。。。
↓コード
 [再起動したらgrubメニューが表示されずgrub rescueが登場したときの話 - 電磁波に撃たれて眠りたい！](http://www.ashinari.com/) 
↓Create Linkテンプレート
 [%title%](%url%) %newline%
まとめ
以上、ブログカード風のリンクをQiitaに埋め込む方法４種類のご紹介でした。
他にもいい方法があったら是非コメントにて教えて下さい！
参考にさせて頂いたサイト
Markdown記法 チートシート - Qiita
Markdown記法 チートシート - Qiita... |
|
ブログ記事の作成支援Chrome拡張「Create Link」の設定例まとめ
ブログ記事の作成を支援するのにタグ作成ツールの存在は欠かせません。 使用しているブラウザがGoogle Chromeなら、今のところ最も使われているのは「Create Link」だと思います。... |
|
Qiitaで使えるHTMLタグは？ - Qiita
HTMLタグのテーブル結合は使えなかった気がしたんですが、使えるようになってたので使えるタグを調べてみました。... |
|