TOPレイアウト変更
以前のななめストライプ背景に飽きたのと、カバー画像に合わせて雰囲気を統一したかったので、デザインを回収しました。

• 背景を薄グレーにする


• リンク色を黒色にする


• リンク整理


• サイト名も変更しました


• SPハンバーガーメニューの色を変更（かわたれ時のイメージ…）

新サイト名は「お湯をそそいで３分」ですが

SP表示はすっきりさせたいので、ヘッダーのサイト名表記は略称にしてみました。

展開時メニューの変更
中央寄せレイアウトだったのを左寄せに統一しました。

また border や透明度を好みで調整しました。



あと、創作サイトで copy 表記が入るとかっこいいため、コピーライトも追加してみました。

デフォルトフッターでフォレストページプラスさんの表記もあるため、法的にどのような扱いになるのかが謎ですが……問題があれば消します。

SP下位ページのアイコン
SP表示時、各下位ページに主要なページへのリンクを追加しました。

ハンバーガーメニューを開けばすべてのリンクが見れますが、タップ数の少ないUIが好みのため…



ソースを見ると Fontawesome 4.7 が導入されていたので、そちらのアイコンを使用しています。

記事ページの画像サイズ調整
いままでスマホ更新 & スマホ閲覧ばかりだったので気づいてなかったのですが

PC閲覧時に添付画像がむちゃくちゃデケェことが判明したので、 max-width 値を指定しました。すっきり…

ギャラリーのボタン変更
元のデザインもかわいいのですが、全体に合わせてここのボタンも色変更しました。



デフォルトのデザインだと shadow 系の指定がたくさん入っているので、一個一個打ち消しデザインをカスタムCSSに書いていきます。

PC表示時のレイアウト調整
サイト名表記のフォントを変更しました。

テーマ変更でHEAD編集ができますが、<link>タグを記述しても無視されてしまうため、<style>で @import を使用してGoogleFontsを呼び出します。

追尾ヘッダー
PC表示のヘッダーメニューは、 position: sticky に変更して追尾型にしました。



メインメニューはデフォルトだとSP展開時と同じテキストリンクが自動生成されますが、これをアイコンに置き換えました。

• CSSで li:nth-child(X) をひとつひとつ指定


• 元のテキストリンクを非表示


• ::after 要素でアイコンを指定

アイコンは content で指定します。

Fontawesome 公式で各アイコンごとの文字コードのチートシートが公開されているため、そちらを参照します。