ブログパーツの基礎知識

2009年2月6日(金)
山下 美緒

ブログパーツを作る前に

 まずブログパーツを制作する前に、サーバーなどの環境の準備を行いましょう。

 まず、ブログパーツを公開するWebサーバーが必要です。このサーバーへブログパーツのデータ一式と、ブログパーツを表示するためのJavaScriptのファイルを設置することになります。サーバーは、通常のWebコンテンツを公開する際のサーバーで問題ありません。

 なお、Flashを使う場合、外部ファイル読み込みの構造によっては、サーバーへcrossdomain.xmlを設置するなど、クロスドメインのアクセス許可を設定する必要があります(参考:http://www.adobe.com/jp/devnet/articles/crossdomain_policy_file_spec.html)。

 さらに、こちらは必須ではありませんが、動作チェックの際に、ブログパーツとは異なるドメインのブログを準備しておくと、とても便利です。ブログパーツを作るときの注意点については後述しますが、ドメインが異なるサーバー間での動作チェックや、さまざまなブログテンプレート上で表示しても問題ないか、などの確認を行うことができます。無料で開設できるブログサービスなどもありますので、事前に準備することをおすすめします。

ブログパーツを作るときの注意点

 ブログパーツを作る方法は、ほとんど通常のWebコンテンツと同じですが、ブログパーツならではの注意すべきポイントがあります。

 まず、外部ファイルへのリンクや参照を行う場合、必ず「絶対パス」を使用する必要があります。ブログパーツの場合は、ブログパーツのデータをアップするサーバーのドメインと、ブログパーツが掲載されるブログのドメインが異なります。そのため、データの構造が変わっても、確実にファイルを参照できるようにするためです。

 次に、JavaScriptのメソッド名や変数名、id名などが、貼(は)り付け先のブログ上でバッティングしないように配慮する必要があります。1ページに複数のブログパーツが貼(は)り付けられている可能性なども考慮し、できるだけほかで使われていない名前をつける工夫をしましょう。例えば、接頭辞にブログパーツ名やドメイン名などをつけると、重なりにくい命名ができると思います。

 また、ブログパーツ内に画像やHTMLのテキストなどを含む場合には、CSSの設定についても気をつける必要があります。まず、ブログパーツからCSSを設定する場合、貼(は)り付け先のブログのCSSの上書きを防ぐために、HTML要素ごとにまとめてスタイルの設定を行わずに、できるだけ固有のid名をつけてスタイル設定を行いましょう。

 忘れがちなのですが、ブログ内で指定されているCSSについても注意を払う必要があります。例えば、サイドバー内のすべてのリンク文字に、一括して文字サイズや背景画像などが指定されている場合などは、ブログパーツ内の要素へ意図しないスタイル設定が反映されてしまいます。ブログパーツは、不特定のブログに貼(は)り付けられる可能性があるため、貼(は)り付け先のブログにどのようなスタイルが設定されているのかを事前に確認することができません。そのため、例えばブログパーツの背景色が「白」の場合でも「background-color:#fff;」を入れるなど、各要素の余白や、背景、文字サイズなどについては、できるだけ丁寧にスタイルを設定するほうが良いでしょう。

 最後に、ブログパーツ配布時の注意点として、ブログサービスによってはHTMLタグやJavaScriptの貼(は)り付けの制限があるため、貼(は)り付けることができない場合もあります。各ブログサービスの対応状況は、随時変更されていますので、その都度、主要なブログサービスについては対応状況をチェックしてから配布を行いましょう。

株式会社ピクルス
大学卒業後、JAの金融窓口の事務を2年間行った後、一念発起しWebの世界へ飛び込む。eラーニングコンテンツの制作会社やWeb系の制作会社を経て、2007年より(株)ピクルスに勤務。現在は、広告キャンペーン系のサイトの企画/制作、特にFlashやXHTML/CSSなどのWebコンテンツ全般の実装を行っている。ブログパーツを中心としたデジタルアイテムの配信サイト「くるくるパーツ(http://parts.kuru2jam.com/)」も運営中。最近は、上越線が気になっています。
http://www.pickles.tv/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています