# プロフィールとリンク集

サイドバーの先頭に、プロフィールアイコンとリンク集を表示します。
プロフィールの外枠と背景は付けません。アイコンを中央に置き、下に横長のボタンを並べます。
アイコンには既定でテーマ色のフチを付けます。不要ならオフにできます。
アイコンの下には名前を表示します。名前はLOG設定の「LOGのデザイン・アイコン」の「名前」を使い、表示はオフにもできます。
アイコンとボタンの間には、サイトの紹介文とは別のメッセージを表示できます。
初期のリンク先は、X・Instagram・Bluesky・GitHub・YouTubeのトップページです。

## 編集する場所

「設定 → LOG」の「サイドバー・メニュー」で編集します。
「プロフィールとリンクを編集」を開き、たとえばXのURLを自分のプロフィールURLに書き換えます。
メールは、「URL・メール」欄に`you@example.com`のようにアドレスだけを書き、アイコンに「メール」を選びます。`mailto:you@example.com`の形でも入力できます。件名などの追加情報（`?subject=`）や複数の宛先は使えません。
訪問者がメールのボタンを押すと、アドレスを表示したダイアログが開き、「アドレスをコピー」か「メールアプリで送信」（いつも使っている既定のメールアプリ）を選べます。ダイアログは`server/viewer/log-mail.js`が出します。JavaScriptが動かない環境では、そのまま既定のメールアプリを開きます。
同じ場所で「アイコンにフチを付ける」「アイコンの下に名前を表示する」と、リンクの上に出すメッセージ（300文字まで・改行可・HTML不可）を設定できます。
任意のリンクの追加・削除・上下移動、表示名とアイコンの変更ができます。

保存先は`data/log/sidebar.php`です。`links`項目に、`icon_frame`（フチ）、`show_name`（名前の表示）、`message`（メッセージ）、各リンクの表示名・URL・アイコン名を保存します。
これらの値がない古い設定は、フチあり・名前あり・メッセージなしとして読み込みます。
プロフィール画像はLOG設定のアイコンを使います。画像がなければ名前の先頭の文字を表示します。
ブロックごとの並び替え・非表示と、バックアップ・復元にも対応します。

## オリジナルSVG

SVGは用途を表す線画として、このテンプレートのために作成しました。
ブランドの画像や第三者のアイコン集は使っていません。公式ロゴの参照・トレース・描き直しもしていません。
たとえばInstagram向けには、カメラではなく、重ねた写真と風景を描いています。

| 推奨リンク先 | SVG | 描いたもの |
| --- | --- | --- |
| X | `conversation.svg` | 短文の吹き出しとタイムライン |
| Instagram | `pictures.svg` | 重ねた写真と風景 |
| Bluesky | `sky-network.svg` | 雲と通信先のつながり |
| GitHub | `code-branch.svg` | コードの括弧と分岐 |
| YouTube | `film.svg` | フィルムの穴とコマ |
| メール | `mail.svg` | 折り目の付いた封筒 |
| 任意のサイト | `link.svg` | つながる鎖 |

保存先は`server/viewer/link-icons/`です。MITライセンスの全文を`LICENSE.txt`に同梱しています。
すべて24×24のviewBox、線幅1.75、丸い線端・接合、塗りなし、共通の余白でそろえています。
サイトではSVGを24pxで表示し、`currentColor`でライト・ダークの色に合わせます。

## 既存サイトと確認結果

古いサイドバー設定やリンク集のない旧ZIPには、読み込み時にリンク集を先頭へ補います。
ほかの項目の順番は保ち、読み込むだけでは設定ファイルや更新番号を書き換えません。
リンク集を非表示にして保存した場合は、その設定を維持します。

URLと表示名を確認して保存し、公開時には文字をHTML用に整えます。
SVGを読み込むのは同梱した7点だけです。自由なHTMLからSVGを追加することはできません。
リンク集から参照するLOG画像も、表示時の公開判定と削除保護に含めます。

2026年10月4日に、サイドバーの108項目とLOG全体の153項目の動作確認を通過しました。
ブラウザではPC幅と390×844のスマホ幅で、配置・URL編集・追加・並び替え・保存・再読み込みを確認しました。
ダークネイビーでもSVGが配色に追従し、スマホの横はみ出しがないことを確認しています。