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で送る

関連記事

medium_287665619

PowerDVD ver8でブルーレイが再生できなくなったが、解決した。

photo credit: aussiegall via photopin cc DVD、ブル

ffftp_error_001

FFFTPでフォルダ(ディレクトリ)を一括でダウンロードする際にエラーが出た場合の対処方法

FFFTPではフォルダ(ディレクトリ)を一括でダウンロードするような場合に、頻繁にエラーがでてしまい

amazon_suport_001

Amazonカスタマーサポートにメールを送る際「名前を入力してください」とエラーが出た場合の対処方法

Amazon driveについて確認したいことがあり、カスタマーサポートにメールで問い合わせてみるこ

hont_008

どちらがお得!? amazonとhonto(ホント)を比較してみた

わたくし、普段のネット通販はもっぱらAmazon(アマゾン)を利用しています。 特に不便も感じ

joseikin_003

うちは何回まで受けられる? 特定不妊治療費助成制度について調べてみた

昨年から不妊治療を開始し、半年ほど人工授精を行ってきましたがなかなか良い結果にいたらず、このたび次の

miraguro_004

名刺入れを購入しました! Milagro(ミラグロ)BTK03 姫路産型押しレザー

わたしは、営業職などではないので、普段、名刺交換をする機会があまりありません。 なので

google_kare_001

googleカレンダーで項目選択や入力ができなくなった場合の対処法

FireFox(ver45.0.2)でgoogleカレンダーにログインし、いざ予定を書き込もうとした

yamato_001

ヤマト運輸から身に覚えのない転居転送サービスの確認書が届いた

ヤマト運輸から「転居転送サービス」のはがきが届きました。 これは「転居したから荷物を新住所に転送し

medium_281640001

Page Speed Insightsを利用してサイトのパフォーマンスを改善する

photo credit: Roby Ferrari via photopin cc Pa

excel_grah_jiku008

Excel(エクセル)で表から作成したグラフの軸を上下反転させる方法

excel(エクセル)2013で作成した表をもとにグラフを作成した時に、項目の上下の並び順を反転した

Message

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

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑