[i]<追記>ShareHtmlが動かないので、代替手段としてGetTabInfoを使った話

ググっても全然解決策がヒットしなかったので、同じ状況の人のためにログとして。

スポンサーリンク
レクタングル大

記事の要約

ShareHtmlが動かない。。。

昨日、久しぶりにブログを書いたら、リンクタグを作成するShareHtmlのブックマークレットが動きませんでした。

そこでTwitterで調べてみたら、DropBoxの仕様変更の影響らしいことが判明。

HTMLコードなんて難しいもの書けないから困る。非常に困る。

Chrome拡張機能のGetTabInfoが代わりに使えそう

そこで代替サービスがないか探したところ、この記事を発見。

藁にもすがる思いで使ってみました。

実際に使ってみた

基本的な使い方は上記の記事を読んで頂ければわかるので、躓いたところだけ書きます。

サムネイル付きのリンクタグを作るには、”Select template”で”Thumbnail”を選ぶ必要があります。

2017-04-23_04h15_49

でもtemplateには、短縮URLを挿入するタグが入っていました。

▼ココ
2017-04-23_04h16_44

▼そのまま貼り付けるとこうなってしまう
2017-04-23_04h17_32

短縮URLの表示は不要なので、templateから該当部分を削除し、オリジナルのテンプレートとして保存しました。

▼選択部分を削除し、右下の”Save template as…”ボタンを押して、テンプレートの名前を付けて保存
2017-04-23_04h18_28

デフォルトで出てくるサムネイル付きのリンクはこんな感じ。うむ、シンプル。

2017-04-23_04h20_45

CSSを編集すればもっと見栄え良くできるそうですが、その様な知識は持ち合わせていないので、しばらくそのままで使います。

あと、サムネイルが”Now Printing”から画像になるまで、ShareHtmlよりも時間がかかった感じがしました。でも最終的に上の様に画像は表示されたのでOKです。

以上。

<追記>”ShareHtmlを、もっと綺麗にしたメーカー”を使う方法

他の代替方法を教えて頂いたので、追記します。

アドバイス頂きました

上記記事を公開した後、タスク管理の師、大橋さんから以下のアドバイスを頂きました。

さすがブログの最前線にいる方の情報量はすごいです。ありがとうございます。

“ShareHtmlを、もっと綺麗にしたメーカー”の使い方

というわけで、をさっそく試してみました。

HTMLをコピペするだけではダメ

まずの下記のサイトに行き、

リンクタグを生成したいURLを貼り付けて、Enterを押し、タグを生成します。

2017-04-28_07h06_37

そしてそれを貼り付けると、、

2017-04-27_05h55_23

あれ?サムネイルとか枠とかが表示されない。。。

CSSを追加する必要がある

どうしたものかとググったところ、装飾用のCSSを追加しないといけなかったようです。

2017-04-28_07h08_52

わたしは公式サイトで生成されるCSSではなく、ググっている間に見つけた下記サイトで公開されているCSSを使わせて頂きました。ありがとうございます。

WordPress&Simplicityの場合、Style.cssのファイルにこんな感じでCSSを追加(コピペ)します。

2017-04-27_05h58_39

「よし!これでイケるはずだ!」と思ったら、

2017-04-27_05h55_23

まだサムネイルが出てこない。。

キャッシュをクリアしないとCSSの更新結果が反映されないことをすっかり忘れていました。

Chromeの場合、Ctrlを押しながら更新ボタンを押します。

すると下図のように、反映されました。

2017-04-28_07h12_27

CSSを追加するという少し難しい作業が必要ですが、名前の通り綺麗なリンクを作れます。サムネイルもGetTabInfoと違い、すぐに表示されます。

まとめ

“GetTabInfo”はリンクタグを作りたいタブを独立させる必要がありますが、ボタン一つで素早くタグを作成できます。

“ShareHtmlを、もっと綺麗にしたメーカー”は、サイトにリンクタグを作りたいURLを貼り付けてタグを生成する必要がありますが、出来映えが綺麗で、装飾用CSSはコピペするだけです。

それぞれ良いところがあるので、自分のブログレベルに合わせた方法を選びましょう。わたしはCSSも合わせてゲットできたので、”ShareHtmlを、もっと綺麗にしたメーカー”をメインで使い、CSSを追加できない寄稿の場合は”GetTabInfo”をとりあえず使おうと思います。

スポンサーリンク
レクタングル大

役に立つと思われたらシェアをお願いします。
また、何かご質問があれば、Twitterで喜んでお答えします♪

定期購読いただくと、わたしのやる気が100倍になります!

スポンサーリンク
レクタングル大