パソ遊 "パソコン・インターネットはおもしろい！"

(1)クライアント（見ている側）で変更する場合
自動的にAdd-on機能がインストールされた状態ですので、Webブラウザのツールバーにスカイプのアイコン表示がある場合は、（ない場合、右のほうにある「＞＞」表示をクリックし、スカイプアイコン表示が出てきたら）それをクリックし、別ウィンドウに出てきた「番号をハイライト表示する」のチェックをはずせばOKです。
スカイプのAdd-onを無効又は削除するのも１つの方法です。（Webブラウザ→ツール→インターネットオプション→プログラムTab→アドオンの管理より）

---

(2)サイト側での対応の仕方
①スカイプ表示にしない場合
これは、電話番号を半角で書いてる場合、書き方で異なるようです。
つまり、全角で書くか半角でもハイフン(-)の後ろにスペースを入れるといいようです。（私のところはそれでOKでした)他にも、普通に書いても大丈夫な場合があるようです。今回はこんなところで次に行きますが、時間があれば皆さんも調べてみてください。
いままでは、私も、何気なく半角で書いていたので、同じようにスカイプ表示されていました。しかし、表示は崩れていなかったので、そのままにしていました。
しかし、IE8を入れてみたら（仕様変更した記憶はない？？定かではないが）崩れて番号が見えない部分が出てきてしまった為、どうするか？・・・
検索しましたがクライアント側での対処法は見つかりましたが、以外と困っている人も多く、又、サイト側のものは発見できず、考えて見ました。
最初思いついたのは、画像で表示する方法ですが、いちいち画像を作るのも面倒と考え（不精なもので）、文字を半角（数字）で書いてるものを全角（文字）でやってみたらどうかな？と・・・早速、チャレンジ→うまくいきました。
意外と簡単でしたね。表示は大きくなりましたが、見やすくなったと自己満足。
その後、半角でもスペースの入れ方で表示されないことを発見しました。（確認はIE8のみですが） ②スカイプ表示にしておき、番号が全て見えるようにする場合
（IE7・IE8では番号が半分ぐらいしか見えなくなることがある）
＊IE6では大丈夫のようです。 方法1
表示が全て見えるようにCSSでwidth属性を調整
ここで、注意点はspanなどのインライン要素にはwidth属性が効かないということ。私もこれで結構悩んだ時がありました。
例)
ブロック要素の場合（親のブロック要素幅が関係）

インライン要素の場合
携帯電話090-3223-7787
では、どうするかというと
CSSで、「display: block;」を指定すればインライン要素でもwidth属性が効く。
例1)
HTMLソース

<span class="block">携帯電話</span>
<span class="block">090-3223-7787</span>

CSS

.block {
	display: block;
	float: left;
	width: 150px;
}

下記が実際の表示です。
携帯電話090-3223-7787
以上。これでwidth属性も効きます。次の要素に「clear: both;」入れないとレイアウトが崩れる場合があります。
ご承知かもしれませんが、上記のspanはブロック要素となりますので「float: left;」と「clear: both;」を使うことが多いと思います。詳しくは検索してみてください。
方法2
サイドバーなどでブロック要素の場合、width・margin・padding属性等を変えたくない時は、番号のみ改行したり、前にある文字を削除又は変更したり（短く）、CSSでフォントサイズを調整することにより表示できる場合があります。あくまで微調整です。 様は、表示する幅が重要なんですね！（IEの場合）（2009/05/15現在）
（追加）Firefoxは、インストール時に（詳細設定で）アドオンのSkype extension for Firefoxをチェック入れた場合、アドオンが追加され、有効になっていると表示が全て見えないようです。（下記の様になる）

そこで、
例2）
まずは、下記が実際の表示です。（表示を先にしたのは、なぜか後ろの方におくと、表示されないようだからです。）

携帯電話

090-3223-7787　

HTMLソース

<dl class="block0">
<dt>携帯電話</dt><dd>090-3223-7787　</dd>
</dl>

CSS

.block0 > dd {
    padding: 5px;
}
.block0 > dt {
    float: left;
    width: 120px;
    padding: 5px;
}
.block0 {
    margin-left: 25px;
    padding: 5px;
}

タグを変え、電話番号の後ろに全角のスペースを入れてあります。（前でもOKです）当然、CSSも変えてます。
どうでしょうか？ちなみに、上の例では全角スペースがポイントです。
但し、この例2はIE6の場合dt・ddタグにより、表示が2列になります。（例1は1列）
今のところ、FirefoxとIE6どちらを優先させるかですね。（IE8・IE6・Firefoxで確認済み。IE7は確認しておりません）とりあえず、ここまで！