ダークモードとライトモードの切り替えをグローバルナビゲーション（上の方の半透明の白い領域）から簡単に行えるようにした（これまではこのサイトについてのページで切り替える必要があった）。デフォルトは OS の設定準拠で、 OS がダークモードであればダークモードに、ライトモードであればライトモードで表示される。手動でテーマを切り替えると Cookie に設定値を保存する。機能と見た目は MDN Web Docs を参考にした。
CSS がぐちゃぐちゃなのでかなり難儀した（ 3 年前にも同じことを書いている）。ダークモードとライトモードの切り替えなんて自分しかしていないと思うがかなり満足度の高い休日プログラミングだった。
最初にブログを作ったときからウェブサイトのタイトル（やロゴ画像）が h1 で、記事タイトルが h2 という見出しレベルで HTML を書いていた。しかし最近では、記事パーマリンクのページではサイトのタイトルなどには見出しレベルを設定せず、記事タイトルに h1 を当てている場合が多いようだ。なのでこのサイトでも記事タイトルを h1 とするように変えた。本文中の見出しレベルも h3 スタートだったのを h2 スタートに変えた。
伝統的なブログはインデックスページと記事パーマリンクページで HTML テンプレートを共通化している。なのでインデックスページに記事一覧を表示して h1 タグが並ぶとまずいということで記事タイトルは h2 から、という作りになってるような気がする。このサイトはインデックスページとパーマリンクページでのテンプレート共有化をほぼほぼやめたので、インデックスページとパーマリンクページで記事タイトルの見出しレベルを柔軟に変更している。
サイトの作り手からするとウェブサイトのタイトルこそが最も重要な要素でタイトルロゴなどを h1 でマークアップしたくなるのだが、読み手は Twitter やはてブから飛んできて刹那的に記事を消費し、インデックスページなんかには見向きもせずに去って行くだけだ。個別記事のタイトルこそ重要なのだ。
r7kamura さんからこういうコメントをもらってこういう風に返信した。
あー、なるほど。文章の構造化と HTML の構造化は分けて考えるべき、ってのが HTML 5 の背景にありそうですね。僕はこの辺ごっちゃになってました。 article 内できちんと見出しが配置されてれば問題なさそうですね。
— morygonzalez (@morygonzalez) June 23, 2022
HTML5 が出てきたとき、個人的には何かめんどくさいなぁとしか思ってなかったし、世間は Flash を置き換える近未来技術みたいな評価をしていたと思う。しかし、 <header> タグや <article> タグによって、 HTML の構造化と文書の構造化を分離できるようになったのがセマンティックWeb的なメリットだということに気がついた。つまり <h1> などの見出しルールは <article> タグの中で守られていればよいのだ。
ということに HTML5 が死んでから気がついた。
このサイトは Amazon の Product Advertising API を利用して小銭を稼がせてもらっている（毎月 300 円くらいインターネットの恩沢がある）。去年も 5 月頃に記事を書いているのだが、 30 日間で一個もこのブログ経由で商品が売れなかったので Product Advertising API の利用が制限されてしまった。
Product Advertising API は 2020 年の春に Version 5 への移行が義務づけられ、 30 日間で一回も商品を売れなかったサイトは API の利用ができなくなってしまうのだった。
春は入学や就職、引越の準備で忙しくて誰もこのような泡沫ブログを読んだりしないのだろうか。春は買い物する機会自体は多いと思うので、買い物していないわけではなく、趣味性の高い商品のアフィリエイトが踏まれにくくなるのかもしれない。
メールを送るだけでブログを書ける HEY World はとても体験が良い。入力しなければならないのはタイトルと本文だけ。カテゴリーやタグを選んだり、公開時の URL を選んだり、日付を設定したりできない。しかしそのせいで内容に集中できる。
ブログは万年筆のように書き味が大事だと思う。 HEY のメール作成画面は飛び抜けて良いわけではないが、ほどほどに良い。残念ながらこのブログの投稿欄よりも良いのは確実。別のエディターで下書きして貼り付ける手間がなく、いきなり書いて Send ボタンを押すだけでブログを公開できるのはとにかく便利。下書きはメールの下書きとして保存すればよく、出来上がったら world@hey.com に対してメールを送信する。ブログを書きたいけど管理画面にログインするのが面倒くさいとか、小さなフォーム入力欄で文章を書くのがかったるいというような、ブログを書くための障害をあらかた取り除いている。
メールはスパムによって程度の低い通信手段にされてしまったが、メールによって情報発信をする手法は見直されて良いと思う。昔はモブログという概念があって、ガラケーからメールでブログ投稿できる機能を備えてるブログサービスがあった。このブログにもメール投稿の機能を付けてみたいと思った。
※いまブログに広告を表示されてる方たちを攻撃する意図はないです
高尚なことが書かれてるブログに、手のしみとりとか豊胸とかエログロ漫画の低俗広告が表示されてると、どんなに立派なことが書いてあっても説得力を感じなくなってしまう。
自分も一年前まではブログに広告を出していた。
広告の表示はやめて本当によかったと感じる。いまからもう一度広告を表示する気にはなれない。
広告を表示していた頃は、低俗広告がいかにコンテンツ内容を毀損していたかということに気が付けていなかった。何か大事なことをシリアスに書いていても、そのすぐ脇に発毛剤とか精力剤とかエロゲームの広告が表示されていたらそれはギャグでしかない。
そもそも自分のブログの一番の読者は自分であり、広告を表示することで自分自身が見ても一円の得にもならない低俗な広告を延々見せられ続け、無料で広告を表示できて広告主が得をするだけだ。
半年に一度数千円もらうために記事内容を毀損するような低俗広告を表示するのはトータルで考えるとむしろ損だ。モチベーションを維持するために金銭的な報償が必要なのであれば、アドセンス広告よりも GitHub Sponsors とか、懐に余裕がある人からの支援を募った方が良いと思う。 Hail2u.net のながしまきょうさんがこの手法をとっていてなるほどと思った。コードを書かない人であれば Gumroad とか Patreon とかにすればいいし、 Amazon のウィッシュリストを掲載するのでも良いと思う。
広告によって無料でいろんなものを提供するのは、少額決済の仕組みがなかった時代に苦肉の策で生み出された手法だ。いまは 100 円、 200 円でもインターネット越しにお金を集めることができる。コンテンツを提供する側はたとえ個人のブログであったとしても安易に広告で収益を得ようとするのをやめて、お金が必要なのであれば真剣にマネタイズと向き合う必要があるだろう。
iPad を持っていないので確認していなかったのだけど、タブレットなど狭めの横幅のブラウザーでこのサイトのインデックスページを見ると残念な感じになっていたのでいい感じに調整した。横幅 1113px 以上だと past-entries セクションが 3 カラム表示になり、 1112px 以下だと 2 カラム表示に、 640px 以下だと 1 カラム表示になるようにした。これまでは 640px 以下のときの 1 カラム表示対応しかなくて、横幅が狭いブラウザーで見たときに悲惨なことになっていた。
その他、フッターの人気記事表示を変更した。インデックスページに最近の人気記事とはてブでホッテントリ入りした記事を表示するようにしたので、同じコンテンツがフッターにあるのは無駄だと感じた。かわりにフッターには今日と昨日の人気記事を表示するようにした。
よく読まれる記事の傾向はその日その日で結構違う。新しい記事を書くと当然その記事にアクセスが集まるのだけど、しばらく何も書いていないと意外な記事がアクセスを集めてたりして発見がある。例えば最近では Flickr の有料化についての記事がアクセスを集めていたが、 Google Photos の有料化が発表されたからだった。いっぱい記事を書いておくと、自分のブログへのアクセス傾向から世の中の動きが確認できて便利だ。
インデックスページにカテゴリーへの導線を作るべきということを書いたがさすがにラディカル過ぎた。
インデックスページのコンテンツ数が増え、ページの応答速度が 800ms ほどになっていた。 DOM サイズも大きくなり、転送量が増えてユーザーフレンドリーではないなと思った。確かにユーザーの回遊性は高まるかもしれないが、ページがごちゃごちゃしていて快適ではない。これではブログサービスでブログをやっているのと大差ないと思い直し、インデックスページの記事数を最小限に絞った。
全カテゴリーの最新記事の表示はやめ、最新の 7 記事だけ表示するようにした（最新の記事だけ大きく表示するというスタイルは残している）。カテゴリー一覧ごとの最新記事は別途 カテゴリー一覧ページ を用意してそちらに移した。
またページ下部に最近閲覧数が多い記事とはてブでホッテントリ入りした記事へのリンク1を付けた。これまではフッターに表示していたが、フッターのリンクはあまりクリックされていない疑惑があるし、結構面白コンテンツだと思うのでインデックスページのメインコンテンツとしてしつらえることにした。そもそも 21 世紀のブログでフッターなんてものはいらないのかもしれない。
シンプルにしたインデックスページは応答速度が 200ms を切っていてまぁまぁ高速で Google PageSpeed Insights でも 90 点くらいを取れる。個人ブログなのでシンプリシティは大切にしたい。
人気記事については以下を参照。
🤩人気記事を表示するようにした - portal shit!
静かな人気記事 - portal shit! ↩
