こんにちは、つばさ（@tsubasa123）です。
タイトルのとおりですが、ブログのデザインをリニューアルしました。はてなが提供しているテーマがベースにはなっていますが、ほぼオリジナルテーマと言っていいくらいごちゃごちゃと手を入れました。今回はPCのデザインのみの変更ですが、スマホはスマホでそのうちがんばります。
現時点でのスナップショットではないですが、自分用のメモと今後の課題をまとめてここに書いておこうと思います。
脱Brooklynしたかった
まずはリニューアルを決行した動機を少しだけ。
Brooklynは本当にいいテーマなんですが、それゆえに使ってる人多すぎ。いや、いいテーマだからしょうがないんですが。あれこれ手を加えてみてはいたんですが、元のクオリティが高いので中途半端にカスタマイズするとなんかバランス悪くなった気がして、元に戻すこともしばしば。カスタマイザー泣かせのよくできたテーマです。
で、他にも色々公開されているテーマがあるので試してみたりしたんですが、なんかどれもしっくりこなくて。最近話題になったZENO-TEALとかいいなーと思いましたが、こちらももう皆さん御用達のようでちょっと今更感。さて、どうしたものか。
自作を決意
といっても、そんなに難しいことはありませんでした。
はてな公式のページでテンプレートみたいなやつが配布されているので、こちらを元にCSSを記述していけばオリジナルテーマの出来上がり。
偉そうに言いましたが、厳密には今回はオリジナルテーマでリデザインしたわけではなく、はてな公式の「report」ってテーマに先のページでダウンロードしたBoilerplateってCSSを追記して、さらにオリジナルデザインのCSSを追記して、という形で対応しました。これはそのうち直す予定です。オリジナルテーマで運営してます、って言いたいので。
トップページはインパクト勝負
とにかく全幅のデザインにしたかった、これが最重要項目。私の好みなんですが、ヘッダーとかフッターがドーンと全幅のデザインが大好物でして。はてなブログではあまり見かけないデザインだと思うので、差別化の意味も含めてちょっと試してみようかなーと。
デフォルトのデザインではメインカラムに新着記事が並んで、横にサイドバーが表示されますが、トップページだけこの2つのカラムの幅を同じにすることで、疑似的にメインコンテンツが並んでいるように見せかけてみました。並んでいるように見えますよね？ね？
後、これは勉強も兼ねて、というか勉強の要素が大きいんですが、CSSアニメーションをふんだんに盛り込んでみました。クリックできる要素に対してはとりあえずなにかしらのアニメーションを指定しています。過剰なアニメーションは嫌われるということはある程度承知の上です。が、あまりにも評判が悪いようなら戦略的に撤退します。個人的には結構好きなエフェクトなんですけどね。
ちなみに、新着記事は記事中の先頭の画像を、よく読まれている記事はアイキャッチの画像が表示される仕様となっております。はてなブログややこい。
各エントリのページはシンプルに
こっちは今見ていただいているのでスクショは省略します。
トップページはビジュアル重視でしたが、各エントリのページは極力シンプルに、コンテンツに集中してもらえるようにを心がけています。ヘッダーにボタンとか広告とかごちゃごちゃ置いていましたがとりあえず全部撤退、さてどうなることやら。
- シェアボタンとフォローボタンの配置
- 広告の配置
- サイドバーサムネの大きさ
この辺がしっくりこないのでこれはこの先ブログを運営していく中で最適解を見つけていきたいなと思ってます。広告の配置に自信がある方、アドバイスください。
フッターには関連記事を全幅でドーン、です。ここは派手にいきました。これは我ながら結構気に入ってまして、そのうちカスタマイズ記事で紹介できたらいいなーと。需要があるかわかりませんが。
その他もろもろ
サポート対象のブラウザはEdge、Chrome、Firefoxの最新版。IEは11なら崩れないようにしていますが、フィルター効果など細かいところは対応していません。というか、そんなに確認していません。いいよね、個人ブログだし。仕事じゃないし。
開発者のエゴですが、トップページはフルHD（1920x1080）の解像度で閲覧された際に（私的に）一番いい感じにレイアウトされるようにコーディングしています。低解像度でも問題なく閲覧できるようにしていますが、1280以下はまぁ、あまりチェックしていません。
結構いろんなところで複数個のブレイクポイントを設定しているので、レスポンシブ対応はある程度できていますが、今のところPCにのみ対応させています。スマホはまた頑張る予定、スマホの方こそ本気出す。ところで、タブレットで閲覧した際ってスマホ表示なの？っていうか、スマホ表示になる基準ってなんなんでしょうか。ご存知の方がいましたら教えてください。
今後の課題
ロゴがダサい。アイコンがダサい。これな。
運営開始当初からずーっと引きずってる課題なんですが、なかなかいいアイデアが浮かばなくて。もういっそ美少女にしようかと本気で悩んでいます。ぐぬぬ。誰か、アイコンを…ちゃんとお金は払いますので…
あとは読み込みが遅かったり、遅延でコンテンツがちらつく箇所がいくつかあるので、その辺はプレースホルダーおくなり、ローディング出すなりと技術的に対応できそうなところは随時手を入れていきたいところです。
そしてなぜか読者数が出ない、なんぞこれ。
さいごに
おおむね満足のいくデザインリニューアルでした。本当はテーマ公開が密かな楽しみだったのですが、ZENO-TEAL同様、「記事の最初に画像が必須」って制約だと使いにくいと思うので今回は私用にチューニングしてしまいました。もうちょっと汎化した形でデザインが組めたらその際は公式ストアで公開したいですね。
さいごになりましたが、公開前にデザインレビューに協力してくれたうぃるさん、おかげさまで無事リニューアルに成功？しました。お忙しい中ご意見をいただきましてありがとうございました！
そしてなんと、うぃるさんも今日（昨日？）テーマ変更されたみたいです。色々勉強になると思いますのでこちらもどうぞ。
ではでは、最後までお付き合いいただきありがとうございました。
【追記】
現在、当ブログのスターボタンが機能していないようです。ご迷惑をおかけします。