リンクを貼るだけで簡単にブックマークレットが作成できるプラグイン「Celtis プラグインパック」

bukuma_eyecatch

最近、ブログを書く事に集中出来る様になって本当に嬉しい。勿論、「ハミングバード」のお陰だ。作者のキチさん(@YOSHI_YANO)ありがとう

こんにちわ。ITビジネスパートナーのやまもと(@itka24office)です。

WordPressでブログを書き始めた頃は、一生懸命記事を投稿していたが、いつの頃からか記事も書かずにカスタマイズに明け暮れていた日々が懐かしい。

少し前までは、いろんな人のブログを読んで「あ〜〜〜、このカスタマイズやってみたい」「お!!!コレまねしよ〜」って本来の目的を完全に忘れていた。

記事も書かずにタダひたすら、無為に時間を過ごしていた時にアルバトロスに出会った。そして、あるクライアントのテーマをアルバトロスに変更したところ、PVアップ、クライアントも投稿意欲が湧いてくるという凄いテーマだった事が分かった。

あ、これは私もアルバトロス・・・と思っていた矢先に登場したのが、現在使っているハミングバードだ。今まで自分で様々なテーマをカスタマイズしていた時間は一体何だったんだって思うくらいの完成度。私は自分でテーマのカスタマイズをする事を辞めようと思った。

今日は、とってもお気に入りのハミングバードに次回バージョンアップ時には実装して欲しい「ブックマークレット」が簡単に作れるプラグインについてシェアしよう。

相棒はお馴染みの自称美人アンカーウーマンのカツヨ

ブックマークレットってなになに?

カツヨ
あのさっ〜、いろんな人のブログを見てると、良くこんな奴があるんだけど、コレなに?クリックするとサイトに飛んでいくヤツ
bukuma_hatebu

↑これこれ、これなぁ〜に

 

やまもと
あ〜〜、これね。これ「ブックマークレット」だね
カツヨ
へ〜〜〜。これ、格好いいわよね。サムネイルもついてさ、どんな記事か行く前に分かるなんて最高じゃない。これってどうやってやるの?
やまもと
じゃぁ〜、ブックマークレットをWordPressに貼る方法を幾つか紹介するよ

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

出典元:https://ja.wikipedia.org/wiki/ブックマークレット

最も有名なブックマークレット「ShareHTMLメーカー」

数多くのサイトで紹介されているブックマークレット。将に定番中の定番といえばこの「ShareHTMLメーカー」だ。

先ずは、このShareHTMLメーカーを使ってブックマークレットを貼ってみよう。

WordPressテーマ「ハミングバード」 | OPENCAGE
ハミングバードは「誰が使っても簡単に美しいブログサイトを!」をコンセプトとして開発されたWordPress用テーマです。シンプルなデザインでコンテンツを目立たせます。 もちろんモバイルファーストで設計 …

 

カツヨ
お〜〜〜〜、すごいじゃない。格好いいじゃない。やまもと、早く教えて!!

では、早速ShareHTMLメーカーを使ってリンクを貼る方法を紹介しよう。

1.ShareHTMLメーカーのページを開く

先ずは、このShareHTMLメーカーのページを開いて欲しい。

 

2.bookmarkletを作成する

HTMLタグを自分で書けば自由に作る事が出来るが、それは少し面倒だ。そこで、以下の図の様に設定して、「Bookmarkletを生成する」をクリックする。

bukuma_sharehtml

 

出力方法:プレビュー表示

書式テンプレート:左サムネール大

 

3.リンクをお気に入りにドラッグ&ドロップ

「2」で生成されたリンクをお気に入りにドラッグ&ドロップすれば準備完了

bukuma_sharethml2

 

4.リンクを貼りたいページをブラウザで開く

ココは簡単だ。リンクを貼りたいページを開けばいい。今回は、ハミングバードのページを開いてみる。

5.お気に入りのShareHTMLをクリックする

サムネイルの横に文字を入れたい場合は、入れたい文字をページ内で選択しておく。そして、先ほどお気に入りに追加した「ShareHTML」をクリックだ。

bukuma_sharehtml3

 

すると、次の様なウィンドウが表示される。このウィンドウでは何も入力せずOKをクリック

bukuma_sharehtml4

 

6.HTMLをコピーする

お待ちかね、遂にブックマークレットのHTMLが出来上がった。「HTMLを選択する」をクリックしてコピーすれば、いよいよ最終段階。WordPressに貼り付けるだけだ。

bukuma_sharehtml5

 

7.テキストモードで貼り付ける

WordPressの貼り付けたい記事でテキストモードに切り替えて、貼り付けをする。

bukuma_sharehtml6

 

ビジュアルモードに切り替えると、キチンとブックマークレットが出来上がっている。

bukuma_sharehtml7

 

カツヨ
毎回毎回、ちょっと面倒くさいわね。他に何か良い方法はないの?
やまもと
面倒くさいって・・・。同じ事を手作業でやると5分はかかるよ。まぁ〜、面倒くさいという気持ちはよく分かるから、とっておきを教えるよ
カツヨ
最初から、そっちを教えなさいよ

 

リンクを貼るだけ超簡単「Celtis プラグインパック」

「Celtis プラグインパック」はプラグインパックというだけあって、様々な機能がパッケージされている。その中の一つに今回紹介する「リンクを貼るだけでブックマークレットを作る」という機能がある。

1.ダウンロード

では、早速「Celtis プラグインパック」のサイトに行って、プラグインパックをダウンロードだ。

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

 

勿論、最新版をダウンロードだ。

bukuma_celtis1

 

2.インストール

ダウンロードが終わったら、WordPressの管理画面からプラグインをアップロードする。

「管理画面」→「プラグイン」→「新規追加」から「プラグインのアップロード」をクリックだ。

bukuma_celtis2

 

ダウンロードしたファイルを選び、「今すぐインストール」をクリック。

bukuma_celtis3

 

インストールが完了したら、すぐに有効化する。

 

3.設定

いよいよ設定だ。「管理画面」→「プラグイン」→「Celtisプラグインパック」をクリック。

bukuma_celtis4

 

表示された機能の中から、「oEmbed extend」に関するチェックを全て入れて保存する。

bukuma_celtis5

 

以上で、設定完了。

後は、リンクを貼れば勝手にブックマークレットが出来上がる。

 

やまもとの視点

文字だけのブログは読みづらい。適度な行間、空白、イラストや画像は必須だ。これらは読者が読みやすくする為にブログ運営者が気を付けるべきだ。ブログは書く人の為に非ず、読む人の為にある。

今回紹介したブックマークレットもブログの見た目を華やかして、読者がリンク先をクリックしなくてもある程度の情報を与える事が出来る優れ物だ。

とかく自分のいいたい事ばかり書いてしまいがちだが、読者目線を忘れないでブログは書いて欲しい。

私のお気に入りハミングバードはで購入する事が出来る。

 

カツヨ
ブックマークレットじゃないじゃん

スポンサーリンク

bukuma_eyecatch

面白いって思ったらシェアをお願いします

Web集客&収益化の仕組み作りをマンガ(コミPo!)で解説した小冊子を作成しました

簡単で、楽しく、わかりやすいと既に好評を頂いている小冊子、全部で6冊です。

是非、あなたのWeb集客&収益化にお役立て下さい。

また、何やらココでは言えない『超豪華特典』が付いています。

詳しくは、各小冊子の最後で。