《初心者向け》WordPressでブログカード風ブックマークレットを設定する手順。

  • 2018年3月21日
  • 2021年9月14日
  • WordPress

はてなブログでサイトや記事をシェアする時のような、かなりイケてるブックマークレットを、えじの自由帳さんが作ってくれていて、たくさんの人がこれを利用しています!

僕(@ka__zz)もこのブログでフル活用させてもらっています。

心から感謝します!

えじの自由帳さんのページでも使い方を丁寧に解説されているのですが、わからない人がいるみたいなので、超初心者向けに図解で手順を説明させていただきます!

WordPressでシンプルでオシャレなブックマークレットを設置する方法。

今回、ブログの記事内に設置するのは▼のようなブックマークレットです!

タイトルも画像もすべて自動で出力されるので、めちゃくちゃ楽ですし、デザインも素晴らしいのでかなり重宝しています。ただし、ブックマークするサイトでアイキャッチ画像を設定していないと何も表示されません。

初心者でもわかるように図解で手順を説明していきます。

作業時間は設定は2分もあれば終わりますし、簡単なので2〜3回やれば身につきます。

まずはここをクリックしてください。

[準備]ブラウザにブックマークバーない人は、表示させる。

まずはブックマークバー(お気に入りバー)を表示させます。

今回はGoogle Chromeで説明していますが、Safariでも同じです。

任意のページをブックマークバーにブックマークする。

何でもいいので、ブックマークバーにページをブックマークで追加してください。

Chromeでは◯部分をドロップすると簡単に追加されます。

ブックマークの内容を編集する。

先ほど追加したブックマークのメニューを出して[編集]をクリックします。
↓ ↓

・名前→ブックマーク
・URL→元のURLを消して、下記の文字列をコピる(長いので最後の1文字までコピってね)→❶
↓↓

javascript:prompt("blogcard",'<iframe style="width:100%;height:155px;max-width:500px;margin:0 0 20px 0;display:block;" title="'+document.title+'" src="https://hatenablog.com/embed?url='+location.href+'" width="300" height="150" frameborder="0" scrolling="no"></iframe>');

❶をURLに貼り付けたら[保存]をクリックして準備完了です。

ブックマークレットを記事に設置する方法。

設置したいページを表示させたらブックマークバーの[ブックマーク]をクリック!

文字列をコピる!

小さなウインドウが出現したら、文字列をコピーします。

WordPressの記事に貼り付けて完了!

最後に、記事に貼り付ければ完了です!

大変、お疲れさまでした。
▼参考にさせていただいたえじさん、ありがとうございました!

それでは皆さん、よい一日を!

Have a good day!

and God bless you!!

最新情報をチェックしよう!