他サイトからプラグインなどを導入した時の注意事項

紹介しているプラグインを導入したら表示が上手くいかない。そういうコメントを頂く事もありますし、一番大きな点は自分のサイトのソースをコピペなどで使っている人もたまにいると思うですが、自分の Google Analytics のソースコードまで持っていちゃってる人もいるんですよね...

もちろん自分のアクセキログに収集されちゃってるわけなので少し困っちゃってます;;

なので今回は、プラグインなどを導入したいけど知識があまりないんです...って方は是非読んで頂きたいと思います。

…ここからが続き

プラグインを導入したが表示が上手くいかない

こちらの要因は CSS の競合や上書きで表示がおかしくなる事が殆どだと思います。

1. 最初にやっておく事

プラグインをダウンロードしたファイルのみで表示確認や動作確認を行って下さい。
ここで表示ずれが起こってる場合は配布しているサイトに原因があるか、対応ブラウザ外って事なのでそれは先に認識をしておく必要があります。

2. 自分のサイトに導入した際に表示がずれてしまう

1. で大丈夫であれば、 CSS の競合や上書きが原因だと思います。
競合や上書きを説明するのはちょっと難しいのですが下記画像を見て下さい。

説明画像 1

こんな感じで構成されたサイトがあったとします。そして下記画像の用に #contents p に margin-bottom: 1em; を先に指定しておく事はけっこうあるかと思います。

説明画像 2

そして問題なのが、他サイトからもってきたプラグインをこの #contents 内で使いたいとします。

説明画像 3

すると上記画像の用に .plugin 内の p 要素まで影響を及ぼしてしまうんですよね。

配布している段階では .plugin 内の p に margin-bottom: 1em; を指定しないのに、自分のサイトにもってきた際に margin が効いてしまい、表示がズレてしまうって事です。
なのでプラグインを導入する際、上記の説明で言うと下記 CSS のを先に記述しておけば問題は解決出来ます。

#contents .plugin p	{ margin-bottom: 0; }

実際はもっと複雑で分かりにくくなっているはずですが、要はこういう事が原因で競合や上書きがおきてしまう事もあるので注意して下さい。

表示確認

これは念の為ですが、表示確認は Dreamweaver やホームページ・ビルダー等のプレビュー画面でしないで、ブラウザ(IE Firefoxなど)で行って下さい。

コピペでもっていく際

最初にも説明したように Google Analytics のアクセキ解析を使っているはけっこう多いと思いますので Google Analytics のアクセキソースコードは先に認識しておいて下さい。

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4230783-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

UA-4230783-1 と書いてある部分が各サイトで違う部分なんですが、それ以外はどこのサイトも同じですので上記のようなソースを見かけて自分のサイトにはもっていかないようにして下さいね。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article