ブックマークレットに何を使うか迷ってます。

このサイトでは、「ユーザー事例」として、弊社が作成させていただいたお客様のWebサイトを表示・紹介しています。
(最近更新していませんが・・・(-_-;))

最初は、自分でブラウザに表示してスクリーンショットとして取り込んで、その画像を表示して・・・ていう具合にしてました。
でも、そうするとサイトのデザイン変更とかすると、実際のサイトとイメージ画像に相違が出てきてしまいます。

それを防ぎたくて、一時期はプラグインの「Browser Shots」を使用したりしたのですが、「Browser Shots」は2バイト文字との相性が悪いのかなんだかわかりませんが、うまく表示されないときがあります。
っていうか、思うように表示されない方が多いかな・・・

そこで、【ブックマークレット】で表示しよう!と思っていろいろやってるのですが・・・

自分としては、表示される画像はアイキャッチ画像ではなく、ブラウザに表示される「Topページ」のイメージを画像として表示させたいのです。

弊社が管理をさせていただいている二つのサイト(二つは関連サイトです。)をサンプルとします。

試してみたことは・・・

 


Browser Shots

横浜緑ロータリークラブ

横浜緑ロータリークラブ

 

サイズ変更も可能です。今回はデフォルトの600×450で表示。
残念ながらこの投稿時点では、日本語部分がうまく表示されていません。

 

Press This(WordPress4.2から実装)

– Rotary Club of YOKOHAMA MIDORI –

情報源: 横浜緑ロータリークラブ – – Rotary Club of YOKOHAMA MIDORI –

 

WordPress4.2から標準で実装されているツールです。
画像はアイキャッチ画像を取り込んでくれるみたいですが、このサイトというかテーマの影響か不明ですが、画像が自動表示されませんでした。
デフォルト設定での表示です。

 

Celtispack プラグイン

Top

 

URLを記述するだけで、表示してくれます。
しかし、TinyMCEの設定で、URLがpで囲まれたりすると表示してくれません。気を付けないと・・・
画像はアイキャッチ画像のような・・・

 

ショートコード実装

 

使用しているテーマのfunction.phpとstyle.cssにコードを記述し、ショートコードとして実装。
参考にさせていただいたサイトは後ほど紹介します。
残念ながら画像が「Browser Shots」と同じ症状。
ショートコード化しているので、自由に設定できるし、ラクです。

 

ShareHtml

横浜緑ロータリークラブ – – Rotary Club of YOKOHAMA MIDORI –
横浜緑ロータリークラブ

 

ShareHtmlの「左サムネイル大」で設定しました。
便利だし、綺麗です。
しかし、ソースをいちいち張り付けるのが面倒・・・。(贅沢か・・・)

 


Browser Shots

第2590地区 未来の夢ハンドブック

第2590地区 未来の夢ハンドブック

 

やはり日本語部分が・・・

 

Press This(WordPress4.2から実装)

RID2590 R財団ハンドブック作成有志

情報源: 第2590地区 ロータリー財団ハンドブック 2015-16 – RID2590 R財団ハンドブック作成有志

 

アイキャッチ画像が表示されます。

 

Celtispack プラグイン

目次:第2590地区 ロータリー財団ハンドブック 2015-16

前述のようにURL記述のみ

 

ショートコード実装

 

ShareHtml

第2590地区 ロータリー財団ハンドブック 2015-16 – RID2590 R財団ハンドブック作成有志
第2590地区 未来の夢ハンドブック

 


ということで、画像は Browser Shots みたいにサイトイメージがいいので、現時点では ShareHtml が理想に近い。

表示される形は、Celtispackプラグイン -> ShareHtml の順かな。
(使用しているテーマによっても異なるでしょうが・・・)

使い勝手は、自分で変更出来てショートコードとして使える、「実装」かな・・・と。

自分の理想通りにするには、ショートコード実装を自分なりに修正して使用するのが一番かもしれません。


そこで参考にさせていただいたサイト。

それぞれの方法で表示して紹介します。


Celtispack プラグイン

WordPress Plugin : Celtispack
WordPressでブログをしているなら絶対おすすめの Celtispack プラグインパックの紹介です。高速化や画像最適化など様々な機能が満載です。このプラグインと Jetpack を組み合わせて使用して頂ければ、必要なものはほとんどカバー出来ます (^^)…

ShareHtml

ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記
普通のサラリーマンのiPhone日記


上記の皆様、大変参考になりました。ありがとうございました。


1件のコメント

  1. ピンバック:ブックマークレットはショートコード実装利用にしました。 – 株式会社 NFC

コメントは受け付けていません。