メインサイト Neo's World のデザインを変更した

メインサイトといいつつ、開設開始からの日数が一番長いだけという Neo's World だが、2018年2月4日にデザインを変更した。今回はその詳細を書き留めておく。

最後にデザイン変更したのは2016年2月12日だったようだ。元々のデザインからはあまり変えず、SCSS に移行したのが最後かな。作成したコードはサイト自体からソースを表示してもらっても良いし、GitHub リポジトリに上げているのでコチラでもドウゾ。

カラーリング

今回は、2007年頃からのマイブームだった「ショッキングピンク (#ff0099 あたり)」を封印してみた。

全体のカラーリングは、Themify という WordPress 向けテーマの配布サイトで見かけた「Magazine」というテーマを参考にした。「Web クリエイターボックス」の Mana さんが携わっている模様。

自分がよく好んで使っていた #0088ff 付近の青色とはまた違い、もう少しだけ暗めの大人っぽい色 #0088bb あたりを使った。

その他、背景色や文字色も、完全な白・完全な黒にはせず、GitHub のカラーリングなどを参考に、#f7fbff とか #000408 とかいったように、赤に対して少し緑、緑に対して少し青を足し込むような色合いにして、「ブルー感」を出した。

全体のスタイリング・設計

拙作の Neo's Normalize によるノーマライズを利用し、自分が管理しやすいようにした。

今回からは SCSS のミックスイン機能を利用し、より管理が容易になるよう工夫した。よく使うパーツをミックスインとして定義しておき、組み合わせて使えるので良い感じ。特にボックス幅を可変させる定義とかはミックスインでかなり分かりやすくなったと思う。

また、ブレイクポイント指定を Bootstrap 4 と同様の数値で用意しておいた。メディアクエリの操作をする時、広く使われている Bootstrap のサイズに合わせてしまった方が楽だと思った。

あと、このブログでも何度か紹介している、レスポンシブルにフォントサイズを指定する仕組みを導入した。

なんかもう最近は 1rem = 16px という前提がどのブラウザでも標準的になって、昔みたいにフォントサイズをピクセル指定することをアレコレ言う勢もいなくなった感じがあるので、ベースサイズを 16px にし、ウィンドウ幅を広げると最大 20px にまで拡大するようにした。その中間がシームレスに拡大・縮小するようになっているので、リサイズするのが気持ち良い。ｗ

部品ごとの話

XREA の広告はずっと貼っているのだが、もう何年も前から img 要素版の広告コードが無効になっているっぽい。運営に何も言われていないし、サイトも消されていないので気にせずやっているが…。ただ、Chrome とかで空の img 要素に罫線が付いて表示されるのがアレだったので、onerror 属性を指定して読み込みエラー時は非表示にするよう変更した。

見出しに関しては、Neo's GitHub Pages で作ったデザインを再利用している感じ。

あと、フッタの罫線に下向きの三角というか、シェブロン記号みたいなのを配置して、コンテンツ領域の幅だけ水色罫線にし、そこからはみ出る分は灰色罫線にしたところはちょっと苦労した。

シェブロン記号は擬似要素を組み合わせて作ったが、中央に配置するのが難しかった。水色の罫線部分となる擬似要素を回転させて配置し、そこに背景色と同色の擬似要素を更に重ねて V 字の罫線を実現している。

それ以外の罫線は、フッタの親要素で画面全体に伸びる灰色の罫線を配置し、子要素でコンテンツ幅分の水色の罫線を配置した。

フッタ内のコンテンツを両端に配置するのとか、作成日・更新日のアラインメントを取ったりするのも地味に苦労した。

JavaScript を仕込むようにした

今回の大きな変更の一つ、JavaScript を全ページに仕込むようにした。一部のページは section 要素に id を指定し、ページ内リンクを用意しているのだが、このページ内リンクへのリンクを示すためのアンカー記号 # を見出し要素に配置するようにした。

元々は AnchorJS というライブラリがこの機能を実現していたのだが、自分の場合は section 要素に id 属性を付与しており、そのリンクを直下の子要素である見出し要素内に置きたかったので、色々組み替える必要があった。

最終的に、見出し要素にホバーすると、その見出しの文言の末尾か、もしくは左右に余白があればコンテンツ領域をはみ出した左側にアンカー記号 # を配置するようにした。意外とこのスタイリング・配置に苦戦した。でもなんとか Bootstrap のドキュメントページとかで見られる「あのアンカーリンク」が実現できた。

Firefox の Scrollbar Anywhere アドインがトップページを狂わせた

通常の見出しは、画面左端から青いバーが伸びてきているデザインにしてあるのだが、トップページのみは画面右端から伸びるバージョンも作っている。画面の左右から見出しの背景領域が伸びてきていて、ちょっとカッコイイ感じ。

コレはネガティブマージンを使って実現しており、作った直後は、横スクロールバーも表示されていないし良い感じかな〜と思ったのだが、Firefox の Scrollbar Anywhere アドインで右クリックしながらコンテンツ部分を左右にドラッグすると、なぜか横スクロールしてしまっていた。

どうもこのアドイン、ドラッグしてスクロールする時に対象の要素に scroll-behavior: smooth を勝手にブチ込むらしく、コレが悪さしているようだった。

最終的に、コンテンツ部分全体に overflow: hidden を仕込むことで回避できた。なぜか overflow-x: hidden ではダメだった。

そうそう、作り終わってから気付いたが、float や display: inline-block でカラムを作ったところは CSS Grid 使ったら良かったかも。気が向いたら直そうかな。

以上。久々に大幅なデザイン変更で楽しかった。