ghost-progress-plugin プレビュー

スクロールすると上部のバーが0%から100%へ満ちます。左パネルでオプションを変えると、埋め込みコードも一緒に更新されます。

はじめに

ghost-progress-plugin は Ghost 用の軽量で依存関係のない読書プログレスバーです。Ghost 向けとして始まりましたが、Notion ベースのブログでも動作し、スクリプトを追加できる場所ならどこでも動きます。読むにつれて細いバーが満ち、記事のどこまで読んだかを示します。このページがそのまま実例で、上部のバーが実際に動くウィジェットです。

インストール

ビルド工程もテーマ編集も不要。下のスニペットを一度貼り付けるだけです：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
        data-content=".gh-content"
        data-position="top"></script>

コードインジェクション

Ghost では Settings → Code injection → Site Footer に貼り付けます。Notion ベースのホスティングなら、カスタムコード欄に追加します。oopy はサイト設定の head/footer コード欄、super.so は Custom Code 領域があり、そこで data-content を .notion-page-content にします。その他のサイトでは閉じタグ </body> の直前に置きます。

オプション設定

動作はすべてスクリプトタグの data-* 属性で設定します：本文セレクタ、位置、太さ、z-index を指定できます：

data-content=".gh-content"
data-position="top"
data-height="4"
data-z-index="100"

カスタマイズ

バーの色と太さは自由に調整できます。すべてのクラスと CSS 変数は greedylabs-ghost-progress で名前空間化されており、テーマと衝突しません。

配色

満ちる色は、既定で Ghost テーマのアクセント色（--ghost-accent-color）に従います。変更するには data-color を指定するか、CSS 変数を上書きします。未読部分のトラックは既定で透明なので、0%でもバーを見せたい場合はトラックに色を付けます：

.greedylabs-ghost-progress {
  --greedylabs-ghost-progress-track: rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  .greedylabs-ghost-progress {
    --greedylabs-ghost-progress-track: rgba(255,255,255,.14);
  }
}

位置

data-position で上下、data-height で太さ(px)を指定します。バーは記事の上端がビューポート上端に来ると0%、下端がビューポート下端に来ると100%になります。

よくある質問

ページ全体ですか、それとも記事だけですか？

data-content で指定した記事だけです。ヘッダー、フィーチャー画像、フッターは進捗に含まれません。

上部でバーが見えません。

0%では満ちる幅が0で、トラックが既定で透明だからです。トラックに色を付けると（配色セクション参照）、空でもバーが見えます。

Ghost 以外でも使えますか？

使えます。スクリプトを追加できる場所なら、data-content で本文コンテナを指定するだけです。Notion では .notion-page-content です。

おわりに

ghost-progress-plugin は MIT ライセンスのオープンソースで、コードと Issue は GitHub にあります。左パネルでオプションを変え、気に入ったら埋め込みコードをコピーしてください。お役に立てたら、コーヒーを一杯いただけると嬉しいです ☕。