∵ほぼ無彩色な更新履歴:3(アコーディオンあり)∵

01/04
本文が短いときは
折りたたまれません。
01/03
2行までは畳まれない
長編+1
短編+1
01/02
3行で畳まれる
お返事(12/31分)

ここが3行目。
追記とか補足とかレスとか、すぐ目に入らなくていい・隠したい文章なども3行目以降に書けば自動で折りたたむ……という、アコーディオンタイプの本文となります。
ぱっと見える最初2行は空行でもOKです。

なお実は、アコーディオンの開くスイッチは「more」部分だけじゃなくて「...  more」の1行すべての部分です。分かりづらくてすみません。
(「more」だけだとタップ領域が小さすぎるかと思ったので、あえて1行丸々スイッチにしています)
01/01
注意点※必読
JavaScriptが無効/非対応の環境では折りたたまれません。フィーチャーフォンはまず非対応とお考えください。
ちなみにスマホ・PCでは、デフォルトでJavaScriptは有効になっています(閲覧者が無効設定にしていない限りは)。

折りたたまれない環境で見ると、すべての記事がこの一覧画面でフルオープン状態です。
※その際は『...  more』の行も表示されず、ごく普通の単体式ノートの見た目となります。

本文の長い記事が沢山あるとページが縦長になるので、【基本設定】で表示件数を「10,5(PC・スマホでは10件/ガラケーでは5件)」など、フィーチャーフォンでの表示は少なめに設定しておいた方がいいかもしれません。

※PC・スマホ向けの表示件数について※
通信環境が悪かったりページ全体のテキスト量があまりにも多かったりすると読み込みに時間がかかり、折りたたみが即座に行われない場合があります(一瞬フルオープンで表示されてしまう)。1記事1記事が長文であれば、表示件数を適宜減らすなど各位でご対応ください。


なお、折りたたみは「記事本文の高さが2行以内なら折りたたまない。記事本文が3行以上になったら、3行目以降を折りたたむ」という仕組みになっています。
閲覧者の環境(画面サイズや文字サイズ)によって、『折りたたまれない2行分の文字数』は変化します。ご留意ください。

↓普通の〔 追記(続きを読む) 〕編集枠を使った場合は下記のように、通常通りリンクが挿入されます。
ちなみに、追記画面では本文行数に関わらず折りたたみが発生しない仕組みとなっております(jQueryの方でそういう設定にしています)。
記事編集時のプレビュー画面では折りたたまれてしまいますが、本番の追記画面ではたたまれなくなるのでご安心ください。
more>>
12/25
ほぼ無彩色シリーズについて
このテンプレは単体式専用(=ノートTOPに《タイトル+ノート内容(本文)》が表示されるノート専用)です。
『ほぼ無彩色な更新履歴:1』&『ほぼ無彩色な更新履歴:2』と、大まかなデザインは同一です。(HTML・CSSともに、多少の変更はあります)

<mark>〜〜</mark>でマーカー風にできるのは共通です。

このテンプレは「改変しやすさ」に関しては同シリーズ他テンプレと比べ自由度が低い……というか改変難度が高いです。
配色変更はスタイルシートを弄るだけなので、『:1』『:2』と同じくらいの手間です。サイズ関係を弄るときはjQueryのコードもご確認ください。
07/07
折りたたみ行数の変更方法
『折りたたみが発生する行数』と『折りたたまれた際に表示しておく行数』は、jQueryのコードを弄れば簡単に変更できます。

【全体レイアウト】にあるコードのうち、
var nonAccH = oneLineH * 2; /*←【2行】までは折りたたまない*/
var visibleH = oneLineH * 2; /*←折りたたまれたら上部【2行】のみを表示*/
という部分を探してください。

上記マーカー部分の数字を変更すれば、『本文が【5行】以内だったら折りたたまない。6行以上になったら折りたたみ、その際は上部【1行】のみ表示しておく』……といったこともできます。
※コードには必ず半角数字を入れてください。
※『 /*←【2行】までは…(略)*/ 』と『 /*←折りたたまれたら上部【2行】…(略)*/ 』の文章は、ただのメモ書きですので、直接折りたたみ機能には関与しません。よって、
●数字の全角or半角は気にせずOK
●書き換えなくてもOK
●消してもOK
です。
07/06
ノートTOPページリンク独自タグについて
【ノート画面レイアウト】に##note1(top)##で入っています。ご利用になるノート番号が1以外の場合は、適宜各位での書き換えをお願いいたします。
07/05
文字数確認用
一二三四五六七八九十1二三四五六七八九十2二三四五六七八九十3二三四五六七八九十4二三四五六七八九十5二三四五六七八九十6二三四五六七八九十7二三四五六七八九十8二三四五六七八九十9二三四五六七八九百1二三四五六七八九十1二三四五六七八九十2二三四五六七八九十3二三四五六七八九十4二三四五六七八九十5二三四五六七八九十6二三四五六七八九十7二三四五六七八九十8二三四五六七八九十9二三四五六七八九百
03/30
ほか諸注意
文字サイズを変更すると折りたたみの挙動が意図通りいかなくなる場合があります。
不自然に文字が欠けたり、文字は2行に収まっているのにオープンボタンが表示されたり(数pxだけ“2行”よりはみ出してしまう)……ということがあるので、はじめの数行分では文字サイズを変更しないことをお勧めします。

また、WEBフォントを使っても上記の不具合が生じることを確認しています。(どうも数pxだけ行の高さが変わってしまうようです……)
そのため、同名シリーズのテンプレにあった「任意の文字をWEBフォントにする」クラスタグを削除しています。
newtopold
- site top -