ブログの記事の中で、参考記事などのリンクを載せるときは「ShareHtml」というブックマークレットを使ってサムネイル付きのリンクを作っています。
今回は、この「ShareHtml」で作ったリンクに枠線を付ける方法を紹介します。
最初にカスタマイズ後のShareHtmlで作成したリンクがこちら↓
この周りを枠線で囲うために変更した部分をまとめておきます。
ShareHtmlのコード作成
ShareHtmlのサイトで作成していきます。
今回は書式テンプレートの中にある「左サムネイル大 - alignleft」をもとにして作成しました。
テンプレートから変更する部分はもともとのコードを
<div class="sharehtml">と</div>
で挟むだけです。
変更が終われば；ブックマークレットを生成して保存すれば完了です。
CSSの設定
このclassに対して以下のCSSを追加しました。
.sharehtml {
border: dotted #0078D4 1px;
padding: 3px;
background-color: #F2F2F2;
}
あとがき
これだけで枠つきのリンクを貼り付けられるようになりました!!
記事の最初の方にもありますが、もう一度カスタマイズ後のShareHtmlで作成したリンクを貼っておきます。
こんなに簡単ならもっと早くしておくべきでしたねーw
0 件のコメント:
コメントを投稿