---
title: "WordPressで上部にパーセンテージ表示のスクロール読み込みプログレスバーを実装 - 憂いを忘れる一枚"
description: 先日、「WordPress上部ローディングプログレスバーのコード」という記事を書きました。ウェブサイトの読み込み時間を表示するためのもので、今回の機能と似ています。
canonical_url: "https://www.ikxin.com/ja/article/wordpress-scroll-progress"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": 先日、「WordPress上部ローディングプログレスバーのコード」という記事を書きました。ウェブサイトの読み込み時間を表示するためのもので、今回の機能と似ています。
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNz44Gn5LiK6YOo44Gr44OR44O844K744Oz44OG44O844K46KGo56S644Gu44K544Kv44Ot44O844Or6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS5a6f6KOFIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~V29yZFByZXNz44Gn5LiK6YOo44Gr44OR44O844K744Oz44OG44O844K46KGo56S644Gu44K544Kv44Ot44O844Or6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS5a6f6KOF%2Cdescription_~5YWI5pel44CB44CMV29yZFByZXNz5LiK6YOo44Ot44O844OH44Kj44Oz44Kw44OX44Ot44Kw44Os44K544OQ44O844Gu44Kz44O844OJ44CN44Go44GE44GG6KiY5LqL44KS5pu444GN44G-44GX44Gf44CC44Km44Kn44OW44K144Kk44OI44Gu6Kqt44G~6L6844G~5pmC6ZaT44KS6KGo56S644GZ44KL44Gf44KB44Gu44KC44Gu44Gn44CB5LuK5Zue44Gu5qmf6IO944Go5Ly844Gm44GE44G-44GZ44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3dvcmRwcmVzcy1zY3JvbGwtcHJvZ3Jlc3Mi%2Cs_IqJ7IDTr3LQCxh7O.png"
  "og:image:alt": "WordPressで上部にパーセンテージ表示のスクロール読み込みプログレスバーを実装 - 憂いを忘れる一枚"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": WordPressで上部にパーセンテージ表示のスクロール読み込みプログレスバーを実装
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNz44Gn5LiK6YOo44Gr44OR44O844K744Oz44OG44O844K46KGo56S644Gu44K544Kv44Ot44O844Or6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS5a6f6KOFIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~V29yZFByZXNz44Gn5LiK6YOo44Gr44OR44O844K744Oz44OG44O844K46KGo56S644Gu44K544Kv44Ot44O844Or6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS5a6f6KOF%2Cdescription_~5YWI5pel44CB44CMV29yZFByZXNz5LiK6YOo44Ot44O844OH44Kj44Oz44Kw44OX44Ot44Kw44Os44K544OQ44O844Gu44Kz44O844OJ44CN44Go44GE44GG6KiY5LqL44KS5pu444GN44G-44GX44Gf44CC44Km44Kn44OW44K144Kk44OI44Gu6Kqt44G~6L6844G~5pmC6ZaT44KS6KGo56S644GZ44KL44Gf44KB44Gu44KC44Gu44Gn44CB5LuK5Zue44Gu5qmf6IO944Go5Ly844Gm44GE44G-44GZ44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3dvcmRwcmVzcy1zY3JvbGwtcHJvZ3Jlc3Mi%2Cs_IqJ7IDTr3LQCxh7O.png"
  "twitter:image:alt": "WordPressで上部にパーセンテージ表示のスクロール読み込みプログレスバーを実装 - 憂いを忘れる一枚"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **WordPressで上部にパーセンテージ表示のスクロール読み込みプログレスバーを実装**

2017.06.06 3,997  0

先日、「 [WordPress上部ローディングプログレスバーのコード](https://blog.ikxin.com/archives/13.html)」という記事を書きました。ウェブサイトの読み込み時間を表示するためのもので、今回の機能と似ています。

今回ご紹介するのは、横方向に表示されるプログレスバーです。ウェブページを下へスクロールするにつれて、プログレスバーが徐々に長くなります。また、スクロールバーの色をカスタマイズすることもできます。現在、このサイトでもこのコードを導入しており、実際の効果は当サイトのページで直接確認できます。以下がコードです。

## HTMLコード

 HTML

```
<div id="load"></div>
```

## CSSコード

 CSS

```
#load {
    background-color: #ff6651;
    height: 3px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}
```

## JSコード

 JavaScript

```
$(function() {
    function scroll_fn() {
        let document_height = $(document).height();
        let scroll_so_far = $(window).scrollTop();
        let window_height = $(window).height();
        let max_scroll = document_height - window_height;
        let scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#load').width(scroll_percentage + '%');
    }
    $(window).scroll(function() {
        scroll_fn();
    });
    $(window).resize(function() {
        scroll_fn();
    });
});
```

**注意**：HTMLコードは `body` タグの直下の1行目に配置する必要があります。

## **コメント**

(0)

まだコメントはありません

## **コメントを投稿**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/wordpress-scroll-progress#webpage","@type":"WebPage","description":"先日、「WordPress上部ローディングプログレスバーのコード」という記事を書きました。ウェブサイトの読み込み時間を表示するためのもので、今回の機能と似ています。","name":"WordPressで上部にパーセンテージ表示のスクロール読み込みプログレスバーを実装","url":"https://www.ikxin.com/ja/article/wordpress-scroll-progress","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/wordpress-scroll-progress"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.