サイトリニューアルについて
2019年6月更新分より、当サイトのデザインを一新しました。サイト開設以来、約18年ぶりの全面リニューアルです。主な変更点は以下のとおりです。
- トップページもブログ形式に
- トップページにもテキストのイントロが掲載されるようになりました。
- スマートフォン等、携帯端末対応
- 以前から携帯でも閲覧自体は可能でしたが、携帯端末対応のテンプレートを新たに導入しました。端末の判定は表示画面幅で行い、700px以下で携帯端末用に切り替わります(PCのブラウザでも幅が狭い時は携帯用テンプレートに切り替わります)。携帯端末の確認は、iPhoneのみで行っていますので、Android端末等で表示が乱れる場合は、管理人までご指摘ください。
- 過去ページへのリンクをトップページから外しました。
- 現在は「堀江由衣の天使のたまご」テキスト以外の更新はほとんど行っていないため、過去に更新したページはトップからのリンクを外しました。ただし、「旧記事リンク」のページからリンクを張りますので、当面は閲覧ができます。これらのページは旧デザインのままです。
ラジオテキストの変更点
ラジオテキスト「堀江由衣の天使のたまご」のHTML+CSSの構造も全面的に見直しています。
- XHTML1.1からHTML5への変更(新たなブログテンプレート導入による)。10年以上前にサイトをXHTML1.1へ刷新した際は、XHTML2への移行も視野に入れたマークアップを心がけていましたが、そのXHTML2自体が頓挫してしまいました。梯子を外された気分です。
- 発言者名の後ろのアイコンを▼から▶に。
元々は私が20年前にワープロの縦書きでラジオテキストを書いていた頃、下向き矢印のつもりで▼を使い始めたのがこのアイコンにした理由です。何種類かの記号で試し、一番可読性が良かったのが、この黒塗り・下向き三角でした。
横書き文のWeb上で公開を始めた時も、同じように矢印として右向き三角▶を使用したかったのですが、当時のPCでは横向き三角記号がなく(あっても機種依存で文字化け等の懸念があり)やむなく下向き三角アイコンで代用していました。
Unicodeが普及した今、約18年の時を経て、ようやく本来使いたかった記号を使えるようになりました。 - 会話部分のマークアップを、定義語リスト(dl,dt,dd)から段落(p)へ変更。
かつて、会話文は慣習的に定義語リストでマークアップされることがありましたが、HTML5では不適切とされています。
当サイトでも発言者名をdt、内容をddでマークアップしていましたが、これらをpタグにまとめ発言者名をuでマークアップすることにしました(※発言者名をマークアップする要素は悩みましたが、例えば<span class="label">では冗長になってしまうため、「軽めのラベル付」としての使用が認められている<u>を用いることにしました)。
例:<dt class="***">発言者名▼</dt><dd class="***">発言内容</dd> → <p class="talk ***"><u>発言者名▶</u>発言内容</p>
他にもpのclass属性やtitle属性の値のみで発言者名を記載し、CSSのcontentで表示する方法も考えられますが、CSS抜きでは情報が伝わらないので今回は見送りました。 - 一部マークアップ変更。一部のdiv要素をsection要素やmain要素などに変更しました。
- <div class="corner"> → <section class="corner">(コーナー部分)
- <div class="text"> → <main class="radio">(テキスト本文)
- CM部分を定義語リストから順序リスト(ol)へ。
- 経過時間をtime要素でマークアップ(time要素とp要素が並列で置かれることになり、非常に気持ちが悪いので更に改変するかもしれません)。
今後の改良点・課題
リニューアルでブログのデータベースも一新しました。以前のデータベースは文字コード変更や、サーバーの変更・メンテナンスにより部分的に壊れ、文字化け等が生じることがあり、このまま使い続けることができなくなってしまいました。記事数が3000近くに及び、分量的にも扱いにくくなったため、一から作り直すことにしました。そのため、以前の記事とはデータベースが分断され、サイト内の検索ができないなどの不具合が生じています。
過去の更新ページのリニューアルは後回しにしたため、デザインは古いままです。CSSを調整すれば、こちらもモバイル対応可能と思われますので、今後行う予定です。扱う記事の特性上、1本の記事が長くなる傾向にありますので、携帯端末用に固定メニューバーの導入等を考えています。