階層型リストツール v9.0
ドラッグ: 上下＝並び替え / 右奥＝子にする
注: メモ欄を開閉
注: メモ欄を開閉
インポート
JSONエクスポート (保存用)
HTMLエクスポート (ブログ貼付用)
使い方
直感的な操作で、補足情報（注釈・画像・リンク）付きの階層リストを作成し、はてなブログ等に貼り付けられるHTMLコードを出力するツールです。
1. リストの作成と編集
-
項目の追加: 「＋新しい親ノードを追加」ボタン、または各項目の「＋子」ボタンで追加します。
-
テキスト編集: テキスト部分をダブルクリックすると編集できます。書き終わったらエンターキーか、他の場所をクリックして確定します。
-
色の変更: パレットアイコンから項目の背景色を変更できます。
2. 注釈（メモ・画像・リンク）の追加
各項目の「注」ボタンを押すと、詳細エリアが開きます。
-
文章: 補足説明を入力できます。HTMLタグも有効です。
-
リンク: 「🔗 リンク挿入」で、URLと表示テキストを入力するとリンクを作成できます。
-
画像: ファイル選択またはURL指定で画像を添付できます。スライダーで表示サイズを調整可能です。
3. 並び替え（ドラッグ＆ドロップ）
項目の左端をつかんでドラッグ＆ドロップすることで、直感的に整理できます。
-
上下: 順番を入れ替えます。
-
右へ: 一つ上の項目の「子（下層）」にします。
4. ブログへの貼り付け（HTMLエクスポート）
-
「HTMLエクスポート」ボタンを押します。
-
表示されたコードを「コピー」します。
-
はてなブログ等の編集画面（HTML編集モード）に貼り付けます。
-
記事上では、項目をクリックすると注釈がスライドして表示されます。
-
注釈は階層が深くても、読みやすいように画面幅いっぱいに表示されます。
-
5. データの保存と復元
-
保存: 「JSONエクスポート」ボタンを押し、表示されたテキストをメモ帳などに保存してください。
-
復元: 保存したテキストを「インポート」欄に貼り付け、「インポート」ボタンを押すと復元されます。
ショートカットキー
-
Enterキー: テキスト編集モード中、同じ階層に新しい項目を追加します。
