テンプレートの調整をしました
快適な閲覧環境を提供するために、テンプレートの調整をしました。
- 記録目的で公開しているため、読みくい場合があります
追記 はこの記事を公開した日に実施し、指定した日付に更新内容を追記した項目を指します追加 は指定した日付に実施した項目を指します- 更新内容を後日追記した項目があります、追記した日付はins要素内のdatetime属性をご参照ください
2015年9月15日
ヘッダー
- ヘッダーの背景がメニューを含めた全体に適用されるようになった
- これに伴い、ヘッダーメニューの背景をシルバーから半透明に変更
- ヘッダーの高さ基準を「ヘッダー自体」ではなく「ヘッダー全体」の高さに変更
- ヘッダーメニューの文字を少し小さくした
- ヘッダーの高さを維持するため、スマートフォンとPCのヘッダーの高さを統一した
内容
- タイトル部分を大幅に変更
- 枠を設けて、そこにタイトルやパンくずリスト、公開日などが入る
- タイトルに付いた枠線を破線に変更
- リンクの色を見やすいように変更
- 目次のスタイルを変更(横に枠を追加)
- サイドバーの余白を縮めた
システム
- ヘッダーメニューの位置をヘッダー基準の絶対値に変更
- トップページコンテンツ、フッターコンテンツで共通する部分をboxクラスにまとめた
- トップページコンテンツ、フッターコンテンツの見出し、目次の見出しをh2からh3へ変更
2015年9月16日
内容
- タイトル部分の下方向に余白を追加
2015年9月17日
内容
- 脚注のスタイルを変更
2015年9月21日
負荷の軽減、高コントラストを目的に、調整を行いました。
ボタン
- 角にあった丸みをなくして角ばるようにした
- 右下のボタンのグラデーションを省略
内容
- タイトル自体の枠線をタイトル部分全体の下部へ移転
- タイトル部分の枠線を省略
- タイトル部分のリンクの色や目次タイトルを(マウスに)乗せた色を調整
- 見出し、定義リストのタイトルにアクセントカラーが付くようになった
- テーブルの背景を黒系に変更
- 一部の見出しやテーブル、ボタンなどに影を追加
- 立体感を出すために見出し3、見出し4のデザインを変更→試験的に実装しているため、今後変更の可能性があります
- 見出し6の枠線を省略
- 内容を超えてしまった(オーバーフロー)場合、メニューが下部に配置している場合(スマートフォンや幅の狭いタブレット向き)に限りスクロールできるようになった
メニュー
- 枠線を省略
- 影を追加
ページ修正
32×32サイズのアイコン素材:副産物の並べ方を変更(長すぎてはみ出ることがあるため)
2015年9月22日
9月21日で行った分の修正を行いました。
ボタン
- 一部環境で角丸が付いている不具合を修正
- 右下のボタンの影を濃く、広くした
ヘッダー
- 今いる位置に線が付くようになった(linear-gradientで再現しています)
内容
- 見出し3、見出し4のデザインを変更(下半分色を変えた光沢デザインからフラットなデザインに)
- タイトル、見出し3、見出し4の影を濃くした
- 見出し6の枠線を復活(省略前は実線、今回は破線にしました)
システム
- ページタイトルのフォントサイズが初期設定に頼るようになった
2015年9月24日
不具合や見栄えの修正を行いました。
ヘッダー
- 幅を伸ばすとタイトルが端へ寄ってしまう不具合を修正
内容
- タイトル、見出し3、見出し4の影を2倍濃くした(見出しと影が一緒みたいになってしまうため)
システム
- スマートフォン用のアイコンを設定
2015年9月26日
内容
- ページヘッダーの余白を調整した
- 目次内の文字を小さくした
- ページフッター(#main_content footer)を新たに設けて、公開や更新の日付を入れるようにした
メニュー
- タイトル、項目共に文字を少し大きくした
- メニューが下部に付く場合、内容(上方向)との余白を確保した
2015年9月30日
半透明の調整について
- 影や一部要素の背景色では、半透明の黒を使って透明度を調整しています(透明度が1の場合は不透明、0の場合は透明)
- 今回の調整で、透明度を0.5、0.25、0.125・・・と2の-n乗に設定しました(特に大きな意味はありませんが、カラーコードが16進数を使っているため、それに合わせる形としました)
内容
- ページヘッダー、見出し3、見出し4の背景を背景アクセントカラーに設定
- 背景アクセントカラー設定に伴い、ホバー状態の背景色を調整
- 各種コントロール(現在ボタンのみ使用)、figureタグ(現在未使用)、ページヘッダー、見出し3、見出し4などの影を調整
メニュー
- 背景を背景アクセントカラーに設定
- 背景アクセントカラー設定に伴い、ホバー状態の背景色を調整
- 影を調整
システム
- 背景アクセントカラーを設定
背景アクセントカラーは、見出しやメニューの背景に使うもう1つのアクセントカラーです - 作品にアクセントカラーを設定