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ページ下部の例示をご覧あれ。

コメント

よく読まれている記事

CSSボタンでテキストを天地中央に揃えるとき、なぜボタン高と行高を一緒にするのか

FullCalendarの導入からカレンダー毎の色指定まで

FacebookページのフィードURLを取得しウォールを自サイトに表示