約一年ちょっとぶりにブログをリニューアルしたのでいくつかの変更点について備忘録がてら書き残しておきます。
ロゴ部分
これまでGoogle fontsにある「Lato」フォントでベタ打ちしただけでしたが、今回は自作SVGにしました。理由は単純にフォントを読み込むよりSVGのほうが軽いからです。
ベースフォントはfuturaなのですが、futuraのBが気に入らなかったのでDINからBだけもってきて置き換えています。
メニュー部分
ヘッダー部分にハンバーガーメニューを設置しました。
これまでヘッダーにはメニュー表示やナビゲーションを設置しておらず、スマホ版表示の場合のみ画面下にタブバー方式でメニューを表示していました。
ハンバーガーメニューを押すと表示されるメニューは、フッターにあるカテゴリリストと同様です。単純にサイト上部からもカテゴリ一覧に飛べるようにしたというわけです。
SNSボタン
SNSボタン部分は円状のデザインに変更しました。以前はシェア数を主体としたデザインでしたが、今回は各SNSアイコン主体のデザインです。
その他、Twitter公式がツイート数の提供をやめてしまったので、諦めていたツイート数のカウントを外部APIを使うことで実現しています。
メニュー部分
グレーの背景色をやめてボーダーのみで表す方式に変更しました。こちらのほうがブログ全体のデザインとして違和感がないのではないかと思います。
その他
他には右下にサイト上部に戻るためのスクロールボタンを付けたり、濃淡やちょっとしたサイズ変更などを施しましたが、私以外には気にならないレベルだと思います。
前回リニューアル時に意図というかある種の戦略をもってデザイン変更を行って、それが大当たりしたので今回は大きくはデザイン変更はしませんでした。メジャーアップデートではなくマイナーアップデートですね。
ソースレベルでもほとんど変わりはないです。本当はdisplay:flex;、フレシキブルボックスによるレイアウトに当初はチャレンジしたものの、未だにブラウザ間でflexのマージンパディングの%指定の解釈に違いがあり、クロスブラウザの観点から使用を断念しました。html5のmainタグなどもIE11を意識すると使えませんし・・・使いたいのに使えない、そういった消化不良感はこのブログに限らず昨今のWeb制作について回る問題ですね。
WordPress的にはちょっとした工夫をしまして、特定の投稿が通常の閲覧方法では閲覧できない仕様にしました。一覧や前後リンクに掲載されないだけでなく、RSSにも掲載されません。これが個人的には一番やりたかった変更点ですね。
今回作成したデザインが末永く使えると良いですね。