WIKIの見た目変更とwebフォントの微調整

本日はワタクシの管理しているWIKIの1つと、拙websiteやblogger、tumblrで使用中のwebフォントの微調整をば。

WIKIの見た目変更

先日拙websiteやblogger、tumblrのマイナーチェンジを施したので、WIKIの方も同じような見た目にしてみたく。
別段特別なことをしたわけでもなく、単純にWIKIの設定項目の「CSSカスタマイズ」にてCSSを設定したのみ。

デフォルトの見た目

CSS設定後

因みにこのWIKIは、@WIKIを利用している。

webフォントの微調整

拙websiteやblogger、tumblrでは、SNSアイコンやページ右下の「scroll to top」ボタンやサイドメニューの「dropdown」マークをwebフォントLigature Symbolsにて表現している。しかしこのLigature Symbols、IE未対応（IEがLigature機能に未対応というべきか）ゆえ、IEでは「scroll to top」ボタンや「dropdown」マークがそのまま文字として表示されてしまったので、読込ませ方を変更して、IEでは現れないようにした。

具体的には、CSSにて

.lsf-icon:after {
content: 'dropdown';
（以下略）
}

と指定していたものを

.lsf-icon:after {
content: attr(title);
（以下略）
}

と変更し、「dropdown」マークを表示したい箇所のタグに

<span class="lsf-icon" title="dropdown">works</span>

と、title属性にて指定すると、未対応のIEでは現れないようになる。

詳細は、Ligature Symbolsページ下部の例示をご覧あれ。