前回の進捗から2日。ドメイン移管からレイアウト刷新まで、一気に進めた。
ドメイン移管完了
VALUE-DOMAIN から Cloudflare Registrar へのドメイン移管が完了した。
手順自体はシンプルだが、いくつかハマりポイントがあった。
- WHOIS代行の解除が必要: VALUE-DOMAINのWHOIS代行(プロキシ)が有効だと、Cloudflare側で移管申請が拒否される。WHOIS情報ページから代行設定を外す必要がある
- Auth Codeの場所: VALUE-DOMAINの「ドメインパスワード」はAuth Codeではない。本物のAuth Code(認証鍵)はWHOIS情報ページに表示されている
- 費用: Cloudflareのドメイン移管は原価($9.77/年)。VALUE-DOMAINの更新料より安い
移管申請から承認まで数時間で完了。Cloudflare側でドメインのDNS・SSL・Pages設定がすべて一元管理できるようになった。
DNS切り替え ─ hide10.com が本番に
これまで new.hide10.com で運用していた新サイトを、hide10.com に切り替えた。Cloudflare Pages のカスタムドメインに hide10.com と www.hide10.com を追加し、baseURL を変更。デプロイスクリプトやSNS投稿スクリプト内のURLもすべて更新した。
旧WordPress URLのリダイレクト
WordPressの旧URL形式 /archives/{投稿ID} から新サイトの /post/{slug}/ へリダイレクトを設定した。
全15,444記事のリダイレクトを入れると20,000ファイル制限を超えるので、GA4 Data APIでアクセス数の多いページ上位200件に絞った。Hugoの aliases 機能を使い、各記事のfront matterに旧URLを追加するだけで、自動的にリダイレクト用HTMLが生成される。
| |
GA4 APIのセットアップも行い、今後の分析にも使えるようにした。サービスアカウント認証でローカルからAPIを叩ける。
前後記事ナビゲーション
個別記事ページに「前の記事」「次の記事」のナビゲーションリンクを追加した。single.html をオーバーライドし、.PrevInSection / .NextInSection で同セクション内の前後記事を取得している。カード風のデザインで、モバイルでは縦並びになる。
3ペイン → 2ペインレイアウト
Stack テーマのデフォルトは左サイドバー・メイン・右サイドバーの3ペイン構成だが、右サイドバーを廃止して2ペインに変更した。
右サイドバーにあったウィジェット(n年前の今日、アーカイブ、タグクラウド)は、それぞれメニュー項目やページとして再配置した。記事ページの目次(TOC)は記事内のインライン表示を維持している。
結果、メインコンテンツの表示幅が広がり、特にモバイルでの表示がスッキリした。
メニュー再構成
2ペイン化に合わせて、左サイドバーのメニューを再構成した。
| メニュー | 説明 |
|---|---|
| ホーム | トップページ |
| タイムマシン | n年前の今日の記事(日付で動的にリンク生成) |
| 検索 | 全文検索 |
| アーカイブ | 年月別アーカイブ |
| タグ | ラベル並びのタグ一覧ページ(新規作成) |
| RSS | フィード |
| ダークモード | 最下部に配置 |
「タイムマシン」は旧来の「n年前の今日」をリブランドしたもの。JavaScriptで今日の日付に応じたURLを動的に生成する。
タグ一覧ページはリスト形式からラベル(ピル)並びに変更。タグ名と記事数がひと目でわかる。
次にやること
- X/Twitter埋め込み: ポストが展開されない問題の修正
- GA4レポート: APIを使ったアクセス解析のオンデマンド分析
- 広告導入: AdSense承認待ち
