【コピペOK】スクロールインジケーター付き「トップへ戻るボタン」をWordPressに実装する方法！〈プラグイン配布有り〉

はじめに

この記事では、WordPressに表示できる「トップへ戻るボタン」の実装方法をご紹介します。実装できるのは通常の戻るボタンではなく、スクロールの進捗を視覚的に表示するシンプルなインジケーター付きです。

長いコンテンツを持つブログやウェブサイトでは、読者がページの最後まで読み進めた後、簡単にページの先頭へ戻れる方法を備えるのが基本です。特にスマホでの閲覧が増えているので、親指だけで簡単に操作できる「トップへ戻るボタン」は、非常に重要だと言えます。iPhoneなどにはステータスバーをタップするとトップページまでスクロールしてくれる機能がありますが、片手操作では少々手間に感じますよね。

今回紹介するのは、ページのスクロール位置に応じて円形のゲージが徐々に描かれていく、シンプルな機能を持ったトップへ戻るボタンです。見た目もシンプルで、訪問者に「今どのくらい読み進めたか」という視覚的なフィードバックも提供できるようになっています。

プラグインでの実装をお考えの方へ

「コードを触るのはちょっと…」という方や、より簡単に実装したい方のために、プラグインによる導入方法も紹介させてください！

当サイトでは、これから紹介するものと同様のボタンを簡単に設置できる「トップへ戻るボタン」プラグインを配布しており、管理画面から直感的に設定するだけで機能を実装できます。プラグインでは、ボタンの位置や色、インジケーターの表示/非表示なども簡単にカスタマイズできるので、コードに触れたくない方は以下のダウンロードページをチェックしてみてください！

トップへ戻るボタン -スクロールインジケーター付き- dodon

サイトに円形の「トップへ戻る」ボタンを追加するプラグインです。このボタンはトップに戻るだけでなく、スクロール位置に応じて外周に沿って進捗ゲージが表示される機能も備わっています。長いページでもユーザーがページの位置を直感的に把握できるため、ユーザーエクスペリエンスを大幅に向上させることができます。

dodon

dodon.me

コードで自分好みにカスタマイズしたいという方、あるいはプラグインを増やしたくないという方のために、手動での実装方法を詳しくご紹介していきます。

コードでトップへ戻るボタンを実装するメリット

プラグインを使わずに自分でコードを書いて実装することには、いくつかのメリットがあります。

サイト速度への影響が少ない – 余計な機能がないシンプルな実装なので、プラグインと比べるとサイトの読み込み速度への影響を最小限に抑えられます。
自由にカスタマイズできる – ある程度、技術的な知識がある方は見た目や動作を細部まで自分好みに調整できるように紹介します。

同じようにカスタマイズできるように、記事内で解説していますので、一度流し読みしてみてください！

コードで実装する前に知っておくべきこと

コードを使った実装に入る前に、必要な知識についてざっとお伝えしておきます。ですが、すべて理解している必要はありませんのでご心配なさらず。コードはコピー＆ペーストで動作するようにしてあります。

HTML/CSS – ボタンの構造とスタイリングのための基本
JavaScript/jQuery – ボタンの動作とスクロールインジケーターの制御に使用
WordPress基礎知識 – テーマファイルの編集方法など

技術的な話が苦手な方でも簡単に実装できるよう、コピペだけで実装できるよう、解説していきます。

トップへ戻るボタンの実装手順

それでは、スクロールインジケーター付きの「トップへ戻るボタン」を実装していきましょう。基本的なステップは以下の通りです。

HTMLコードの追加（ボタンの構造）
CSSコードの追加（ボタンのスタイル）
JavaScriptコードの追加（ボタンの動作）
動作確認とカスタマイズ

一つずつ見ていきましょう！

1：HTMLコードの追加

まず、ボタンの基本構造となるHTMLコードをサイトに追加します。このコードは通常、テーマのfooter.phpファイルの</body>タグの直前に配置するのがベストです。

WordPressの管理画面から「外観」→「テーマエディター」を開き、「フッター (footer.php)」を選択します。もしくは、FTPやファイルマネージャーを使って直接テーマファイルを編集する方法もあります。

以下のコードを</body>タグの直前に追加してください

<div class="scroll-to-top-container position-right gauge-enabled">
    <div class="scroll-to-top-button">
        <span class="scroll-to-top-arrow"></span>
        <svg class="progress-circle" width="100%" height="100%" viewBox="0 0 100 100">
            <circle class="circle-bg" cx="50" cy="50" r="45" />
            <circle class="circle-path" cx="50" cy="50" r="45" />
        </svg>
    </div>
</div>

このHTMLでどんな構造を作っているのか、簡単に説明します。

scroll-to-top-container: ボタン全体を包む外側のコンテナです。位置やアニメーションを制御します。
scroll-to-top-button: 実際にクリック可能なボタン要素です。
scroll-to-top-arrow: 上向きの矢印を表示する要素です。
progress-circle: スクロール進捗を表示するSVG要素で、2つの円で構成されています。
circle-bg: 背景となる完全な円（薄いグレー）
circle-path: 進捗を示す円の経路（色付き）

SVGを使用することで、滑らかな円形のゲージを実現しています。JavaScriptで後ほどこの円のパスを操作し、スクロール進捗を視覚化します。

2：CSSスタイルの追加

次に、ボタンの見た目を整えるCSSコードを追加します。このコードは、テーマのstyle.cssファイルの最後に追加するか、「外観」→「カスタマイズ」→「追加CSS」セクションに追加するのが一般的です。

テーマをアップデートしても上書きされる心配がないので、基本的には追加CSSを使用するのがおすすめです。

以下のCSSコードをコピーして追加してください。

/* スクロールトップボタン - 基本スタイル */
.scroll-to-top-container {
    position: fixed;
    bottom: 30px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.scroll-to-top-container.visible {
    opacity: 1;
    visibility: visible;
}

/* ボタン位置の設定 */
.position-left {
    left: 30px;
}

.position-center {
    left: 50%;
    transform: translateX(-50%);
}

.position-right {
    right: 30px;
}

/* ボタン本体のスタイル */
.scroll-to-top-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    background-color: #3498db; /* ボタンの色 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 矢印のスタイル */
.scroll-to-top-arrow {
    width: 12px;
    height: 12px;
    border-style: solid;
    border-width: 3px 3px 0 0;
    border-color: #ffffff; /* 矢印の色 */
    transform: rotate(-45deg);
    margin-top: 5px;
}

/* プログレスサークルのスタイル */
.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.1);
    stroke-width: 5;
}

.circle-path {
    fill: none;
    stroke: #2ecc71; /* ゲージの色 */
    stroke-width: 5;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.1s ease;
}

.gauge-disabled .progress-circle {
    display: none;
}

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
    .scroll-to-top-container {
        bottom: 20px;
    }
    
    .position-left {
        left: 20px;
    }
    
    .position-right {
        right: 20px;
    }
    
    .scroll-to-top-button {
        width: 40px;
        height: 40px;
    }
    
    .scroll-to-top-arrow {
        width: 10px;
        height: 10px;
        border-width: 2px 2px 0 0;
    }
}

このCSSコードを詳しく説明すると、

基本ポジショニング: position: fixedでボタンを画面に固定し、画面をスクロールしても常に表示されるようにしています。
表示/非表示制御: 初期状態では非表示（opacity: 0; visibility: hidden）で、JavaScriptによって.visibleクラスが追加されると表示されるようになっています。
位置バリエーション: position-left、position-center、position-rightの3つのクラスで、ボタンの水平位置を簡単に変更できます。
ボタンデザイン: 丸いボタンを作成し、影をつけてリッチな見た目に。
矢印デザイン: CSSのボーダーを使って矢印を表現しています。シンプルですが効果的です。
インジケーターデザイン: SVGを使った円形ゲージの表示方法を定義しています。stroke-dasharrayとstroke-dashoffsetプロパティで円の描画をコントロールします。
レスポンシブ対応: 画面幅が767px以下になると、ボタンサイズや配置位置を調整して、モバイル画面でも使いやすくします。

CSSで色や大きさなどを自由に調整できるので、後ほどカスタマイズ方法も詳しく説明しますね。

STEP 3: JavaScriptコードの追加

最後に、ボタンに命を吹き込むJavaScriptコードを追加します。このコードは、スクロール位置に応じたボタンの表示/非表示の切り替えやスクロールインジケーターの更新、クリック時の動作などを制御します。

このJavaScriptコードは、テーマのフッターに直接埋め込むか、外部JavaScriptファイルとして追加するかのいずれかの方法で実装できます。ここでは簡単のため、footer.phpファイルの</body>タグの直前（先ほど追加したHTMLの後）に追加する方法を説明します。

<script>
(function($) {
    'use strict';
    
    // 変数定義
    var $window = $(window);
    var $document = $(document);
    var $backToTopContainer = $('.scroll-to-top-container');
    var $backToTopButton = $('.scroll-to-top-button');
    var $circlePath = $('.circle-path');
    var circlePathLength = $circlePath.length ? $circlePath[0].getTotalLength() : 283;
    var scrollThreshold = 300; // ボタンを表示するスクロール量のしきい値
    var isVisible = false;
    
    // 初期化関数
    function init() {
        if ($circlePath.length) {
            $circlePath.css({
                'stroke-dasharray': circlePathLength,
                'stroke-dashoffset': circlePathLength
            });
        }
        
        // イベントリスナーの設定
        $window.on('scroll', handleScroll);
        $backToTopButton.on('click', scrollToTop);
    }
    
    // スクロールイベント処理
    function handleScroll() {
        var scrollTop = $window.scrollTop();
        var documentHeight = $document.height();
        var windowHeight = $window.height();
        var scrollPercentage = scrollTop / (documentHeight - windowHeight);
        
        // 進捗インジケーターの更新
        updateProgress(scrollPercentage);
        
        // ボタンの表示/非表示
        if (scrollTop > scrollThreshold && !isVisible) {
            $backToTopContainer.addClass('visible');
            isVisible = true;
        } else if (scrollTop <= scrollThreshold && isVisible) {
            $backToTopContainer.removeClass('visible');
            isVisible = false;
        }
    }
    
    // 進捗インジケーターの更新
    function updateProgress(percentage) {
        if ($circlePath.length && $backToTopContainer.hasClass('gauge-enabled')) {
            var dashOffset = circlePathLength - (circlePathLength * percentage);
            $circlePath.css('stroke-dashoffset', dashOffset);
        }
    }
    
    // トップへスクロール
    function scrollToTop() {
        $('html, body').animate({
            scrollTop: 0
        }, 800); // スクロール速度（ミリ秒）
        return false;
    }
    
    // DOM準備完了時に初期化
    $(document).ready(init);
    
})(jQuery);
</script>

このJavaScriptコードについて説明します:

変数の初期化: スクロール関連の変数やDOM要素への参照を設定しています。
初期化関数 (init): ページ読み込み時に実行され、円形パスの初期設定とイベントリスナーの登録を行います。
スクロールイベント処理 (handleScroll): ユーザーがスクロールするたびに呼び出され、スクロール位置に基づいてボタンの表示/非表示とインジケーターの更新を行います。
進捗インジケーター更新 (updateProgress): スクロール進捗率（0〜1の値）に基づいて円形ゲージを更新します。
トップへスクロール (scrollToTop): ボタンクリック時に画面をスムーズに先頭へスクロールします。

スクロールインジケーターの仕組みは、SVGのstroke-dashoffsetプロパティを操作することで実現しています。最初は円全体が非表示（stroke-dashoffset: 283）で、スクロールするにつれてこの値が減少し、円が徐々に表示されていくという仕掛けです。

このJavaScriptコードはjQueryに依存していますが、WordPressには標準でjQueryが含まれているので、通常は問題なく動作します。

4：jQuery依存関係の確認

念のため、jQueryが確実に読み込まれるように、以下のコードをテーマのfunctions.phpファイルに追加すると安心です。「外観」→「テーマエディター」からfunctions.phpを選択して、ファイルの最後に以下のコードを追加してください:

// トップへ戻るボタン用にjQueryを確実に読み込む
function enqueue_jquery_for_scroll_top() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'enqueue_jquery_for_scroll_top');

これで、WordPressが提供する標準のjQueryが確実に読み込まれるようになります。ほとんどのテーマではjQueryを読み込んでいますが、念のための保険です。

以上で基本的な実装は完了です！サイトをリロードして確認してみましょう。少しスクロールすると、画面の右下に円形のボタンが表示され、さらにスクロールするとボタンの周囲にゲージが徐々に描かれていくはずです。ボタンをクリックすると、ページの先頭へスムーズにスクロールします。

うまく動作しない場合は、記事最下部の「トラブルシューティング」を確認してください。

カスタマイズオプション

基本的な実装ができたら、次はサイトに合わせてカスタマイズしていきましょう！

色のカスタマイズ

まずは色の変更から。ボタンやインジケーターの色はCSSを少し修正するだけで簡単に変更できます。

ボタンの色を変更

.scroll-to-top-button {
    background-color: #ff6b6b; /* 赤みがかったピンク */
}

矢印の色を変更

.scroll-to-top-arrow {
    border-color: #ffffff; /* 白色の矢印 */
}

インジケーターの色を変更

.circle-path {
    stroke: #feca57; /* 黄色っぽいゲージ */
}

自分のサイトのカラースキームに合わせて調整してみてください。色選びで悩んだら、サイトのアクセントカラーをボタンに、そしてその補色をゲージに使うと調和が取れやすいかと思います。

位置のカスタマイズ

ボタンの表示位置は、HTMLのクラスを変更するだけで簡単に調整できます。scroll-to-top-containerの位置クラスを以下のいずれかに変更してください。

左下に表示

<div class="scroll-to-top-container position-left gauge-enabled">

中央下に表示

<div class="scroll-to-top-container position-center gauge-enabled">

右下に表示

<div class="scroll-to-top-container position-right gauge-enabled">

それぞれの位置の特徴。

左下: スマホの左利きユーザーに優しいですが、サイトで左端にナビゲーションがある場合、干渉する可能性があります。
中央下: 目立ちやすいですが、他のコンテンツの邪魔になるようであればお勧めはできません。
右下: 最も一般的で、ユーザーが最も理解しやすい位置です。多くのサイトがこの位置にトップへ戻るボタンを配置しています。

さらに、画面端からの距離も調整できます。例えば、ボタンをより下に配置したい場合、

.scroll-to-top-container {
    bottom: 50px; /* デフォルトは30px */
}

左右の余白も同様に調整できます！

.position-left {
    left: 50px; /* デフォルトは30px */
}

.position-right {
    right: 50px; /* デフォルトは30px */
}

余白は広すぎるとコンテンツの邪魔をしてしまい浮いた感じになり、狭すぎると窮屈な印象になり押しにくいという欠点もあるので、20〜50pxの範囲で調整するのがおすすめです！

サイズのカスタマイズ

ボタンのサイズも簡単に変更できます。デフォルトでは直径50pxですが、サイトのデザインに合わせて調整することができます。

.scroll-to-top-button {
    width: 60px; /* より大きなボタン */
    height: 60px;
}

ボタンサイズを変更した場合は、矢印のサイズも調整するとバランスが良くなります。

.scroll-to-top-arrow {
    width: 15px; /* より大きな矢印 */
    height: 15px;
}

レスポンシブ対応部分も忘れずに更新してください。

@media screen and (max-width: 767px) {
    .scroll-to-top-button {
        width: 45px; /* モバイル用に調整したサイズ */
        height: 45px;
    }
}

スクロールインジケーターの有効/無効

シンプルにしたい場合は、スクロールインジケーター（円形ゲージ）を無効にすることもできます。HTMLコードのgauge-enabledクラスをgauge-disabledに変更するだけです！

<div class="scroll-to-top-container position-right gauge-disabled">

個人的には、スクロールインジケーターはユーザーに視覚的なフィードバックを提供する点で価値があると思いますが、サイトのデザインによっては、よりシンプルなボタンが調和する場合もあります。

スクロール速度の調整

ボタンをクリックした時のスクロール速度も調整できます。JavaScriptコードのscrollToTop関数を修正します。

function scrollToTop() {
    $('html, body').animate({
        scrollTop: 0
    }, 1200); // より遅いスクロール（数値が大きいほど遅く）
    return false;
}

この数値はミリ秒単位で、以下のように効果が変わります:

400: 素早くスクロール。短いページに適しています。
800: デフォルト値。バランスの取れた速度です。
1200: よりゆったりとしたスクロール。長いページで没入感を高めたい場合に。

個人的には800〜1000ミリ秒当たりが好みです。ページの長さに合わせて調整してください。

ボタン表示しきい値の変更

ボタンが表示され始めるスクロール量も調整できます。デフォルトでは300pxスクロールした時点でボタンが表示されますが、この値は以下のように変更できます。

var scrollThreshold = 500; // より長くスクロールした後に表示

短いページでは小さい値（200〜300px）、長いページでは大きい値（500〜700px）が適しているかもしれません。ユーザーがある程度スクロールした後にボタンが表示されるとより自然です。

応用カスタマイズ

ここからは、少し高度なカスタマイズ例を紹介します。CSSの知識がある方は、これらのカスタマイズを試してみてください。

ホバーエフェクトの追加

マウスをボタンに乗せた時の効果を追加すると、より洗練された印象になります。

.scroll-to-top-button {
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.scroll-to-top-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background-color: #2980b9; /* ホバー時の色 */
}

このコードをCSSに追加すると、マウスを乗せた時にボタンが少し大きくなり、影が強調され、色が少し濃くなります。

細かい演出で、サイトの質や印象を高めたい方におすすめです。ただ、モバイルでは効果がないので、PCユーザーのためのおまけ程度と考えましょう。

表示/非表示アニメーションの調整

ボタンの表示/非表示時のアニメーション速度も調整できます。

.scroll-to-top-container {
    transition: opacity 0.5s, visibility 0.5s; /* より遅いフェード効果 */
}

値を大きくするとゆったりとしたフェード効果になり、小さくすると素早く表示/非表示が切り替わります。個人的には0.3〜0.5秒くらいがちょうど良いと思います。

モバイル向けの追加調整

モバイルデバイスでの表示は、さらに細かく調整できます:

@media screen and (max-width: 767px) {
    .scroll-to-top-container {
        bottom: 15px; /* 画面下部からのマージンを小さく */
    }
    
    .position-left {
        left: 15px;
    }
    
    .position-right {
        right: 15px;
    }
    
    /* モバイルでタップしやすいように少し大きくする */
    .scroll-to-top-button {
        width: 45px;
        height: 45px;
    }
}

/* 小さいスマホ向けにさらに調整 */
@media screen and (max-width: 375px) {
    .scroll-to-top-button {
        width: 40px;
        height: 40px;
    }
}

モバイルでの使いやすさは非常に重要です。特に最近は、モバイル訪問者の割合が50%を超えるサイトが増えていますので、スマホでの見た目と操作性にも十分注意を払いましょう。

画面の邪魔にならないよう、モバイル表示ではボタンのサイズを少し小さくし、画面端からの距離も若干短くしています。

透明度の調整

ボタンの透明度を調整して、よりさりげない表示にすることもできます:

.scroll-to-top-button {
    opacity: 0.8; /* 少し透明に */
}

.scroll-to-top-button:hover {
    opacity: 1; /* ホバー時は完全に不透明に */
}

透明度を設定すると、背景コンテンツへの干渉が少なくなりますが、あまり透明にしすぎるとボタンが見つけにくくなってしまうので注意が必要です。0.7〜0.9の範囲がおススメ！

トラブルシューティング

実装時によくある問題とその解決方法を紹介します。

ボタンが表示されない

ボタンが全く表示されない場合は、以下を確認してください。

jQueryの読み込み: コンソールでjQueryまたは$が定義されているか確認します。定義されていない場合は、前述のfunctions.phpへのコード追加を試してください。
HTMLの配置: HTMLコードがfooter.phpに正しく配置されているか確認します。閉じタグの順序に注意しましょう。
CSSの適用: CSSが正しく適用されているか確認します。テーマのカスタマイザーで「追加CSS」に追加した場合、保存されているか確認してください。
JavaScriptエラー: ブラウザの開発者ツール（F12キー）でコンソールを開き、JavaScriptエラーがないか確認します。エラーがある場合は、そのメッセージに基づいて修正してください。

インジケーターが機能しない

スクロールインジケーター（円形ゲージ）が動作しない場合。

クラスの確認: HTMLコードでgauge-enabledクラスが正しく設定されているか確認。
SVG要素の確認: SVGのパス要素が正しく設定されているか確認。
JavaScriptの動作確認: コンソールにconsole.log(circlePathLength);を追加して、正しい値（通常は283前後）が出力されるか確認。
CSS値の確認: stroke-dasharrayとstroke-dashoffsetの値が同じであることを確認。

SVGのサイズを変更したときにcirclePathLengthの値を更新しないと上手く動作しません。SVGを変更した場合は、JavaScriptのcirclePathLengthの値も確認しましょう。

jQueryに関する問題

「$ is not defined」というエラーが表示される場合は、jQueryが読み込まれていないか、または読み込まれる前にスクリプトが実行されています。以下の解決策を試してください。

<script>
// jQuery が読み込まれていない場合は、CDNから読み込む
if (typeof jQuery === 'undefined') {
    document.write('<script src="https://code.jquery.com/jquery-3.6.4.min.js"><\/script>');
}

// jQuery が読み込まれた後にコードを実行
jQuery(document).ready(function($) {
    // ここに元のスクリプトコードを配置
});
</script>

あるいは、JavaScriptコードをwp_footerフックで追加する方法もあります。この場合、functions.phpに以下のコードを追加します。

function add_scroll_to_top_script() {
    ?>
    <script>
    (function($) {
        // ここに元のスクリプトコードを配置
    })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'add_scroll_to_top_script', 99);

これで、jQueryが確実に読み込まれた後にスクリプトが実行されます。

モバイルでの問題

モバイルデバイスで問題が発生する場合。

タップ応答: ボタンをタップしても反応がない場合は、サイズを大きくしてタップしやすくします。
位置の干渉: サイトの固定フッターやクッキー通知などと干渉する場合は、bottomの値を大きくしてボタンの位置を調整します。
スクロールの動作: スムーズスクロールがぎこちない場合は、モバイル向けにスクロール速度を調整します。

モバイルでのテストは実機で行うのがベストです。スマホの機種によって動作が異なる場合があるので、可能であれば複数の端末でテストしてみてください。

まとめ

この記事では、WordPressサイトにプラグインなしでスクロールインジケーター付きの「トップへ戻るボタン」を実装する方法を解説しました。

シンプルなHTMLとCSS、少しのJavaScriptで、ボタンを実装できることがお分かりいただけたと思います。また、色や位置、サイズなど、様々な要素を自由にカスタマイズして、サイトのデザインに合わせた「トップへ戻るボタン」を作ることができます。

ぜひ、サイトに実装して、オリジナルのトップへ戻るボタンを作ってみてください。

最後に、コードを書くのが苦手な方や、簡単なカスタマイズだけで十分な方は、冒頭で紹介したプラグインで実装してみてください。今後も定期的にアップデート予定です。

トップへ戻るボタン -スクロールインジケーター付き- dodon

dodon

dodon.me

【コピペOK】スクロールインジケーター付き「トップへ戻るボタン」をWordPressに実装する方法！〈プラグイン配布有り〉

目次

人気ツール

同時視聴ツール-YouTube&Twitch対応

CSS整形ツール -並び順一括変更-

WEBブラウザメモツール

CSSグラデーションジェネレーター

トップへ戻るボタン -スクロールインジケーター付き-

Blog Card Block -ブログカードを簡単設置-

新着ツール

同時視聴ツール-YouTube&Twitch対応

YouTube サムネイル取得ツール

CSS文字縁取りジェネレーター

CSSグラデーションジェネレーター

CSSテキストシャドウジェネレーター

トップへ戻るボタン -スクロールインジケーター付き-