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