【IE11】HTML側からのSKYPEクリックコールレイアウト無効化について

https://support.skype.com/ja/faq/FA801/skypekuritsukukoruwochu-metegoshi-yong-sarerufang-he

画像はSKYPEの公式サポートから

SKYPEを起動している状態でサイトを閲覧している時、
HTMLで電話番号が記載されている箇所があると、SKYPEのマークが自動生成されるとともに電話番号のCSSが変更されてしまうという、有り難くないクソ仕様がある。
意図したレイアウトが台無しになるため、画像で番号を用意しない場合には、修正を余儀なくされるものだ。

PCのブラウザ上に表示された番号をクリックして電話をかけるようなリテラシー高いユーザー層がターゲットではない場合は、サイトを散らかすだけの害である。ユーザーにSKYPE表示を切るようにブラウザ設定を変更させるフローはそもそも問題外。

基本的には下記のメタタグをHTMLのheadに追記しておけば無効化できるのだが、
IE11で無効化できない形が出てきたので対処法を記載してみたいと思う。
（FREEというピンク文字が追記されてレイアウトの邪魔なことこの上ない）
そもそもIEが消え去ればいい話ではあるのだが。

##IE以外のブラウザ用

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

##IE11用
読み込んでいるCSSファイルに下記の記述を追記。
フォントのカラーや書体、太字についてはサイト毎の指定にしないといけない。
自動生成されたCSSによる指定が要素を含んだ「span.～」の形なので、クラスセレクタだけ記述しても効かないらしい。

" data-sourcepos="26:1-43:93">

span.skype_c2c_free_text_span {
   display:none !important;
}
span.skype_c2c_text_span {
   color:#000000 !important;
   font-weight:bold!important;
   font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif !important;
}
img.skype_c2c_logo_img {
   display:none !important;
}
</style>```

JavaScriptで特定classをもったコードを消去する方法もあるだろうけど、
内包してる番号そのものまで消されたら元の木阿弥なのでCSSでの整形という方法をとった。
あまりサイトの仕様を変えたくない事情があったり、
どうしても電話番号には画像を使いたくねぇ！なんて場合にどうぞ。