CSSでWEB Fontを使ってみた。
CSSはこんな感じ。
----------------------------------------------------------------------------
@font-face {
font-family: 'myWebFont01'; /* お好きな名前にしましょう */
src: url('font/AMSTT.eot'); /* IE9以上用 */
src: url('font/AMSTT.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
url('font/AMSTT.woff') format('woff'), /* モダンブラウザ用 */
url('font/AMSTT.ttf') format('truetype'); /* iOS, Android用 */
font-weight: normal; /* 念の為指定しておきます */
font-style: normal;
}
.myWebFontClass {
font-family: 'myWebFont01';
}
.wfc-01 {
font-family: 'myWebFont01';
font-size: 300%;
margin-top: 0px;
margin-bottom: -10px !important;
}
.wfc-01 a{
color: #000000 !important;
}
.wfc-01 a:hover{
color: #cccccc !important ;
border-bottom: 0px ;
text-decoration: none ;
}
----------------------------------------------------------------------------
センタリングのため読みにくいが…
WEB Fontはテーマ内のWP-Contents内に格納してある。
あと、CSSでレスポンシブルを構築せずに２層で作った場合、htaccessでブラウザサイズを監視しURLを振り分けたりしているが…
htaccessの設置が面倒な場合、下記のコードでアクセス時に確認させる方法もあるようだ。
----------------------------------------------------------------------------
<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
if(confirm('スマートフォン用のサイトがあります。表示しますか？')) {
location.href = 'ここにURL';
}
}
</script>
----------------------------------------------------------------------------
これはheader情報として書き込む。
まあ、使えるかな…
写真はシソ科の塊茎植物「Plectranthus ernstii」ね。
可愛い。
