2015年6月の記事一覧

前のブログで書いたのですが、文字の縁取りを設定したら、Firefox、IE、Operaでは問題なく、Chrome、Safariでは、縁取りが太くなって、かっこわるくなってしまいました。

 

元々、

http://liginc.co.jp/web/html-css/css/70065

を参考に、IE、Firefox,Chrome、Safariに対応するように記述したのですが、上記のサイトそのままなのですが、下記のように記述しました。

/*-------------文字縁取り ---------*/
  filter:dropshadow(color=#02258a,offX= 0,offY=-1)
  dropshadow(color=#02258a,offX= 1,offY= 0)
  dropshadow(color=#02258a,offX= 0,offY= 1)
  dropshadow(color=#02258a,offX=-1,offY= 0);
  -webkit-text-stroke-color: #02258a;
  -webkit-text-stroke-width: 1px;
  text-shadow: #02258a 1px 1px 0px, black -1px 1px 0px,
               #02258a 1px -1px 0px, black -1px -1px 0px;

 

太くなるなら、Safari、Chromeの部分の記述Webkitの部分を細くしてやれ!と思って、1pxから0.5pxってやってみたら、Chromeとかはいい感じになったのですが、次は、Operaの縁取りが細くなりすぎて、スマホだとよく見えなくなってしまいました。

 

僕の結論としては、text-shadowだけの記述にした方が、上記の問題が起きないってことで-webkitの部分は削除しました。ってことで下記のように変更

/*-------------文字縁取り ---------*/
  filter:dropshadow(color=#02258a,offX= 0,offY=-1)
  dropshadow(color=#02258a,offX= 1,offY= 0)
  dropshadow(color=#02258a,offX= 0,offY= 1)
  dropshadow(color=#02258a,offX=-1,offY= 0);
  text-shadow: #02258a 1px 1px 0px, black -1px 1px 0px,
               #02258a 1px -1px 0px, black -1px -1px 0px;

 

ちなみに flterと、dropshadowは、IE8,9の対策です。

 

 

自分のサイトで、項目行の、背景にグラデーションをかけたものと、イメージを指定しました。

 

スマホ用の設定(max-width指定)もして、できた!って思ったら、スマホでは、グラデーションが縞模様に・・・・・・・・

 

内容はこうです。

何~~ってなったのですが、スマホ用で設定したのが、背景画像を、幅に合わせて縮小表示しようと思って、background-sizeを指定しました。

@media (max-width: 640px) {
  .h3  {
     font-size:110%; 
    moz
-background-size:30% auto;
    background-size:30% auto;
  }
}

この時点に完璧に失念していたのですが、グラデーションもイメージと同じ扱いになるため、background-sizeの指定にひっかっかってしまうのです。

 

その為、グラデーションも高さが縮小表示され、縞模様になってしまった・・・・・(-_-;)

 

恥ずかしい失敗でした。

 

結構きれい!って感じで評価されていたので、Googleの日本語Webフォントをブログと、ホームページに入れてみました。

 

組み込むこともできるみたいですが、12.6MBもあるみたいですし、変更があった時に、また組み込み用に軽量化して、入れるのが少々めんどくさいので、googleから呼び出す方式にしました。

 

CSSに

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
適用させたいところにフォント指定します。今回は、全体ってことで、bodyに適用
body {
     font-family: 'Noto Sans Japanese', "メイリオ", serif;
}
って感じにしました。自分のブログを例に、どうなったかの比較
before
font_before.png
after
font_after.png

と、言っても、WordpressからMTに今は逃げていて、バーガーメニューってやつをちゃんとやってみているところです。

 

animenuってやつを、グローバルメニューに使って、CSSとかを、サイトに合うように改造中・・・・・

 

そこで、初めて、疑似要素(:before、:after)と、hover等の要素を同時に指定できるやり方があることに知りました・・・・

 

これは、結構恥ずかしい事なのだろうと思いつつ、今までアホみたいに知らずにやれたな~~と、また反省・・・・

 

ちなみに。リンクのa要素の場合、

a:hover:after

て感じに書けば、afterのhover要素を指定できます。

 

このページの上部へ

ネットワーク、パソコン サーバ設定

ネットワーク構築ホリテック

 

紆余曲折しながら、独立して中小企業様向けのネットワーク構築
保守、パソコン サーバ、設定運用管理を行っています。ホームページの作成も行っています

ホームページ

 

facebook

 

icon icon

 

マウスコンピューター/G-Tune マウスコンピューター/G-Tune Microsoft Store (マイクロソフトストア) Microsoft Store (マイクロソフトストア)

サイト内検索

にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログ ネットワーク・SEへ
にほんブログ村

最近のピクチャ

  • font_before.png
  • MOM_error.png