📘【連載】ホームページを作ろう(4)

はじめに

本記事は📘【連載】ホームページを作ろう(3)の続きの記事にあたります。
第4回のテーマは｢Webサイトをブックマークしよう｣です。

基礎知識①faviconを取得する

Webサイトにはアイコンが登録でき、これをfaviconと呼びます。faviconは下記のように取得できます。

http://www.google.com/s2/favicons?domain=ファビコンを取得したいサイトURLを入れる

例えばこれがyoutubeのfaviconです。

http://www.google.com/s2/favicons?domain=https://www.youtube.com

基礎知識②画像リンクを作る

Obsidianではマークダウンリンクを入れ子にして画像リンクを作ることができます。

[![](画像のurl)](リンク先)

画像クリックでリンク先に飛べるようにできるので、カード表示が好きな人には便利な書き方です。

今回はDataviewでfaviconを羅列してクリックしたらリンク先に飛べるようにします。

実際のコード

# 🌐Web
 
`$=dv.span(dv.current().file.frontmatter.urlList.map(url => "[![|25](http://www.google.com/s2/favicons?domain=" + url + ")](" + url + ")").join(""))`

Dataviewでurlのリストを取得してfaviconリンクに整形します。25を変えるとサイズが変更できます。
この時urlのリストを何処かから引っ張ってこないといけませんが、今回はノートのプロパティのurlListという項目から引っ張ってくるようにします。

使用例

例えばノートのプロパティに下記のように記載します。

先ほどのコードでは下記のように表示されます。

プロパティに追加したurlが任意の場所に表示できるようになりました。

つづく

Web サイトに行かないといけないこともそこそこあるので、頻用リンクは表示しておくと便利ですね。次はまた別のセクションについて解説します。

次回：📘【連載】ホームページを作ろう(5)