はじめに
はてなブログではリンクを添付する際に「埋め込み」「タイトル」「URL」から表示形式を選択できますが、埋め込み形式にするとカード型として一つのボックスになるため利用されます。
以下のような形式で
はてな記法であれば
[URL:embed]
で実現できます。
本記事ではこのカード型のカスタマイズ方法について簡単に説明します。
カスタマイズ方法
埋め込みカードの実体は以下構造です。
<iframe src="https://hatenablog-parts.com/embed?url=URL" title="ENTRYTITLE - BLOGTITLE" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe>
よって『embed-card』または『embed-blogcard』に対してデザインCSSを当ててあげればデザインを変更できます。
例
例えば以下をデザインCSSに記載すると
.embed-blogcard {
background-color:blue;
}カードの枠が全て青色になります。
もちろん、iframeの中でwidthやheightを明示的に変更することで個別にカスタマイズすることも可能です。
終わり
他にもいい変更パラメータがあれば、追記していこうと思います。
ここを変えればいい感じに変わったよ、というのがあればコメントいただけると幸いです。
