KASABUTA-ENDLESS

*

ワードプレスで他のサイトをスクリーンショット画像とタイトル付きリンクで紹介するプラグイン?

      2014/09/17

スポンサーリンク

ワードプレスの記事中で他のサイトをスクリーンショット画像とタイトル付きリンクで紹介するプラグインを探しています。

By: maaco

 

「ワードプレス 画像 リンク 他サイト」

「ワードプレス 他サイト スクリーンショット 画像 リンク」

「ワードプレス リンク 紹介 プラグイン」

などなど、見たことがあって使ってみたいと思っていたとある機能がありまして色々なキーワードで検索してもなかなか辿り着かなかったのですが、やっと探し当てることが出来ました。

これです。

KASABUTA-ENDLESS
かさぶたエンドレス…特に意味は無い

そのサイトのページのスクリーンショット画像の横にタイトルが並んでて、ちょっと文章も入ってるようなやつです。

これ使いたかったんですよ。

ほかのサイトを参考にしたりした時に文字のリンクだけだと味気ないし、スクリーンショットを撮ってトリミングして加工してリンク付けて…っていうのもちょっと手間がかかって面倒だし。

あと見た目がイイですよね。

これ、かなり有名な機能だったみたいです(笑)

私はワードプレスプラグインだとばかり思っていましたが、

ブックマークレットでした。

プラグインじゃなかった!

でも知らないよ~この前ブログ始めたばっかりだし。

いや~もっと検索スキル上げたいな~。

かなり遠回りをして見つけることができたんですよ。

「ワードプレス スクリーンショット リンク」

で検索して、2ページ目にあった、

WordPressでWEBサイトのサムネイル付きリンクを簡単に表示できるプラグイン【Browser Shots】 | WEBマスターの手帳

この記事中の、

ブログを書いていると、ただリンクを張るのではなく、 リンク先のWEBサイトのスクリーンショットを表示させたいと思うときがあります。

有名なものだと「ShareHtml」がありますね。 ブックマーク機能を使って、簡単にWEBサイトのサムネイル画像付きのリンクを作ることができます。

という文章でヒントを得ました。

ありがとうございます!

「ShareHtml」というブックマークレットだったようです。

早速使わせていただきました。

作者の普通のサラリーマンさん、本当に有難うございます。

大事に使わせていただきます。

せっかくなんで導入方法・使い方も説明しましょうか。

 「ShareHtml」の導入

「ShareHtml」はブックマークレットというものです。

ブックマークレットというのは、お気に入り(ブックマーク)に登録することでインストールされて簡単に使用できるようになる素敵プログラムのことです。

Wikiではこんな感じ。

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである[注釈 1]。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。

「ShareHtml」はスクリーンショット画像とタイトル付きのリンクのHTMLを自動で作成してくれるブックマークレットです。

HTMLで吐き出してくれるので、コピーして貼り付けるだけで、簡単にリンクを挿入できます。

最初に設定して登録すれば、あとはいつでも簡単に使用することができるのでオススメです。

オススメってさっき導入したばっかりの新人がいうのも何なんですが、

欲しいでしょ?この機能。

早速やってみましょ。

まず、下のサイトへ。

ShareHtmlメーカー(https://dl.dropboxusercontent.com/u/2271551/javascript/sharehtmlmk.html)

2014-09-16_215937

「出力方法を選択して下さい」までは、特にイジらないでそのままでいいと思います。

「書式テンプレートを選択して下さい」では、

2014-09-16_220113

「左サムネイル大 – alignleft」

「左サムネイル小 – alignleft」

「左サムネイル大 – table」

「右サムネイル大 – table」

「サムネイル無し」

が選択できます。

上の2つはサムネイルが大きいか小さいか、

下2つは周囲に囲いが出来て、サムネイルの位置が左か右か。

サムネイル無しは、そのままサムネイルは無いですよ、ってこと。

私は「左サムネイル大 – table」を使用しています。

いろいろイジりたい人はカスタマイズしちゃってください。

わからぬって人は、そのままで「Bookmarkletを生成する」クリック。

触らぬ神になんちゃららってやつです。

2014-09-16_220217

あとは下に出てきた、「ShareHtml」の文字リンク上をクリック&ブックマークバーにドロップ

クリックしたらすぐに離さずに、アドレスバーの下にあるお気に入りとかがあるバーの上で離してください。

すると、ブックマークレットが生成されています。

2014-09-16_230251

これで、「ShareHtml」の導入は出来ました。

次に実際に使ってみます。

ShareHtmlの使い方

使い方は、リンクを作成したいサイトで先ほど生成した「ShareHtml」のブックマークレットをクリックするだけです。

試しに本ブログでやってみます。

ブログを表示した状態で、「ShareHtml」を、クリック。

2014-09-16_220631

「Input memo」と出てます。

ここで打った文章は作成されるリンクの下に表示されます。

特に文章を入れる必要もありませんので、空欄のまま「OK」

すると…

2014-09-16_220830

HTMLのコードが表示されましたね。

その下にはプレビューもついてます。

あとはこのコードをコピーして、ブログの記事中にペースト(貼り付け)するだけです。

ちゃんとリンクは生成されているでしょうか…

2014-09-16_231628

「!?」

微妙に崩れてる…

文字が右側にないじゃないか…

まぁ、これはこれでありなので、良しとします。

後日修正します。

(追記)原因判明しました。

ワードプレス編集画面でテキストモードで生成されたHTMLをコピペした後に、

ビジュアルモードと行き来することで崩れてしまうようです。

ビジュアルモードとテキストモードの問題は色々あるようなので注意しなきゃですね。

まとまってないまとめ

とりあえず導入できたし、表示にも成功?しました。

私の場合はワードプレステーマとの兼ね合いとかかな?思ったような表示はされませんでしたけど、サムネイル付きのリンクが簡単にあっという間に作成できるってのは最高だと思いました。

あと「サムネイル」って単語が重要だったんだな。

ずっとスクリーンショット画像とか言ってましたけど、サムネイルだと確かにしっくり来る(笑)

このブックマークレットを手に入れたし、またさらにブログ更新が楽しくなるな~。

ここまで「ワードプレスの記事中で他のサイトをスクリーンショット画像とタイトル付きリンクで紹介するプラグインを探しています。」という問題を解決するための色々にお付き合い頂きまして、誠にありがとうございました。

 - WordPress, 問題解決

336adosensu

336adosensu

Message

メールアドレスが公開されることはありません。

  関連記事

108901r
KASABUTA-ENDLESS(かさぶたエンドレス)について

スポンサーリンク KASABUTA-ENDLESS運営者のプロフィール プロフィ …

By: Elliott Brown
[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)

スポンサーリンク [WordPress]フッターのトップへ戻るボタンの位置を変更 …

14924952180_a6cbfdafda_z
センス良いね!画像をポップアップで拡大表示するワードプレスプラグイン

Photo:Le Danseur by Roy Barnett Jr. &nbs …

By: JD Hancock
人気ブログになるためのプロフィールの書き方

スポンサーリンク 人気ブログになるためにアルファブロガーのブログのプロフィール欄 …

stinger0003
スマホにも強い!STINGER5のインストール手順

先日、大人気のワードプレステーマ「STINGERシリーズ」作者のENJIさんが新 …

By: Piotr Drabik
ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法

スポンサーリンク ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法 …

2015-02-05_224359
アキネイター:アナタの考えは見透かされてますよ。

アキネイターってサイト、もしくはアプリ知ってます? なんとなくは知ってたんですけ …

By: Andrew Abogado
[Hueman使い方]サイドバーの背景色を変更する方法。その2

スポンサーリンク [Hueman使い方]サイドバーの色を変更する方法。その2 前 …

cropped-stinger5.png
STINGER5のヘッダーをカスタマイズしますよ。

ヘッダーは超重要だと思いませんか? 人に例えると「顔」にあたると個人的に思ってい …

By: Amanda  Cabral
[ワードプレス]flickrの写真を簡単に挿入できてクレジット表記も自動の超便利なプラグイン

スポンサーリンク flickr上の著作権フリーの写真や画像を簡単に検索・挿入でき …