記事検索：
tips_011
HTMLスニペットは、アフィリエイトバナーやYoutubeの動画などをページに掲載するなど、様々な場面で使います。使い方次第でiWebで制作したホームページの表現が一気に広がりますが、使う時にはちょっとしたコツが必要です。
そこで、このページでは、HTMLスニペットの使い方やその構造、注意点などを解説します。
2008/02/05
では、HTMLスニペットの実体はというと・・・ファイルがまとめて入っているフォルダの中にある「widget0_markup.html」というHTMLファイルです。
例えば、「index」というページにHTMLスニペットを設定すると、「index.html」と同じフォルダに「index_files」というフォルダが作られます。この中に、「widget0_markup.html」があります。
「widget0_markup.html」の「0」の部分は連番になっていて、設定したHTMLスニペットの分だけ作られます。
この「index」に5つのHTMLスニペットを設定した場合は、「widget0_markup.html」から「widget4_markup.html」まで作られます。
▼文字コードを指定するメタタグ
挿入メニューから「HTMLスニペット」を選ぶか、iWebの画面下にある「Web ウィジェット」のアイコンから「HTMLスニペット」を選んで表示される黒いボックスに、貼付けたいもののソースコードペーストして「適用」ボタンをクリックするだけです。
詳細は「ページにWebウィジェットを入れるには」を参考にしてみてください。
たったこれだけなのですが、問題なく上手に使うにはちょっとコツがあります。
ここでは、HTMLスニペットの構造を説明します。構造を理解することで、HTMLスニペットに関わる問題の発見などができるようになればと思います。
HTMLファイルを書き出した後のHTMLスニペットは、Javascriptで呼び出される「外部ファイル」という構造になっています。
ページのソースを表示して、下のように書かれている部分がHTMLスニペットの呼び出し部分です。
<script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget0', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {});
//--><!]]></script>
▼HTMLスニペットの呼び出し部分のソースコード
外部ファイルになっているHTMLスニペットには、文字コードの指定をするメタタグが書かれていません。このために、日本語で書かれた文字は文字化けをしてしまう事があります。
この現象はブラウザによって挙動が異なりますが、Safariではよく起こります。
もし文字化けをおこしてしまった場合の対処方法ですが、HTMLスニペットのファイルに文字コードを指定するメタタグを書く事で直る場合があります。
HTMLスニペットは「UTF-8」という文字コードで書かれていますので、下のタグを「<head>」の後ろに追加します。
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
-
HTMLスニペットを使うコツ
HTMLスニペットの使い方
HTMLスニペットの構造
日本語の扱いにはちょっと注意が必要です
このサイトはApple iWeb を使用して作成しています。
ご意見などはお問い合わせフォームからお願いいたします。
当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。
