2017.02.17 Friday
このブログは、JUGEMのブログサービスを使っているんだが、JUGEMには、はてなブログの「ブログカード」みたいなものが無いので、羨ましかったんだ。上に表示されているような過去の記事を紹介するブログカードを作りたい。それで、自分用にブログカードを作るブックマークレットを作ってみた。HTMLコードを、クリック一発で作成できるので、便利(^^)
多分、JUGEMの他のブログとか、JUGEM以外のブログやホームページでも<meta>タグに og:title, og:url, og:desc, og:img が記述されていれば使えると思う....
ブックマークレットの作り方をGoogle Chrome を例にして紹介。
まず、何でも良いので適当なホームページのブックマークを作成する。
適当な場所に保存。
ブックマークメニュー / ブックマークマネージャを選ぶ。(Firefoxの場合は「すべてのブックマークを表示」、Safariの場合は「ブックマークを編集」)
先ほど作成したブックマークを編集する。
タイトルを適当に決め....
リンク先URLの部分に下記のコードをコピペして、Enterキーを押す。これでブックマークレットの完成。
次は、CSSの設定。
JUGEMのブログではCSSを自分で編集できるので....
下記のCSSをコピペする。一番下にコピペで良いと思う。これで仕込みは完了。
ブログカードを作成したいページを表示して、さきほど作成したブックマークレットをクリック。
ダイアログが出てくるので、コードをコピー
なぜかもう一回出ることがあるのだけど、キャンセル(^^;)
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