[ナノ]ブログの本文・追記を開閉する

公開: 2025.11.24

更新: 2025.11.29

ナノのブログ機能でタイトルをクリック→本文を表示する動作についてのメモです。

タイトル→本文→追記の順番でひらく

・折り畳み式メモなどで利用しているコードです。
・しずかなメモでは追記を表示する部分だけ利用しています。
・下記のコードはコピペ・改変・再配布等OKです。

■表示デモ

タイトル①

ここに本文ここに追記

タイトル②

ここに本文。追記がない場合は追記ボタンは表示されません。

タイトル③

ここに本文。ここに追記

■一覧画面レイアウト「一覧部分」

 
<div class="title-name"><a href="javascript:void(0)">#title#</a></div>
<p class="honbun">#text#
 <span class="more-wrap">
    <button class="more-btn">追記ボタン</button>
    <span class="more-text">
      #text2#
    </span></span>
</p>

■一覧画面レイアウト「下部表示テキスト」

 
      
<!-- 「下部表示テキスト」の一番下に書く -->
<!-- 以下タイトルをクリックした場合の動作 -->
<script>
const titles = document.getElementsByClassName("title-name");
const articles = document.getElementsByClassName("honbun");

for (let i = 0; i < titles.length; i++) {
  titles[i].addEventListener("click", () => {
    articles[i].classList.toggle("show");
  });
}

<!-- タイトルをクリックした動作ここまで -->

<!-- 以下追記がある場合のみ表示するボタンに関する記述 -->
document.querySelectorAll(".more-wrap").forEach(wrap => {
  const moreText = wrap.querySelector(".more-text");
  const button = wrap.querySelector(".more-btn");

<!-- ① 追記が空なら要素ごと非表示 -->
  if (!moreText.textContent.trim()) {
    wrap.style.display = "none";
    return;
  }

<!-- ② ボタンで開閉 -->
  button.addEventListener("click", () => {
    moreText.classList.toggle("show");
  });
});
<!-- 追記がある場合のみのボタンここまで　-->
</script>

■HEAD・HTML詳細「HEAD内」

 

  /* タイトルを押すと本文を表示 */
.honbun {
  display: none;
}
.honbun.show {
  display: block;
}

/* 本文表示関連ここまで */

/* 追記ボタン */

.more-btn {
  cursor: pointer;
  display: inline-block;
  border: none;
  border-bottom: 1px dotted #333;
  color: #333;
  background: #fff;
  letter-spacing: .15rem;
}

/* 追記に関する動作 */
.more-wrap {
  display: block;
  text-align: right;
}

.more-text {
  display: none;
  text-align: left;
}
.more-text.show {
  display: block;
}