とめるける

ブログのちょっとしたアクセントとして、アイコン + 吹き出しのテンプレートを HTML5 + CSS Grid で作りました。

改行を入れずにコピペして利用します。はてな記法モード or Markdown モードで利用できます。

フードネコ Ver

サンプルです。

<div style="margin:0;padding:0;border:none;display:grid;grid-template-columns:max-content 20px minmax(1rem,max-content);"><div style="width:100px;height:100px;margin:0;padding:0;background-image:url('https://cdn-ak.f.st-hatena.com/images/fotolife/t/tercel_s/20200112/20200112212801.png');background-repeat:no-repeat;background-size:contain;"></div><div style="padding-top:60px;"><div style="width:0;height:0;border-style:solid;border-width:0px 20px 8px 0;border-color:transparent #c6bab6 transparent transparent;position:relative;z-index:1"></div></div><div style="display:grid;grid-template-rows:50px max-content;"><div></div><div style="margin:0;margin-right:3px;padding:0;padding-left:0.3rem;padding-right:0.3rem;border-radius:0.3rem;color:#412318;background:#c6bab6;box-shadow:0 1px 3px #412318;"><!-- ここに吹き出しの内容を HTML で書いてください --></div></div></div>

たーせるくん Ver

サンプルです。

その1: ボトムマージン調整版

アイコンの高さよりも吹き出しの高さが短い場合、吹き出し同士の見た目の間隔が不自然にならないようマージンを調整します。

フードネコさんの返しが続く場合は、こちらを利用するのが無難です。

<div style="margin:0;padding:0;border:none;display:grid;grid-template-columns:1fr minmax(1rem,max-content) 20px max-content;"><div style="grid-column:1/2;"></div><div style="grid-column:3/4;padding-top:60px;"><div style="width:0;height:0;border-style:solid;border-width:0px 0 8px 20px;border-color:transparent transparent transparent #d7d6d6;position:relative;z-index:1"></div></div><div style="grid-column:4/5;width:100px;height:100px;margin:0;margin-bottom:-1rem;padding:0;background-image:url('https://cdn-ak.f.st-hatena.com/images/fotolife/t/tercel_s/20200113/20200113211534.png');background-repeat:no-repeat;background-size:contain;"></div><div style="grid-row:1/2;grid-column:2/3;display:grid;grid-template-rows:50px max-content;"><div></div><div style="margin:0;margin-left:3px;padding:0; padding-left:0.3rem;border-radius:0.3rem;color:#412318;background:#d7d6d6;box-shadow:0 1px 3px #412318;"><!-- ここに吹き出しの内容を HTML で書いてください --></div></div></div>

その2: ボトムマージン非調整版

<div style="margin:0;padding:0;border:none;display:grid;grid-template-columns:1fr minmax(1rem,max-content) 20px max-content;"><div style="grid-column:1/2;"></div><div style="grid-column:3/4;padding-top:60px;"><div style="width:0;height:0;border-style:solid;border-width:0px 0 8px 20px;border-color:transparent transparent transparent #d7d6d6;position:relative;z-index:1"></div></div><div style="grid-column:4/5;width:100px;height:100px;margin:0;padding:0;background-image:url('https://cdn-ak.f.st-hatena.com/images/fotolife/t/tercel_s/20200113/20200113211534.png');background-repeat:no-repeat;background-size:contain;"></div><div style="grid-row:1/2;grid-column:2/3;display:grid;grid-template-rows:50px max-content;"><div></div><div style="margin:0;margin-left:3px;padding:0; padding-left:0.3rem;border-radius:0.3rem;color:#412318;background:#d7d6d6;box-shadow:0 1px 3px #412318;"><!-- ここに吹き出しの内容を HTML で書いてください --></div></div></div>