【Bloggerいじり】リンクを貼る

とりあえず始まったブログですが、いろんな事を記事にする前に、
記事の書き方であったり、ブログ自体のカスタマイズなんかを一つずつ調べて、実践していきたいと思います。

まず最初にやっていくのが、記事内で他のWebページのリンクの貼り方です。どうもいろんなリンクの貼り方があるみたいです。
（カスタマイズのやり方等は基本的にネット情報をそのまま参考にするので、これから先、必要性がめっちゃ高いからです。）

で、リンクを貼るっといっても
こんな感じ→https://awazuku.blogspot.com/
だと野暮ったいし、
こんな感じ→タイトル未定
だと、Bloggerの標準機能だとひと手間あるし、
てなわけで調べてみましょう。
（というか、ブログタイトルとURLまだ決まってないじゃん）

ここからは実際に見つけた方法でリンクを貼ってみます。

見つけたもの、一つ目

ブログカード風の紹介リンクタグ作成
ブログカード風の紹介リンクのタグを簡単に作成できます。 

Webサービスです。
リンク先に行ったらすぐわかりますが、リンクを作りたいURLを入れたら、HTMLタグを生成してくれるサービスです。カードの色を変えたりもできるみたい。
ただ、今もサムネイルがErrorになってますが、サムネイルはすんなり全てのサイト使えるわけではないみたい？
また、サムネイルは他のサービスを使ってるそうで、そっちのサービスが終わってしまうとだめみたいです。


二つ目

【作りました】ShareHtmlを、もっと綺麗にしたメーカー【開発方法まとめ】

『ShareHtmlを、もっと綺麗にしたメーカー』という何ともやる気のない名前のサービス(?)を作りました。アイキャッチ画像付きのサイトリンク生成ツールです。ブロガーの方はぜひご利用ください。

これ使うにはCSSの編集が要りました。
実践→タイトル未定: 【Bloggerいじり】CSSの編集
CSSのコピペ元は、

ShareHTMLの新しい形！綺麗な記事リンクHTMLを作れる超便利ウェブツール | あなたのスイッチを押すブログ

ブログを書いていると、他の記事やサイトやウェブサービスの紹介を頻繁に行います。そんなとき、できることなら綺麗にリンクを作りたいところですね。 以前は「ShareHTML」というブックマークレットを活用していたのですが、なかなかクセのあるツールでした。加えて今は公開されていないということで、記事リンクを作る方法には頭を悩ませていたところ——。 そんなときに出会ったのが「ShareHtmlを、もっと綺麗にしたメーカー」というウェブサービス。個人の方が開発されたツールということですが、使い勝手が良くてとても気に入りました。 このツールを使うと、以下のようなリンクパーツが簡単に作れてしまいます。シンプルですが見やすくて良いデザインですよね。 あなたのスイッチを押すブログiPhone・iPad・Mac、Evernoteを始めとした各種ウェブサービス、そして文房具や手帳。これらを使った「生活に活かせる実用的な活用術」をご提供しております。 ShareHtmlを、もっと綺麗にしたメーカー こちらが今回の主役「ShareHtmlを、もっと綺麗にしたメーカー」です。ツールの利用は以下のリンクからどうぞ。 より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカーブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。 開発者の方のブログがこちら。開発環境やgithubのコードダウンロードも紹介されています。エンジニアの方には嬉しい記事かもしれませんね。 【作りました】ShareHtmlを、もっと綺麗にしたメーカー【開発方法まとめ】『ShareHtmlを、もっと綺麗にしたメーカー』という何ともやる気のない名前のサービス(?)を作りました。アイキャッチ画像付きのサイトリンク生成ツールです。ブロガーの方はぜひご利用ください。 使い方は至ってシンプル サイトにアクセスしたらやれることは一つなので、使い方は迷わないでしょう。 紹介したいページのURLを入力します。

ここにあるものを使わせてもらいました。ツール自体の使い方も書いてあります。
で、問題を発見しました。上のリンクを見てもらえればわかりますが、リンク先の本文をほとんど表示しちゃってます。
ツールの挙動がリンクするサイトのディスクリプション（概要？）を取得してるみたいです。
リンク先にはdescriptionって箇所が12個あって、twitter用の？ディスクリプションを拾ってる？のか、サイトによって取得してくる箇所が違うみたいです？（ディスクリプションとか挙動がよくわかってない）

打開策としてHTMLに貼り付けるときに自分で長さ調整すれば簡単なんですが、ひと手間増えるのがなんともいえません。

ちなみに、元となったであろうShareHtmlは今現在使用できないみたいです。



三つ目

Blogger:過去の記事をタイトル・サムネイル付きで紹介したい！:プロトタイプ(Ver0.1)公開 - Blogger過去記事紹介リンク作成シリーズ
Dr.ウーパのコンピュータ備忘録

上2つと使い方は一緒です。気になる点は、自分のサイトの～が強調されてて、他サイトのリンクを貼るためには使わないほうがいい？


四つ目、二つ目を調べてたら発見しました。
GetTabInfo - Chrome ウェブストア

Chromeの拡張機能です。CSSのスタイルやサムネイルありだとかそのへんも自分で編集できるみたいです。
こいつの特徴はそのウィンドウで開いているタブのリンクを全て作れるところです。ですので、参考にしたサイトが複数ある時は一気に作れて便利です。逆に一つのサイトだけ作りたい時は新しいウィンドウを開くなりして、タブを一つにしないといけないようです。

書くの面倒くさいので詳しいカスタマイズの方法なんかは、「GetTabInfo」でググりましょう。


五つ目、というか全て同じとこから拾ったのをまとめて三つ

ワンクリックで綺麗なブログカードリンクを作成する方法（ChromeのCreate Link拡張使用）

xxxxxxxxxx

「どんなブラウザからでもブログ用のリンクタグを一発作成できるブックマークレット」をいろいろ作ってみた
並べてみるとこんな感じに。
プレビューで見てみると、たしかに一番下のはてなの機能を使ったやつが見た目が一番綺麗な感じがします。
ただし、はてなのサービスを使っているので、リンク先にもある注意点をしっかり確認したほうが良さそうです。


まとめ

いろいろ方法はありましたが、一番良さげなのが五つ目の方法です。
これCreate Link - Chrome ウェブストア
（Create Linkの初期設定のHTMLで作成したリンク）
と
これMy Utility－Make Link ジェネレータ
（Make Link ジェネレータの初期設定のHTML LINKで作成したリンク）
は設定を頑張れば、自分の好きなようにできそうでし。（頑張るとは言ってない）
五つ目の三つ目の方法は（ややこしい）、はてなの動向がよくわからないので、使わないでおこうと思います。


追記
一つ目と五つ目でサムネイルが出ないのは、どっちもこのサービスHeartRails Capture | サムネイル画像／PDF ファイル作成サービス

を使ってるみたいで、このサービスが対応できないページとかがあるみたい。（予想）


以上