Opera-wikiの見出しが見出しってない件
id:edvakfさんからの指摘でOpera-wikiのh1が見出しとして不十分（要約）という指摘を受けました。
Twitter / edvakf: @momizine Opera-wikiのh1見出し ...
@momizine Opera-wikiのh1見出し (記事タイトル) をもうちょっと目立たせるにはどうしたらいいと思います? その他の要素に隠れてしまってる気がする。
Skin作りに関わったし、h1など見出し要素のベースは自分の案を採用していただいているので、現状を打破すべく考えてみたのが今回のエントリ。少しずつの変化を貼り付けているのは検討の過程段階を見比べることでどれが最も見出しらしいかを考慮してのことです。
現状
切り取っているので微妙かもしれませんがこんな感じです。
とりあえず見出しをでかく
デフォルトの文字サイズは1.6emだったので2emにして大きくしてみました。
#content h1 {
font-size:2em;
}
見出しの色を調整
大きくしたついでに文字色を変更してみる。
これで強調されるようになったかな？でもディスプレイの解像度によってはsiteNoticeの部分の名無しさんhogehogeのところが邪魔。
#content h1 {
font-size:2em;
color:#b11718;
}
siteNoticeを右側に移動
邪魔だけど消したら消したでアレなんで右に移動させてみました。
#content h1 {
font-size:2em;
color:#b11718;
}
#siteNotice center{
text-align:right !important;
}
さらに改行を加える
83行目に改行要素を加えてみました。
これでさほどsiteNoticeも気にならなくなりました。がfont-size:smallのため元のline-heightに無駄を感じます。
<span style="font-size: small"><center>誰でも編集できます。IPアドレスは表示されません。<br />一律"名無しさん"となります。</center></span>
さらに行間を減らしてみる
こんな感じ。
これでも気になるなら、Project:OperaWikiについて - Opera Wikiに名無しさんについての記載を追記し、siteNoticeには現在の書き込みに対しての状態を「名無しさん」（もしくはログインユーザ名）と表記してあげるとかになります。
#content h1 {
font-size:2em;
color:#B11718;
}
#siteNotice center{
text-align:right;
line-height:1em;
}
Operaにはソースを変更させて表示させる素晴らしい機能がありますので、Opera-wiki上で右クリックしてソースを表示させて、
<style type="text/css">
<!--
#content h1 {
font-size:2em !important;
color :#b11718;
}
#siteNotice center{
text-align :right !important;
line-height:1em !important;
}
-->
</style>画像を使わずに作業するとこんな感じになりました。
余談ですが、どこぞの病院のようにブラウザテストのような文字移動やら装飾も考えたのですが、スクリーンショットだけで伝わらないのでやめておきます。
以上CSSとちょこっとテンプレさわっての変更。id:amatanoyoが気に入ってくれたら採用されています。没ったらまた別な方法でも考えることにします。
