JavaScript - reader_bkm

個人サイト向けしおりスクリプトの配布と説明です。
ローカルストレージ保存、複数のブクマ管理が可能です。

配布ファイルの中身

content.html
mokuji.html
reader_bkm.js
style.css

利用しているもの

• JavaScript
• jQueryのCDN
• Font Awesome 6 freeのCDN
• Tailwind CSSのCDN

しおり一覧について

目次画面など、しおりを表示させたい場所に

コピー

<ul id="bookmarkList"></ul>
                        

をいれてください。サンプルではボックス要素で囲んでいますがお好きにどうぞ。
idを設定していますが、JavaScriptの設定のためです。CSSで自由にデザインしてください

小説本文ページについて

小説本文ページ（しおりをはさむ場所）には

コピー

<button id="setShiori"></button>
                            

をいれてください。idが指定されていればアンカーリンクでも可能ですが、buttonで設定するのがおすすめです。
サンプルではfont awesome6 freeのアイコンを利用していますがお好きにどうぞ。

jsファイルのカスタマイズ

スクリプト本体で文字やフェードインなどの設定をしています。気になる方はチェックしてみてください。

16行目でclassとしおりの文字を設定しています。Font awesome6のアイコンを変えたい人、classの付与をしたい人は↓の記述をいじってください。

.addClass('text- left')
.html('<i class="fas fa-bookmark"></i> ' + item.name));
                      

20行目から22行目でしおりを外すボタンを設定しています。float-rightはTailwind CSSの設定です。右寄せにしたい方は自分でCSSを設定してみてください。

しおりを外す、はアイコンを使ってないのでtextの設定です。アイコンを導入する場合にはhtmlに変えてください。

'class': 'removeShiori float-right',
'data-name': item.name
}).text('→しおりを外す')));
                      

33行目から36行目、具体的には34行目のところでタイトル要素を設定しています。今回はタイトルをh2に設定している前提です。

タイトルを囲うものにあわせて変えてください。

data = {
name: $('h2').text(),
url: location.href
};