記事一覧に「もっと見る」ボタンを追加する方法

使用している場合 記事リスト要素一度に多くの記事を表示すると、ページが長くなり、ナビゲーションが難しくなります。読みやすさを向上させる簡単な方法は、 もっと見る 最初はリストの一部のみを表示し、クリックすると全内容を展開するボタン。

あなたが始める前に

「さらに読み込む」機能を追加する前に、以下のものを用意してください。

• An 記事リスト要素 既にページに追加済み
• A ボタン要素 それは もっと見る (Comma Separated Values) ボタンをクリックして、各々のジョブ実行の詳細（開始/停止時間、変数値など）のCSVファイルをダウンロードします。
• その 要素 ID 両方の要素

スクリプトを正しく更新するには、これらのIDが必要です。

「もっと読み込む」ボタンを追加する方法

「さらに読み込む」動作を作成するには、以下の手順に従ってください。

ステップ1：ボタン要素を追加する

まず、記事一覧の下にボタンを追加してください。

• ドラッグ ボタン要素 あなたの下 記事リスト

• ボタンのテキストを次のように変更します。 もっと見る

• 必要に応じてボタンのスタイルを調整してください。

このボタンをクリックすると、展開アクションが実行されます。

ステップ2：要素IDをコピーする

以下の要素のIDをコピーする必要があります。

• その 記事リスト要素
• その ボタン要素

要素IDをコピーするには：

• 要素を右クリックします
• 詳しくはこちら コピー → 要素IDをコピー
• コピーしたIDを保存します

コード内のサンプルIDを置き換えてください。

ステップ3: カスタムコード要素を追加する

加える カスタムコード要素.

次に、以下のHTMLコードをカスタムコード要素に貼り付けてください。

<script>

document.addEventListener("DOMContentLoaded", function () {

 const target = document.querySelector('[data-id="gMwtAAckG5"]');

 const button = document.querySelector('.g4FCNC2MEY'）;

 if (target) {

   target.style.height = "400px";

 }

 if (ボタン && ターゲット) {

   button.addEventListener("click", function () {

     target.style.height = "100%";

     button.style.display = "none";

   }）;

 }

}）;





[data-id="gMwtAAckG5"]{

 オーバーフロー: 非表示 !重要;

}

ステップ4：サンプル要素IDを置き換える

上記のコード内のサンプルIDを、ご自身のIDに置き換える必要があります。

置換：

gMwtAAckG5

と：

• あなたの 記事リスト要素ID

置換：

g4FCNC2MEY

と：

• あなたの ボタン要素ID

この「さらに読み込む」機能の仕組み

コードを追加した後：

1. 記事リストには最初は以下のものが表示されます 高さ400ピクセル
2. 追加の記事は非表示になります
3. ユーザーがクリックすると もっと見る:

• 全リストが表示されます
• ボタンが消える

これにより、シンプルで分かりやすい展開操作が実現します。

クリックする前に、表示される記事の数を制御できます。 もっと見る.

コードの中からこの行を探してください。

target.style.height = “400px”;

前日比 400px 例えば、別の値に置き換える場合：

• 300px → 記事を少なく表示する
• 500px → その他の記事を表示
• 600px → さらに表示

レイアウトに合わせてこの値を調整してください。