マガジンの目次ページが完成！（WordPress＋Swell+CSS＋Chrome）
（約 2,600文字の記事です。）
今日はガッツリCSSと格闘した。またWordPressというよりもSwellとCSSで格闘した。なので苦労したところがWordPress特有なのかSwell特有なのかCSSの常識なのか、サッパリ分からないところもあるが、こまけぇこたぁいいんだよ、まともに見えていれば！
休憩なしでぶっ通しで6時間くらい作業するので、いつも疲れる。だが途中で休憩を挟むと思考が途切れちゃうんだよね。
でも今日「も」収穫があった。今日は1歩どころか2, 3歩は前に進んだ気がする😤
マガジンの目次ページの完成
昨日までの実装
昨日までの実装はこちら。
う～ん、見づらい。なぜだ？色々考えた結果。
これでもまだ情報過多なのだ。まず灰色の水平線、要らないよね？また章の下の紹介文、要らないよね？本の目次にそんな情報あったか？と考えると不要なのだ。
だがしかし！読者に伝えたい「章ごとの肝、重要なポイント」をコメントしておきたいという筆者の思い！！！これをどう両立させるべきか……。
情報量を絞ることと、伝えたい情報を与えること。この矛盾。
色々試行錯誤した結果、こんな実装になった。
新たな目次のスタイル「章＋アコーディオン」
だったら章に折りたたみ機能（アコーディオン機能）をくっつけて、ユーザーの好みでパタパタ開閉させたらいいんでない？と思って実装してみた。
基本的にはページをロードしたときには全閉じ状態だ。なので以下のようにまるで本の目次のような「必要最低限の文字情報」しかない状態。
すっきりした！そうそう、これこれ。こういうのでいんだよ。
そして主に読み始め直後の読者はアコーディオンを開いてみることだろう。すると各章の説明が表示される。
情報の「絞り込みと付与」という矛盾
「これを書きたい＆伝えたい」という筆者の思いと、（読み始め直後の読者には嬉しいが）ある程度読み進めた読者からすれば「無駄な情報」これをアコーディオン機能で「目隠し」できる。
「情報の付与と削減」という矛盾するものを同居させることができた。しかも各章はh3タグなので自動で目次にもなる。
当初はh2タグでもいいかなと思ったのだが、これは主にSwellテーマのデフォルトでh3タグのほうが上下余白が少なく、かつ水平線が入っている「かっこいい見た目」だったのでh3タグを採用した😊それだけ。
別にh2でもh3でもどちらでもいい。ただ、今回はh3でチューニングした。
フロントエンドは美学の問題
見た目。あと一歩足りない。
そう、なんだか中途半端。色々Swell側で見た目を「枠線」や「シンプル」にしてみたが、どうにもしっくりこない。
蕎麦はいい、まぁ及第点をやれる。だがツユがなぁ……。
まさにそんな感じ。
ここまででどんどん時間が溶ける。フロントエンドはこだわり出すとキリがない沼だと実感した。
だって、別に普通に読めれば技術文書としての情報量には問題ないわけで、そこに美観や美学を詰め込んだとしても技術文書としての情報量は1ミリも増えないわけで。
だがせっかくなので今の実力でやれるところまで美しさにこだわってみようと思い、色々試行錯誤した結果、こうなった。
アンダーラインが文字列の長さになる。こうすれば画面右端の▲記号付近で突然途切れる違和感をごまかせる。CSSを色々いじくっていて偶然発見した（The 無知😭）そして章ごとの分割は灰色背景がセパレーターの役割を果たすので視覚的にも分割されている。問題なし！
この手の挑戦は『結果が出れば』それまでの苦労は全部報われるのだ。経験上よく知っている。だから結果オーライってことで。
Chrome万歳！デベロッパーモード
Chromeのデベロッパーモードでテストサイトをグリグリ触って下線の長さが変わることを偶然見つけた。神様に感謝😍デベロッパーモードの使い方なぞ誰からも教わっていない。直感で適当に触っていて、だんだんCSSの仕組みが分かってきた。
あとはSwellの「ページ限定の追加CSS」欄に貼り付けて更新＆レビューの繰り返しだ。（今にして思えばテストサイトの外観＞カスタマイズなど＞追加CSSでリアルタイムプレビューを試したほうが早かったかも知れない。もはや手遅れ。）
マガジン単位の目次ページ、完成！
これが完成型です😍
超絶シンプル。理想的な「本の目次」みたいに、本当に少ない情報量。The 目次と言えるだろう。
これはWordPressのカテゴリ分けを利用している。なので新規追加の記事があってもごく普通にワンクリックでカテゴリを割り当て、並び順を制御するための「投稿日」を意図的に操作すれば、あとは上記の目次ページに自動で挿入される。
こういう「全自動」機能が欲しかった。手動でソートなどしていられない。
そして章タイトルか▲記号をクリックすると、各「カテゴリの説明」が表示される。
この文章は編集画面に平文で打ち込んではいない。以下のようにカテゴリの説明欄をリンクで引っ張ってきて表示させている。なので表現に矛盾が起こることもない。
同じ内容を2度、書かないための工夫
実際の目次ページの編集画面では自作ショートコードでこんなに簡潔。
章の名前＝サブカテゴリ名、章のコメント＝カテゴリの説明。章内の投稿も自動で引っ張ってきて数字付きで列記。
なので上記の
「章名」
「説明」
「章に属する投稿」
これらの3ブロックが延々と繰り返しコピペされてカテゴリidを指定しているだけ。なので将来的にカテゴリ名やスラッグを変更しても既存ページに何の影響もない！そう、自由なのだ。
The フリーダム！It's ビューティフル！！！😍
目次ページの実装は完了
たぶんこれでほぼ完成。細かいことは気が向いたらチューニングする。今はこれで 目次 Ver.1.0 完成とする。これ以上は些末な問題だろう。
実装サイトはこちら。
これで本のような目次ページが完成した。
こういうシンプルなものが欲しかった。noteマガジンにはなかったからね。
今日もお疲れ！🍣
今回の創作活動は約7時間30分（累積 約3,490時間）
（956回目のnote更新）
読んでくれてありがとう。気長にマイペースに書いてます。この出会いに感謝😊