「リンクシール」誕生の経緯をご参照の上、簡単な使い方を覚えて下さいね。応援して頂けると、デザインをもっと増やす励みになります。リアルに時間拘束がありますので、あまりスピーディーに新しいデザインを増やせるわけではありませんので、ご理解いただいた上、既存のリンクシールから全てご自由に選び、使っていただけます。

    ※210304 本投稿の元のタイトルは「吹き出しシリーズ」でしたが、あまりカテゴリーを広げすぎて、探し難くなるのがいやなので、ポップデザイン系として纏めたいと思い、タイトルを変えました。検索履歴や Cookie 等の元のタイトルで残っている可能性がありますので、一応説明して置きます。

    リンクシールについての経緯はこちらです。

ブログカードの代わりに「リンクシール」で良くない？ | 学んで実践するサイト運営とSEO対策
投稿記事に関係ある WEB ページへのリンクは、テキストリンクからリッチリンクに進化していました。当サイトもブログカード始め、色々と検索して、検討をして来ましたが、共通する些細な問題点がいくつかあり、あれやこれやを使って見ているが、最終的にこれで統一しょうと思うものはまだありませんでした。

    リンクシールの使い方はこちらです。

使えないアベノマスクをおしゃれにリメイクしてみた - 手作りの温もり
それでも家族の為に食料調達をしなければなりませんので、近所での買い物も、マスクが欠かせません。最近、不織布のマスクが店頭でしっかり並んでいますので、安心できます。

吹き出しシリーズのリンクシール

注：
    2021年2月現在、リンク属性の target:_blank は主要ブラウザでセキュリティー対策の対象になってしまい、一応 rel:noopener で対応していますが、使用環境によっては効きません、今後の 動きに注目しましょう。

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizzqkwuj5wxP8ihE8SBZVgQvau2Ga8JoGh5J64AsY9BCb_oXFCsr5o5vbk0YDWGbqjyhBSmMMImonCZ70GJ4dn-ysjuimKQH8FbbzH7bH7n5oznzPn9TlPB4jszWivLd6JMpvlt8-RrO6_/s0/210222-zza+kimetsu.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 28px 25px 0px 100px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 25px 0px 100px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPK-U34AnRlEPydy7B-sVageyvELCodh2kZvAHmLwYhPvt8vmk-ZNmcmNLUzrmpnU0jBRZ8Z6ajDQ3CQfhDqPpyF8fLuDW0lbR5GhiJhgYJkozKF67R5aEwxWKvL8RocfzXFh42OhMOQzQ/s0/210222-zzb+kimetsu.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 30px 25px 0px 100px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 25px 0px 100px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq5nhAjuPknzrk8LKhLglROvRpfDznS1qftHKEAjFIHrwQUOf0V7JAtutpk0MMMHXnwwiBRDeZZToA-bvUX7yNzHGaephASYKKYDJmejqstXkOTa9SggR9hhiiWxDMC2zI1kLT6fEN7BxU/s0/210222-zzc+kimetsu.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 30px 25px 0px 100px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 25px 0px 100px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGHKmKNqI5V5LXCPU7fFh17Yqy1K2B-6uS8OPY6rC56AvMlcg6RIdqLE5I4crDHCNQykjn5dBH_pk7AVgEUqfmyOP0kfleJWA7Fc2a9Y_HdfY0eDr4RJP1iXMMHOd_dekJG6bAsbskJhm4/s0/210222-zzd+kimetsu.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 30px 25px 0px 100px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 25px 0px 100px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzqgus7-4KnFg5q_eKop6A4BCKj2dITywQExNkoGlv_nZpeD4tpKu6k3aS4VcKWYHhHkGjvl7G8ec4L2rMYe9BMB3MyDpOJJXzuoPWIo5n4F_yzsU-FfdvpulqTnzqMMPS7S0V9iVe7jk4/s0/210222-zze+kimetsu.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 28px 25px 0px 115px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 25px 0px 115px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wCGl1y9K51Kn6BouMmpNJijMqQ1ZP6LAEWTvTfZnwcWTQ5-QcOGk3eIJ-rRHbd_abCkGkNv5IYMtsydeR63m7PEEKMRnsBGuNWw5pVDWnLcIve9Kf9QMOyy62VbXVW_Vu9OYH7UnvfJD/s0/210222-zzf+kimetsu.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 28px 25px 0px 90px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 25px 0px 90px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY12SjFbUEv-76djCAvYm0xa191KxvR3FOef0chrufZLOL8nsVDpdzh34UZ-9MX56lYDQq4eSsLvCo2kuuV6OixZm2OeP_iZ9JlqX9_yxNva7VMO8FFM6IbSPyp37He3FwC7BpyAxtG5xW/s920/210221-a+thumb-bubble.jpg" style="background-repeat: no-repeat; background-size: 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 40px; overflow-y: hidden; padding: 23px 55px 0px 35px; rel:noopener; target:_blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 55px 0px 35px; rel:noopener; target:_blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiP6R9ZCyEi-nvhp4T9N9JgZz03M-LLZo-_VGyi8UxLMPdSmml5tyEIM_-14WD8zOqL9fap1L6-Nm9vdTbvCsCc9OD6JJwQgBV3ozJBUTN9iCLD63mnjeAGwQty0RRn5qI_66HP8VBBdVj/s920/210221-b+thumb2-bubble.jpg" style="background-repeat: no-repeat; background-size: 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 40px; overflow-y: hidden; padding: 23px 35px 0px 65px; rel:noopener; target:_blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 65px; rel:noopener; target:_blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijn5f6EDSRbZ-z0I_BaWBz4B7RMH-u5gopJs7-a1r08qKDutxNrQpL5_Eg3ArArkXuGwz9nZJNdGR9ujGwCTQhKgRYyzzpem_Ip78yS3Dx67TfNc4FL6-qtiaxtQ6sxKKmRc9_2yPAKe4g/s920/210221-c+wow-bubble.jpg" style="background-repeat: no-repeat; background-size: 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 30px 70px 0px 45px; rel:noopener; target:_blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 60px 0px 45px; rel:noopener; target:_blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhixtk-24wCOHOY_x7Xd2hn5bm5_U8l8Kfr2SZ5XCMh3xIt9YKAXE0WXCX1n-eXUTmL29K1_aCoucLxxj_JhQygTPuu6-JOR4Ro3PB6oIyv9eQhbeG9BRNRfVjOfmLIzj5HUljDoDeqmmLB/s920/210222-c+stitch-bubble.jpg" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 20px 40px 0px 45px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 40px 0px 45px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5TJ0FgQVxKOMg3t6Nj6VZNFbnQ1gQADRvYP82cTgYpDMr3oWjKmk4foQkI7z6KetgTOTZ9bFN6Oj6M9Atzn-HiZMXwlZvj21qaLghJ_zSAQwuhOJXY5VrqHidPxyJ8eljzSKtIwgmTg-x/s920/210222-zg+cloud.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 35px 50px 0px 100px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>

CreateLinkのformat用コード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9-Y1MSj0GAsenBzJxcwxM6y3wHKj__hlBC9lVFHxwbzi5p4_W4qyy3aLraMMbnDka73fYm_-bZ6CDetovpc7F8GxE9KmsyFoyPyzIhIaujpAH1IPehPj0RjCGFv9VzBK_tjnovE2mV89/s460/210220-b+popcat.png" style="background-repeat: no-repeat; font-color: black; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; height: 40px; overflow-y: hidden; padding: 10px 10px 0px 70px; rel:noopener; target:_blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; height: 65px; overflow-y: hidden; padding: 5px 10px 0px 70px; rel:noopener; target:_blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr></tbody></table>