あきやん 's journal

アニメ、ニュース、ソフトとかの備忘録。

いまだCSSの微調整。なんか色々と、抜けがあるので。

いまだCSSの微調整。

なんか色々と、抜けがあるので。
かつてのブログやらホームページやらはフレーム構造で、 区切った枠の中に表示する中身を別々に作ってたので、 チェック機能が少ないHTML作成ソフトやブラウザでも、 割と単純に出来てたけど...今はCSS全盛です。

で、ブログサービスとかで最初から用意してあったりするCSSテンプレートを使ったり、 色々書き換えたりして使うけど...上書きしてるのでもう、どこがどこまで効いてるのかタコになっちゃってました。

でも最近は、ブラウザの機能で要素の詳細を表示とか出来るので、 チェックするのにすごく楽になりました。

といっても、やっぱり抜けます。
表示がおかしい時に初めて分かる感じかな。

アンカーがおかしくなったところを発見。

f:id:t_aki:20150504194521p:plain:w200

最初は長文引用部分*1の中の、脚注アンカーの色の変更を忘れたのに気がつき修正。

ここは面倒くさいことをしてたりして。

キーワード以外のアンカーをすべて色変更したかったけど、上手いやり方が見つからなかったので、 全部色変更して、キーワードだけ元に戻してました。

  • 修正後。
blockquote p a, .entry-content p a,
 .entry-content p q a
{
/* 先に p要素をピンク色で全指定。  
その中からキーワードだけ抜き出し元の色に修正 */
font-family: "Didot-Bold","HoeflerText-Regular",
"Baskerville","GillSans",
"HiraMaruProN-W4","HiraMaruPro", serif;

text-decoration:none;
color: #ff6699; 
}
blockquote p a.keyword, 
.entry-content p a.keyword
{
text-decoration:none;
color: rgba(30,30,30,0.7);  
}

で、何気なく脚注*2を見たら...脚注の中に入った、キーワードアンカーの文字が別の文字に。

  • 修正後。
.entry-content  pre.code, span.footnote-text, 
span.footnote-text a,span.footnote-text a.keyword
{
-webkit-font-smoothing:subpixel-antialiased;
font-family: "HelveticaNeue","HuiFontP",
"HuiFontP109",
"HiraMaruPro","ヒラギノ丸ゴ ProN",
 "メイリオ", "Meiryo", fantasy;
}

f:id:t_aki:20150504200328p:plain:w200

もう抜けは無いかなぁ...まだまだありそうな気がする。

*1:ブロッククォートね

*2:フットノート