ブログカード＆テキストリンクを1クリック取得するブックマークレット

この記事では、「ブログカード」（リンクカード）と「テキストリンク」を1クリックで取得できるブックマークレットを作ってみたのでご紹介します。 ブログに限らず、どのWebサイトでも使えます！

まず特徴と使い方を説明し、次にブックマークレットとブログカード用のCSSを公開します。ご自由にお使いください。ブックマークレットのソースコードは、別記事で解説したいと思います。

2020/10/19：ブログカード用ブックマークレットのサムネイルを遅延読み込み（loading="lazy"）にしました。記事の読み込み高速化に多少は寄与すると思います。

ブックマークレットの特徴

1. ブックマークレットとは、リンクに飛ぶのではなく「JavaScriptを実行する」ブックマークです。インストールは簡単、実行も1クリックのお手軽プラグインです。
2. kamokamo製ブックマークレットはjQuery未使用なので、どのページでも使えて、かつ高速です。ブログカード用のブックマークレットは既にいくつか公開されていますが（最後に挙げる参考サイト参照）、jQueryを使っていたりタイトル部分しかリンクになっていなかったりしたのが気になり、自作しました。実際、jQueryの読み込みを拒否するサイトもあり…。例えばここ⇒ LibreOffice Basic Help
3. ブログカード作成方法として、EmbedlyやはてなブログのAPI（外部サービス）を使うといったものもありますが、それらと比べて「デザインを自由にいじれる」「外部の仕組みが不要」という利点があります（kamokamo製ブックマークレットでは、ブログカードのファビコン取得にのみ、Google APIを使用しています）。

ブックマークレットの使い方

1. 下の「ブックマークレット」の項で、マーカー線を引いた文字を「ドラッグ＆ドロップ」でブックマークバーに置いてください。ブックマークフォルダ内であればどこでも移動できます。
2. ブログカードを使用する場合、本記事の下の方にあるCSSコードを、ご自分のWebサイトやブログに入れてください（※テキストリンクしか使わない場合は不要です）。Bloggerユーザーなら </b:skin> の上あたりが良いと思います。CSSは好みに合わせて編集してお使いください。
3. これで準備完了です。あとはリンクしたいページでブックマークレットをクリックするだけでHTMLコードがポップアップ表示されます。それをコピーして、記事のHTML編集画面に貼り付ければOK！

ブックマークレット本体

マーカー線を引いた文字を「ドラッグ＆ドロップ」でブックマークバーに置いてください。ブックマークフォルダ内であればどこでも移動できます。
クリックすると動作を試せるので、やってみてください（本記事のリンクを取得します）。

ブログカード（ファビコン付き）

このようなブログカードのHTMLコードが取得できます。
ファビコン取得のため、GoogleのAPIを利用しています。
※CSSを入れるのもお忘れなく。
※OGP（metaタグ）が設定されていないWebサイトだとうまくデータ取得できないので、ご注意ください。データが取得できなかった部分は"Undefined"という文字になります。

ブックマークレット作成ツール (配布用HTMLコード付き)

このツールを使って、オリジナルブックマークレットを作ることができます！配布用HTMLコードを自身のWebサイトに貼り付ければ、公開もできます。

itchingears-kamokamo.blogspot.com

ブログカード（ファビコン無し）

このようなブログカードのHTMLコードが取得できます。
外部APIは使っていません。ファビコン付きと体感速度は全く変わらないので、どうしても外部APIを使いたくない事情がなければファビコン付きで良いと思いますが、一応。
※CSSを入れるのもお忘れなく。
※OGP（metaタグ）が設定されていないWebサイトだとうまくデータ取得できないので、ご注意ください。データが取得できなかった部分は"Undefined"という文字になります。

[Blogger] 改造リスト

この記事では、当ブログで実施した改造内容を一覧にまとめます。詳細を記事にしたら、そのリンクを貼っていきます。

itchingears-kamokamo.blogspot.com

kamoカード（背景付きブログカード）

当ブログで自己リンク用に使っている背景付きブログカードです。styleタグ付きなので、CSSを別で入れなくても表示されます。背景は、ブックマーク保存した後に右クリック⇒編集でコードが見れるので、その中の"background-image"のurlを変更すれば変えられます。ご自由にどうぞ。

[Studio One] 音楽制作のロードマップ

この記事では、Studio Oneを使った音楽制作のロードマップ（手順）を描いてみたいと思います。独学で試行錯誤しながら50曲以上を作詞・作曲・編曲してきた旅のまとめとして。これから旅に出る方、道に迷ってしまった方の助けになれたらと願っています。

itchingears-kamokamo.blogspot.com

内部リンク

自分の他記事紹介用の、「現在のタブで開く」リンクになります。
例↓

外部リンク

他サイト紹介用の、「新しいタブで開く」リンクになります。
例↓

外部リンク アイコン付き

「新しいタブで開く」アイコンを自動で付けます。
例↓

ただし、Font Awesome 5の導入が別途必要です。未導入の方は、以下のコードをHTMLの </head> タグの上に置いてください。

    <!-- Font Awesome -->
    <script defer='defer' src='//use.fontawesome.com/releases/v5.11.1/js/all.js'/>
  

ブログカード用CSS

ブログカードのデザイン用CSSです。好みに合わせて編集してお使いください。

/* blogcard*/
.blogcard {
  max-width: 90%;
  margin: 1em auto;
  padding: 10px;
  border: 1px solid black;
  box-shadow: 3px 3px 5px 0px #aaa;
  background: white;
  transition:.2s;
}
.blogcard:hover{
  box-shadow: 3px 3px 5px 2px #aaa;
  transform:scale(1.02);
}
.blogcard a{
  color: black !important;
}
.blogcard-image {
  display: inline-block;
  float: right;
  width: 160px;
  height: 90px;
  margin: 0 0 5px 5px;
}
.blogcard-image img {
  width: 160px;
  height: 90px;
  object-fit: cover;
  object-position: center center;
  box-shadow: 3px 3px 5px 0px #aaa;
}
.blogcard-title {
  margin: 0 !important;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.4;
}
.blogcard-description {
  margin: 1em 0 !important;
  font-size: 13px;
  line-height: 1.5 !important;
}
.blogcard-footer {
  font-size: 12px;
}
.blogcard-footer img {
  margin-right: 5px;
}
@media ( max-width : 768px ) {
	.blogcard-image{
		display: block;
		float:none;
		margin: .5em auto;
	}
	.blogcard-title{
		text-align:center;
	}	
}
  

参考

1. はてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズ
2. ブログカードのブックマークレットを作成しました - The other way round

これらのブックマークレットは、自作ツールで作成しました。公開しているので、もし自作したければご自由にお使いください。

ブックマークレット作成ツール (配布用HTMLコード付き)

このツールを使って、オリジナルブックマークレットを作ることができます！配布用HTMLコードを自身のWebサイトに貼り付ければ、公開もできます。

itchingears-kamokamo.blogspot.com