ShareHtmlメーカーで作成したタグのCSSを調整できるように設定する方法

リンク先のサムネール画像を自動取得してくれる便利なツール「ShareHtmlメーカー」。当サイトでも利用させていただくことになりました。この場を借りて作者様にお礼申し上げます。

初期設定のままでもきれいなのですが、サムネイルとリンクテキストがくっつきすぎているかな、と。
ただ、デフォルトだとCSSをいじるのがちょっと面倒なので、ブックマークレット作成時にCSS設定用のタグを入れ込むことにしました。やり方を忘れないようにココに備忘録としてメモしておきます。

今回は書式テンプレート「左サムネイル小-alignleft」にCSS用タグを入れ込む方法。基本的な設定は「左サムネイル大」でも同様です。

ブックマークレットの設定

まずはShareHtmlメーカー本体ページに飛びましょう。

thum_001

ポイントは「以下を直接カスタマイズすることもできます」の部分、ここに次のようにタグを追記します(赤字部分)。

thum_002

別に難しいことはやっていなくて、サムネールとテキストリンクをそれぞれdivタグで括ってあげているだけです。
わたしと同じ設定でよければ、以下のタグをコピペして流用してください。

この状態で「Bookmarkletを生成する」ボタンを押すと、以下のような画面になるので「デモおよびPC登録用:そのまま実行もしくは登録」を、ブックマークにドラッグして登録。

thum_003

あとは、リンクしたいページを開いてブックマークをクリックすればOK。一度設定してしまえば、あとは何度も変更する必要がないので便利ですね。

thum_005

各設定ごとにブックマークレットを作っておくと便利ですね。

CSSの記述方法

ちなみに、CSSは以下のような感じです(サムネイルと、リンクテキストの間を15pxにしてあります)。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です