ブックマークレット「ShareHtml 」を使って、WordPress.com にサムネイル画像つき記事リストを作成する

私自身はリストタグと CSS を追加することで以下のような記事リストを表示させていますが、

CSS になじみのない方にとっては、慣れない作業でかえって使いにくかったりすると思います。

そこで、ここでは CSS の知識なしにサムネイル画像つきの記事リストを表示させる方法として、「ShareHtml」というブックマークレットを紹介したいと思います。

実際にこのツールを使って、サムネイル画像つきリストを作成しているようすは以下のような感じです。

!

2015-01-13現在、ShareHtml のサムネイル画像は、ブログの URL アドレスが「https://*.wordpress.com」という形式になっている WordPress.com では表示されなくなっていること(レンタルサーバ等にインストールして使うタイプの WordPress では OK )を確認済みです。

!

2015-03-15現在、ShareHtml のサムネイル画像がすべての WordPress.com で表示されるようになっていることを確認済みです。

たまにサムネイル画像の抽出がうまくいかないことがありますが、しばらくするとちゃんと反映されるようです。「ShareHtml」というブックマークレットの使い方については以下の記事等をご参照ください。その他「ShareHtml」で検索すれば関連記事をたくさん見つけ出せると思います。タブログの記事紹介で必須なツール「ShareHTML」の設定方法 | あなたのスイッチを押すブログ
ブックマークレット「ShareHtml」を使うとサムネイル画像を自動的に抽出してくれるわけですが、あとから自分の好きな画像と差し替えることも可能です。

なお、私自身は mac の Firefox を使っているので利用することはできませんが、Google Chrome を使っている場合は「GetTabInfo」という拡張機能を使うと、開いている複数の Web ページをまとめてサムネイル画像付きの記事リストに変換することができるようです。

[拡張機能]開いてるタブ全部に一瞬でShareHTMLする「GetTabInfo」が最強すぎな件 | yossense

 

「横ライン」を使って、

新規投稿を追加 ‹ comemo — WordPress-16

適宜、上下に線を入れたり、


本来の用途とは違うかもしれませんが、<pre>タグで囲って、

新規投稿を追加 ‹ comemo — WordPress-17

他の領域と識別がつきやすいようにしてもいいと思います。

[拡張機能]開いてるタブ全部に一瞬でShareHTMLする「GetTabInfo」が最強すぎな件 | yossense

また、同じような要領で、テキストウィジェットを使って、

ウィジェット ‹ t demo — WordPress

サイドバー等に記事リストを表示させることも可能です。

t demo-3

6件のコメント

  1. 最近になって、ShareHtmlで作成したサムネイルが軒並みBadRequestになっていませんか?

    いいね: 1人

    1. ご連絡、ありがとうございます。今、ざっくりと調査した結果、どうやら「ブログの URL が「https://*.wordpress.com」となっている WordPress.com」では表示できなくなっている状態のようです。amazlet というアマゾンの本を紹介するサービスのサムネイル画像の方はちゃんと表示されているので、外部から引っ張ってきている画像すべてを表示できないわけではなさそうです。

      いいね: 1人

      1. ありがとございます。
        フォーラムに投稿しようと思います。

        いいね: 1人

    2. なお、どういうメカニズムなのかどうかはわかりませんが、独自ドメイン(「http://」から始まる)に変更したら、ShareHtml のサムネイル画像がちゃんと表示されるようになりました。(http://wp.me/p1iThy-aol)

      つまり、「「https//」で始まるアドレスをもつ WordPress.com のブログ・サイト」限定で、ShareHtml のサムネイル画像が BadRequest になっているようです。

      いいね

      1. にほんブログ村のinポイント取得にも「https://」始まりのアドレスで問題が発生していたようです。ありがとうございました。

        いいね: 1人

  2. […] ShareHtmlについては、 comemoさんの紹介記事を参考になさってください。 最近になって、WordPress.comのアドレスが、Googleの勧めで、http:からhttps:に変更になりました。 そしたら、軒並みShareHtmlで作ったサムネイル画像が軒並みBadRequestになりました。 […]

    いいね

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。