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

公開日: : MEMO, WEB関連, WORDPRESS , ,

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

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

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

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

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

thum_001

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

thum_002

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

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

thum_003

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

thum_005

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

CSSの記述方法

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

STINGER3をあれこれカスタマイズした記録

このサイトはテーマ(テンプレート)としてSTINGER3を利用させていただいています。 シンプルで

ThunderBird(サンダーバード)でメールの送信日時を予約する方法

誰かにメールを送る際に、今すぐではなく数時間後や数日後に送信してくれたら・・・と思うことが時々ありま

QuickAdsenseで挿入するアドセンスコードをPCとスマホで切り替える方法

WordPressの記事内に自動でGoogleアドセンスのコードを挿入してくれる便利プラグイン「Qu

足元の冷えを解消!デスクワーカーにおすすめの足温グッズまとめ!

日がな一日座り続けで作業をしていると、血流が悪くなるのか、足元(つま先からカカトにかけて)が冷えてし

WordPressで記事の公開/更新ボタンがグレーアウトしてしまう問題の対処方法

当ブログはWordPressで作成しているのですが、記事の作成中(編集中)、たまに 公開(更新)ボタ

RollToEverで通信エラーが発生した場合の対処方法

普段わたしがお世話になっているiphoneアプリにRollToEver(ロールトゥーエバー)というの

GoogleAnalyticsのデータにリファラスパムが入るのを防ぐ方法

Google Analyticsなど解析ツール利用者の心理を巧みについた迷惑行為「リファラスパム」。

Backjoy(バックジョイ)の価格を比較! 安く買えるのはどこ?

この記事では Backjoy(バックジョイ)の購入を考えている方のために、ネットショップにおけるの価

それは詐欺メール! "セゾンNetアンサーご登録確認"というメールが届いたら

※まず結論から言いますと「セゾンNetアンサーご登録確認」なるメールが届いた場合は99%フィッシング

RollToEverで「Code=2 Param=0」のエラーが出た場合の対処方法

iPhoneで撮影した複数枚の写真をワンタッチでEverNoteに自動転送してくれる便利アプリRol

Message

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

足元の冷えを解消!デスクワーカーにおすすめの足温グッズまとめ!

日がな一日座り続けで作業をしていると、血流が悪くなるのか、足元(つま先

足元の冷え解消!足温グッズレビュー(3) ホットマルチヒーター

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

足元の冷え解消!足温グッズレビュー(2) 山形電気あんか*参考

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

足元の冷え解消!足温グッズレビュー(1) デュアルヒータースリッパ

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

掃除機にペットボトルの蓋が詰まってしまった場合の対処方法

部屋を掃除していたところ、掃除機でペットボトルのフタを吸い込んでしまい

→もっと見る

PAGE TOP ↑