7年3ヶ月ぶりの浦島リニューアル太郎
皆さんお久しぶり、7年と3ヶ月ぶりのはてなブログへ凱旋です。
noteに移行して（と言ってもnoteも書いていないが…）すっかり存在を忘れていたのだが、実は以前に少しここで書いていたのだった。
たしか当時熱狂的な「響け！ユーフォニアム」オタクだったので（キャラクターの誕生日カンバスとか家にあります）、ブログタイトルは「高揚感日記」。
かの有名なED「トゥッティ！」のアニメーションに出てくるワンシーンがとても気に入っていた。
そんな当時の想いも大事にしながら、ブログのテーマをリニューアルした。
復帰第一弾としてまずはこのテーマカスタマイズについて書き残しておく。
- 元となっているテーマ「Life」
- こだわりポイント① 独自ドメイン
- こだわりポイント② とにかくシンプル
- こだわりポイント③ カード型記事一覧をイチから作成
- こだわりポイント④ シンプル故に目立つブログタイトル
- こだわりポイント⑤ ビジュアルと同期するアイキャッチデザイン
- 余談
- おまけ
元となっているテーマ「Life」
2016年10月にリリースされ、もうすぐ9歳になる兵（つわもの）。
非常にシンプルなテーマで、公式テーマとしては第3位・138,280インストールされているほどの人気だ。
結果的にはこれにデザインCSS（追加CSS）を450行ほど追加して、今の形となった。
こだわりポイント① 独自ドメイン
ここはまあ、手順や仕組みを知っていれば別に難解でもないので割愛する。
なぜかZohoで購入・保持していたcomドメインを腐らせていたので、ありがたく活用した。
やっぱり独自ドメインって覚えやすいし目立つし愛着も湧くからいいよね。
こだわりポイント② とにかくシンプル
ミニマルでシンプルなテーマを、さらにミニマルでシンプルにした。
もともとはてブってあまり装飾ごっちゃーなってるのが似合う媒体ではないなと勝手に思っていて、シンプルであればあるほどいい！というのがこのテーマ選択とカスタムのコンセプト。
例えば、具体的にはこんなことをした：
- サイト下部にある新着記事などの共通パーツを極力すっきりさせた
- ホバーアクションなどのインタラクティブ要素を最小限にした
- 各要素の間隔を大きく取りすぎず、コンパクトにまとめた
- SNS共有ボタンなどもごちゃつく原因になるので、Xのみとした
こだわりポイント③ カード型記事一覧をイチから作成
実はこのテーマにはもともとカード型のデザインが入っていない。古いので。
ので、カード型のデザインCSSを新たに当てた。
まあ、カード型にすること自体は難しくないが、細かい要素レイアウトにこだわりがある。
余談だが、WEBでカード型カスタマイズを探すと古（いにしえ）の「左パディングとマイナスマージンによる位置合わせ」などがまだ出てくるので、流石に今回はFlexGapを使った均等配置にした。
これにより、スマホ→タブレット→PCのレスポンシブも非常にスムーズだ。
先述の共通パーツと縦のラインが揃うようにしたり、記事タイトルが2行になっても日付やカテゴリの位置がズレないようにしたり、他にも錯視対策で1px単位の調整をかけているところもある。
（まあ、このあたり昨今のWEBデザインでは基本のキなので、自慢げに語ることもないが…）
こだわりポイント④ シンプル故に目立つブログタイトル
実はこのブログタイトル要素は、はてブにもともとある基本設定のものではなく、追加パーツで擬似的に実装している（本来のブログタイトル要素は非表示にしている）。
シンプルが故にタイトルで少し遊びたかったのだが、基本機能だとやりづらいので別要素で構築し、ブログタイトルのテキスト要素はJSで後から動的に取得している。
ビジュアルのクリエイティブ手法としてはグレー寄りのアウトだと思うので小声になるが、
京アニ様の高揚感素材（画像）からAIでテキストとイラストを削除
↓
青空背景のみとなったイラストを素材として食わせ、AIでほぼ似たイラストとして再現
で背景素材を作っている。
また、ブログタイトルにはCSSでランダムグリッヂ装飾をしていて、よーーーく見ると文字が1pxだけユラユラ動いて、3D表現にありがちなアナグリフを再現している。
どうだ、かっこいいだろう！！
（モーションブラー効果も入れたかったが、なんか上手くいかなかったので一旦なし）
こだわりポイント⑤ ビジュアルと同期するアイキャッチデザイン
ほぼほぼデザイン作業が終わり、「さて記事を書くか～」と思っていたところ、はてブではいま“アイキャッチを自動生成する機能”があるらしかった。
いちいち記事ごとにアイキャッチ画像を設定しなくても、記事タイトルの文字情報を予め指定した背景要素とミックスしてサムネイル画像化して設定してくれるというスグレモノ。
SNS投稿もこの自動生成アイキャッチ画像になる。
これは面白い。
面白いと思っていろいろ調べたのだが、動的にミックスしている関係で、このサムネイル背景には普通の画像が使えない。
しかもエディターボックスには65,000文字という絶妙な文字制限が付いているので、あまり凝ったことも書けない。※SVGを使うと一瞬
そこで、
先程の背景素材を軽量化 → Base64エンコード → CSS Backgroudに設定
とすることで、なんとか自動生成処理に適合する背景付きアイキャッチを作ることができた。
これは自動生成の仕様がよく分からないせいで地味に時間がかかった。
少し時間はかかったものの、SNSで投稿シェアをした際に、ユーフォニアムの次回予告っぽくなるのでかなり気に入った。
はてなブログに投稿しました
— うきら (@ukiradio) 2025年9月12日
休止期間中の記事はnoteで配信中 - 高揚感日記 https://t.co/8Kx2j4Bk37#はてなブログ
余談
このほか、普通にレスポンシブの調整を細かくこだわったり、平成一桁ジジイ古ブロガーのこだわりとしてサイト右上に管理者ログインボタンを小さく常駐させていたり、懐かしい実装を施している。
デザイン構想段階では、「流行りのホワイトゲーミングPCっぽいデザインにしよう！」と思って記事カードホバー時に縁がRGBに光り輝いたり、ふわっと光る装飾を付けたりすることも考えた（実装してみた）のだが、いまいち自分の理想とする挙動にできず、めんどくさいので早々に諦めることになった。
久しぶりに新しいおもちゃで遊んだ感覚で楽しかった（小並感）。
これに満足して肝心の執筆活動が疎かにならないことを祈る。
おまけ
ミニマル＆シンプルにしたおかげで、PSIスコアはまずまずのようだ。
休止期間中の記事はnoteで配信中
お久しぶりです。
2020年～2024年あたりまで、noteというサービスにていくつか記事を書いていました。
どちらかに完全移行するでもなく、ゆるく続けていくと思うので、気になる方はnoteのフォローもお願いします。
また、当然のように24時間365日、X（Twitter）にも居ます。
※この記事は自動生成アイキャッチのテスト投稿も兼ねています。
