メインコンテンツへスキップ
見出し画像

【note専用】埋め込みリンクがデカすぎる問題を解決!Chrome拡張「Mini-Link」を作りました

こんにちは、ひゅーです。


わたしは、業務改善が本業のサラリーマン。noteでは、「挑戦と思考整理を楽しむ。」をテーマに、AIやIT・分析といったすこし難しそうなことを、わかりやすく深掘りしながら、ゆるーくお伝えしていきます。

今回、ご紹介する商品はこちらです! どん!
↓

画像

ただの記事リンクですね。はい。でもちょっとよく見てください。高さが小さいですね。普通の埋め込みリンクはこちら▼です。

このリンクがでっかいなあ、っていつも思ってたんですよ。とはいえ文字のリンクだと淋しいです。埋め込みリンクを数入れるとどうしても視覚的に飛んでしまうので、もうちょっと高さの低いのが欲しかった。画像つくれば良いのですが、毎回作るの面倒ですし。

ということで、小さいリンクを簡単に作れる「chrome拡張」を作りました。
名付けて「Mini-Link」(みにりんく)です。


✨Mini-Linkでできること


Chromeの拡張機能を入れると、記事リンクを高さの小さい画像でつくれます。操作は簡単です。noteの仕様でできる最大限の「楽」ができるようにしています。

① Chrome拡張を押して開きます。

画像
Chrome拡張の機能画面

② リンクを作りたいURLを貼ってボタンを押します。

画像
URLを貼ってボタンを押すとクリップボードにコピーされる

③ リンクを貼りたい場所にCtrl+V(MacはCmd+V)で貼りつける。

画像

④ 画像をクリックして、「リンク」を押します。

画像
画像を貼った後はリンクを開く

⑤ リンクの部分でもう一度、Ctrl+V(MacはCmd+V)で貼りつける。

画像
リンクを貼り付けて「適用」を押す

⑥ 完成!

画像
完成リンクです

🔔並べるとこうなる


どうですか?だいぶスッキリすると思いませんか?

大体PCだと、普通のリンクの高さの40%くらい。スマホだと、普通のリンクの高さの20%くらいになります。下のリンクをスマホとPCでぜひ見比べてみてください。

画像
画像
画像

比較で普通の埋め込みリンクを置いておきます。

📍仕様の説明


noteの編集画面では、リンク付きの画像をそのまま受け付けてくれません。リンク付き画像を作ることができるけど、note側で一度画像に再変換してしまうので、リンクが飛んでしまう。

なので今回の仕様では、クリップボードに、画像とリンクテキストを「2つ同時にコピー」します。最初の貼り付けアクションでは画像を貼れて、次の貼り付けアクションで、リンクのテキストが貼り付けられるという構造です。

noteの仕様上、画像貼り付け→リンク貼り付け、はどうしても必要になりますが、2つ情報一緒に持っているので、連続操作できて楽だと思います。

🎉購入後はこちらから


ここからは商品ページになります。ご購入いただくと、ZIPファイルが記事内についていますのでダウンロードできます。

こちらは、Chromeの拡張機能になります。Edge・Brave・Opera・Vivaldi等のChromiumベースブラウザで動作します。Edgeでの動作確認をしています。スマホアプリ・モバイルブラウザには対応していません。

あなたへのおすすめ