Stylesheet(CSS)」タグアーカイブ

タイムラインコンテンツを作る

仕事履歴だとスキルシートだのコンペ歴だの資格一覧だの諸々、タイムライン作った方が情報を伝えやすいものがある。
せっかくなので見栄えがよろしいタイムラインコンテンツを作ろうと思うところなので、組み込んでみた感じを見てほしい。
全てレスポンシブ対応!

組み込むのって、既存のCSSの影響受けるから、結構時間かかるんデスヨ。
class名既存とよく被るに外側をdiv#XXXで囲って区別してるわけではないしね。

だが、『全部一緒のページに表示させられるかな?」という冒険心がここにある。
続きを読む

seesaaブログのヘッダーバナー

いつの間にか追加されていたseesaaブログの上部のバナー。
あいつのせいで勝手に広い幅を固定されて今まで使えてたデザインが何だかうまいこと行かなくなっていたり、ちょっと面白くない。

自分のデザインに少し合わせてもらおうという魂胆。
合わせるのに使った内容を記載しておく。
続きを読む

IE6でSyntaxHighlighter Evolvedでハイライトされない

SyntaxHighlighter Evolvedをハイライト表示しようとすると、
IE6でハイライトされないかと思います。

CSSの表記ミスです。
残念ながら記載する順番を間違えてる。
(※IE6を考えなければ問題ない)

そのための対応としては、
表示CSSを
たとえば、ここだと『shThemeDefault.css』を修正する。

.syntaxhighlighter .line.alt2を指定したあとで、

/* Highlighed line number */
* html .syntaxhighlighter .line.highlighted .number
{
	『.syntaxhighlighter .line.highlighted .numberで指定した内容』
}
/* Highlighed line */
* html .syntaxhighlighter .highlighted
{
	『syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 で指定した内容』
}

因みに念のため、CSSハックを使っているので、嫌いな人は別の対処法を考えてください。

※対象:バージョン2.3.1以上

IE6でSyntaxHighlighter Evolvedが崩れる

気になって寝れずうっかり作業してた。

現在のスキンテーマがwp.vicunaを基盤にしているせいかもしれないが、
IE6で巧く表示されない。
そのときの対応。

/wp-content/plugins/syntaxhighlighter/syntaxhighlighter/styles/shCore.cssに追加

* html .syntaxhighlighter .line .content{
	height:1.2em !important;
	margin:0 !important;
}
* html .syntaxhighlighter .ruler{
	width: 100% !important;
}

多分shCore.css.gzも作り直した方がいいんだろうと思うよ。

何の迷いもなくCSSハックを使っているので、嫌いな人は避けたらいいです。

追記日:2009.11.18 0:58
※バージョン2.3.1になったため、この対応不要になりました。
代わりにIE6でSyntaxHighlighter Evolvedでハイライトされない問題が起きるようになりました。