◆【2022/06/21追記】2017年7月27日に「セットポジション」を全削除しました。再築に向けて模索している頃の記述です。
ヘッダ画像と背景
先日、ヘッダ画像を挿入してみました。自宅の27インチPCやスマホでは、さほど不自然さはありませんでしたが、勤務先のノートPCでは「セットポジション」のサイト名と画像だけで埋まってしまいます。1日たたずに外しました。
なくても不自由することはありませんので、当面はヘッダ画像は使いません。使う場合も細めのものにしようと考えています。背景画像も今のところ必要はなかろうと思っています。
とりあえずメニューバーは設置しましたが、メニューから展開されるコンテンツがありません。というわけで、旧「セットポジション」から「賽は投げられた」のページを取り込んでみました。
「賽は投げられた」は短めのページですからデモ1号として最適です。今回スタイルシートに追加したのは、見出し（H1とH3）、ハイパーリンク、注釈部分のフォント指定、強調、横線の5件です。
Twenty Sixteenでは、見出しのうちH2が左コラムやこのページの下の「コメントを残す」に使われていました。このため「賽は投げられた」のページではH2を使わず、H3で対応しています。H3は旧「セットポジション」のH2と同じです。
◆【2022/06/21追記】この対応は結果的に失敗でした。テーマの「Twenty Sixteen」を捨てたからです。以下、ごちゃごちゃ書いていますが、リンクの色指定は外しています。
リンクの色指定
H1については旧「セットポジション」を踏襲せず、#800000（茶）の色指定にとどめました。当初は#800080（紫）を試しましたが、#800080は訪問済みリンクテキストのWeb標準と同じ色です。
ページタイトルにはリンク設定されていませんが、ページを開けば自動的に訪問済みになるわけです。あまり問題は生じないはずですが、やはり別の色を使うべきだろうという結論です。なお、上の紫は実際には#9900FFです。
ハイパーリンクについては、旧「セットポジション」のスタイルシートをそのまま埋め込んでみました。
a:link {color: #0000FF}
a:visited {color: #800080}
a:hover {color: #FF0000; text-decoration: none}
a:active {color: #FF0000; position: relative; top: 1px; left: 1px}
このうちhover時とactive時の色指定（赤）が機能しませんでしたので、機能しない部分は削除しました。結果として、hover時とactive時のフォント色は初期設定のままです。
a:link {color: #0000FF}
a:visited {color: #800080}
a:active {position: relative; top: 1px; left: 1px}
active時のpositionは、クリックするとリンク部分のテキストが右下の方向に1pxだけ移動するというものです。クリックしたという実感がありますので、私はこの設定がお気に入りです。
現状で課題として残っているのは、hover時のフォントがメニューバーと末尾のナビゲーションでは青、右カラムでは緑、という具合に統一性に欠けることです。同一ページで異なるのは具合が悪いわけで、より細かな指定が必要になるようです。
◆【2022/16/21追記】テーマを乗り換えた結果なのか、そもそも指定を外したのか、今では不統一は解消されています。
コメント