# リンクカード生成システム webページを見るうえでリンクカードがあるとリンク先の概要が分かりやすい。 今では多くのサービスでURLから自動生成されるけどシンプルなシステムでは搭載されていないことも多い なんかブログカードを作るのにいいサービスを見かけたので記録しておく <div id="html-part" class="link-card-wrapper"><a class="link-card" href="https://web-saku.net/tools/link-card-generator/" ><div class="link-card-content"><div class="link-card-image" id="grid-content-1"><img id="thumbnail-image-code" src="https://web-saku.net/tools/link-card-generator/img/link-card-generator-image.png"></div><div class="link-card-text" id="grid-content-2"><p class="link-card-title">シンプルなリンクカードジェネレーター | Web-saku</p></div><div id="grid-content-3"><p class="link-card-description">リンク先のURLを入力するとシンプルなリンクカード（ブログカード）のHTML/CSSコードを生成するツールです。</p><div class="link-card-domain"><img id="favicon-image-code" src="https://web-saku.net/wp-content/themes/mblog_ver2/images/favicon.ico"><p>https://web-saku.net/tools/link-card-generator/</p></div></div></div></a></div> <style>.link-card-wrapper{width:100%;box-sizing:border-box;background-color:#fff;border:1px solid gray;border-radius:8px;margin:0;padding:10px}.link-card,a:hover,a:focus{text-decoration:none;outline:none;color:#333}.link-card-image,.link-card-text{width:100%}.link-card-image img{width:100%;max-width:100%}.link-card-title{font-size:140%;line-height:1.5;font-weight:700;margin:0 0 10px 0}blockquote{font-size:17px;margin:0 0 10px 0;padding:0 20px;border-left:5px solid #ddd}.card-blockquote p{margin:0;padding:5px 0}.link-card-description{line-height:1.5;margin:0 0 10px 0}.link-card-domain{display:flex}.link-card-domain img{width:16px;height:16px;margin:0 8px 0 0}.link-card-domain p{display:inline-block;margin:0 10px 0 0;color:gray;font-size:14px;line-height:1.2}@media (min-width:640px){.link-card-content{width:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}.link-card-title{margin:0}#grid-content-1{grid-column:1 / 2;grid-row:2 / 3}#grid-content-2{grid-column:1 / 3;grid-row:1 / 2}#grid-content-3{grid-column:2 / 3;grid-row:2 / 3;display:grid;grid-template-rows:auto 1fr;margin-top:5px;padding-left:20px}.link-card-image{width:100%;margin:5px 0}.link-card-image img{width:150px}.link-card-description{margin:0 0 10px 0}.link-card-domain{align-items:end;margin-bottom:5px}}</style> 無駄な外部リソースを読み込んだりしていないのでよさそう。