試しに「賽は投げられた」をうp

先日、ヘッダ画像を挿入してみました。自宅の27インチPCやスマホでは、さほど不自然さはありませんでしたが、勤務先のノートPCでは「セットポジション」のサイト名と画像だけで埋まってしまいます。1日たたずに外しました。

なくても不自由することはありませんので、当面はヘッダ画像は使いません。使う場合も細めのものにしようと考えています。背景画像も今のところ必要はなかろうと思っています。

とりあえずメニューバーは設置しましたが、メニューから展開されるコンテンツがありません。というわけで、旧「セットポジション」から「賽は投げられた」のページを取り込んでみました。

「賽は投げられた」は短めのページですからデモ1号として最適です。今回スタイルシートに追加したのは、見出し(H1とH3)、ハイパーリンク、注釈部分のフォント指定、強調、横線の5件です。

Twenty Sixteenでは、見出しのうちH2が左コラムやこのページの下の「コメントを残す」に使われていました。このため「賽は投げられた」のページではH2を使わず、H3で対応しています。H3は旧「セットポジション」のH2と同じです。

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時のフォントがメニューバーと末尾のナビゲーションでは青、右カラムでは緑、という具合に統一性に欠けることです。同一ページで異なるのは具合が悪いわけで、より細かな指定が必要になるようです。