【自分専用備忘録】G検定全23投稿のバックアップしつつ、デザインも変えるよ【完】

ゴールイメージ

1. G検定自己採点記事の全23投稿（全226問）にある「112問」「112問の予想解答」等のタイトルについて、h4タグからh5タグに変える
2. ついでに同投稿のバックアップをとる
3. さらについでに、モバイルでもスクロールとかせずに扱えるように、ナビゲーション・バーを各問題/各予想回答の下部につけちゃう。さらにページ最上部に目次、最下部にはナビゲーション・バーを。
4. 【方針変更】ジャンプリンクを絶対パスにしていたが、相対パス(ex.”#tablecontent”のみ）とする。これに伴い<!--more-->より上のジャンプリンクは<!--more-->より下に変更（<!--more-->を上に持っていく）。

そういう考えに至った理由

1. 「112問」「112問の予想解答」等のタイトルが読みにくいので、h4のデザインを変えてみたらイイ感じになったのだが、Bloggerテーマ側でデフォルトで使っている文字まで変わってしまい、バランスがおかしくなった為。例えば、投稿下部にある「ｘ件のコメント」「コメントを投稿」等もh4だった。なので、「112問」等のタイトルをh5タグに書き換える他ない
   →ここからの反省。h3/4/5あたりを使うときは、予め全て独自のClassを指定しておくか、テーマ側の主なところは確認しておくべきだった。
2. ついでにバックアップをとる。先日、こんな事件→「お詫び：多くの記事が「下書き」に戻ってました。」も有ったので、いろいろ不安なため。
3. 利便性向上。何人かの方々に激励いただきモチベアップしたし。
4. 【方針変更】これまで<!--more-->より上のリンクが相対パスだと機能しない為、絶対パスとしていた。ただ、絶対パスの場合、モバイルアクセス時に同じページ内ジャンプであっても毎度サーバにアクセスするし、動作は遅いし、オフライン環境（キャッシュのみ）では動作しないため。実は<!--more-->は動かさずに、<!--more-->が出る（一覧表示）時は相対、出ない（個別記事表示）時は絶対に変換することも試みた。Bloggerの制御タグ・データタグなども調べたし、Bloggerコミュニティ（米国）もあたったが、そこまでやっているケースは見当たらず、断念した。

具体的実施内容

1. h4→h5タグ変更　by Visual Studio Code
   【普通置換】：検索h4>→置換h5>
2. 各問題ナビゲーション・バーの為の置換　by Visual Studio Code（解答へのリンクに加え、目次リンク・一覧リンクを追加）　※目次は相対パス。なぜなら「<!--more-->」より上に有る為。「<!--more-->」より下のターゲット（id）に対しては相対パスではジャンプできないことがあるから、それ以外は絶対パスにしている。
   【正規表現置換】：
   検索^(&gt;.*)(<a href=")(https.*)(#noa\d\d\d">)(.*<br />)$
   →置換<table class="exam-list"><tbody><tr><td>$2$4↓$5</td><td>$2#tableofcontent">▲目次</a></td><td><a href="https://resweatr.blogspot.com/p/g20193.html">■一覧</a></td></tr></tbody></table>
3. 各予想解答ナビゲーション・バーの為の置換　by Visual Studio Code（問題へのリンクに加え、目次リンク・一覧リンクを追加）
   【正規表現置換】：
   検索^(&gt;.*)(<a href=")(https.*)(#noq\d\d\d">)(.*<br />)$
   →置換<table class="exam-list"><tbody><tr><td>$2$4↑$5</td><td>$2#tableofcontent">▲目次</a></td><td><a href="https://resweatr.blogspot.com/p/g20193.html">■一覧</a></td></tr></tbody></table>
4. 目次作り（一括置換は難しいので手作業でコピペ）
   テンプレート<h5><span class="tableofcontent" id="tableofcontent">目次</span></h5> <table class="exam-list"> <tbody> <tr> </tr> <tr> <td colspan="3"><a href="https://resweatr.blogspot.com/2020/01/20191109-201-210.html">◀︎前10問</a></td> <td colspan="4"><a href="https://resweatr.blogspot.com/p/g20193.html">■全問一覧</a></td> <td colspan="3"><a href="https://resweatr.blogspot.com/2020/01/20191109-221-226.html">次10問▶︎</a></td> </tr> </tbody> </table>
5. 最下段ナビ（一括置換は難しいので手作業でコピペ）
   テンプレート<h5><a href="https://resweatr.blogspot.com/2019/11/20191109note.html#note">注意事項</a></h5> <h5><a href="https://resweatr.blogspot.com/2019/11/20191109note.html#legend">凡例</a></h5> <h5><a href="https://resweatr.blogspot.com/2020/01/20191109-201-210.html">◀︎前10問</a>｜<a href="#tableofcontent">▲目次</a>｜<a href="https://resweatr.blogspot.com/p/g20193.html">■一覧</a>｜<a href="https://resweatr.blogspot.com/2020/01/20191109-221-226.html">次10問▶︎</a></h5>

具体的実施内容（旧バージョン）

最初の5〜8記事はこれで実施済み→▲目次の「#tableofcontent」のみ相対パス。それ以外は絶対パス。

2. 各問題ナビゲーション・バーの為の置換　by Visual Studio Code（解答へのリンクに加え、目次リンク・一覧リンクを追加）　※目次は相対パス。なぜなら「<!--more-->」より上に有る為。「<!--more-->」より下のターゲット（id）に対しては相対パスではジャンプできないことがあるから、それ以外は絶対パスにしている。
   【正規表現置換】：
   検索^(&gt;.*)(<a href=")(https.*noa\d\d\d">)(.*<br />)$
   →置換<table class="exam-list"><tbody><tr><td>$2$3↓$4</td><td>$2#tableofcontent">▲目次</a></td><td><a href="https://resweatr.blogspot.com/p/g20193.html">■一覧</a></td></tr></tbody></table>
3. 各予想解答ナビゲーション・バーの為の置換　by Visual Studio Code（問題へのリンクに加え、目次リンク・一覧リンクを追加）
   【正規表現置換】：
   検索^(&gt;.*)(<a href=")(https.*noq\d\d\d">)(.*<br />)$
   →置換<table class="exam-list"><tbody><tr><td>$2$3↑$4</td><td>$2#tableofcontent">▲目次</a></td><td><a href="https://resweatr.blogspot.com/p/g20193.html">■一覧</a></td></tr></tbody></table>

具体的実施内容（旧々バージョン）

最初の4記事はこれで実施済み→▲目次の「#tableofcontent」も含め全てが絶対パス

2. 各問題ナビゲーション・バーの為の置換　by Visual Studio Code（解答へのリンクに加え、目次リンク・一覧リンクを追加）
   【正規表現置換】：
   検索^(&gt;.*)(<a.*html)(.*noa\d\d\d">)(.*<br />)$
   →置換<table class="exam-list"><tbody><tr><td>$2$3↓$4</td><td>$2#tableofcontent">▲目次</a></td><td><a href="https://resweatr.blogspot.com/p/g20193.html">■一覧</a></td></tr></tbody></table>
3. 各予想解答ナビゲーション・バーの為の置換　by Visual Studio Code（問題へのリンクに加え、目次リンク・一覧リンクを追加）
   【正規表現置換】：
   検索^(&gt;.*)(<a.*html)(.*noq\d\d\d">)(.*<br />)$
   →置換<table class="exam-list"><tbody><tr><td>$2$3↑$4</td><td>$2#tableofcontent">▲目次</a></td><td><a href="https://resweatr.blogspot.com/p/g20193.html">■一覧</a></td></tr></tbody></table>

【2020/8/21追記】本件完了。モバイルでも快適になった。