景観デザインを目指せ

重山陽一郎の個人ブログ blog.enviro-studio.net
<< ブログのフォントをWebフォントにしてみた | HOME | ブログのFacebookシェアボタンをクリックすると「ページが見つかりません」と言われてしまう.... >>
ブログカードをつくるブックマークレットを作ってみた(JUGEMのブログでも使える)

このブログは、JUGEMのブログサービスを使っているんだが、JUGEMには、はてなブログの「ブログカード」みたいなものが無いので、羨ましかったんだ。上に表示されているような過去の記事を紹介するブログカードを作りたい。それで、自分用にブログカードを作るブックマークレットを作ってみた。HTMLコードを、クリック一発で作成できるので、便利(^^)
多分、JUGEMの他のブログとか、JUGEM以外のブログやホームページでも<meta>タグに og:title, og:url, og:desc, og:img が記述されていれば使えると思う....

スクリーンショット 2017-02-12 10.52.12
ブックマークレットの作り方をGoogle Chrome を例にして紹介。
まず、何でも良いので適当なホームページのブックマークを作成する。

スクリーンショット 2017-02-12 10.53.12
適当な場所に保存。

スクリーンショット 2017-02-12 10.53.58
ブックマークメニュー / ブックマークマネージャを選ぶ。(Firefoxの場合は「すべてのブックマークを表示」、Safariの場合は「ブックマークを編集」)

スクリーンショット 2017-02-12 11.01.02
先ほど作成したブックマークを編集する。

スクリーンショット 2017-02-12 11.01.49
タイトルを適当に決め....

スクリーンショット 2017-02-12 11.03.01
リンク先URLの部分に下記のコードをコピペして、Enterキーを押す。これでブックマークレットの完成。


次は、CSSの設定。
スクリーンショット 2017-02-12 11.10.45
JUGEMのブログではCSSを自分で編集できるので....

スクリーンショット 2017-02-12 11.12.36
下記のCSSをコピペする。一番下にコピペで良いと思う。これで仕込みは完了。


スクリーンショット 2017-02-12 11.06.28
ブログカードを作成したいページを表示して、さきほど作成したブックマークレットをクリック。

スクリーンショット 2017-02-12 11.07.39
ダイアログが出てくるので、コードをコピー

スクリーンショット 2017-02-12 11.08.28
なぜかもう一回出ることがあるのだけど、キャンセル(^^;)

スクリーンショット 2017-02-12 11.09.39
JUGEMのブログの記事にペーストすれば....

完成(^^)

ブックマークレットの作成には、こちらの記事が大変参考になりました。有り難うございました。
色々と修正させていただきました。
・ブログカード内の画像は<a>タグのbackground-imageにして、CSSで
   display:block;
   height: 150px;
   width: 150px;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 で、写真が縦長でも横長でも、短辺に合わせて、中央を正方形に切り抜いて表示するようにしました。

・画像の<a>タグに、CSSで
   a:hover {opacity: 0.7}
 を設定して、マウスオーバーで反応するようにしました。

・テキストも、マウスオーバーでアンダーラインが出るようにしました。
 これは私のブログのリンクの貼ってあるテキストの動作に合わせてあります。


Category:MacときどきWin
SEARCH
FEED
FEATURE ARTICLE
CATEGORIES
CALENDAR
S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< April 2017 >>
LINKS
ARCHIVES