iWebのHTMLスニペットを使うコツ

HTMLスニペットは、アフィリエイトバナーやYoutubeの動画などをページに掲載するなど、様々な場面で使います。

使い方次第でiWebで制作したホームページの表現が一気に広がりますが、使う時にはちょっとしたコツが必要です。

そこで、このページでは、HTMLスニペットの使い方やその構造、注意点などを解説します。

HTMLスニペットの使い方

挿入メニューから「HTMLスニペット」を選ぶか、iWebの画面下にある「Web ウィジェット」のアイコンから「HTMLスニペット」を選んで表示される黒いボックスに、貼付けたいもののソースコードペーストして「適用」ボタンをクリックするだけです。

詳細は「ページにWebウィジェットを入れるには」を参考にしてみてください。
たったこれだけなのですが、問題なく上手に使うにはちょっとコツがあります。

HTMLスニペットの構造

ここでは、HTMLスニペットの構造を説明します。構造を理解することで、HTMLスニペットに関わる問題の発見などができるようになればと思います。

HTMLファイルを書き出した後のHTMLスニペットは、Javascriptで呼び出される「外部ファイル」という構造になっています。
ページのソースを表示して、下のように書かれている部分がHTMLスニペットの呼び出し部分です。

▼HTMLスニペットの呼び出し部分のソースコード

<script type="text/javascript"><!--//--><![CDATA[//><!-- new Paste('widget0', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {}); //--><!]]></script>

では、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スニペットには、文字コードの指定をするメタタグが書かれていません。このために、日本語で書かれた文字は文字化けをしてしまう事があります。
この現象はブラウザによって挙動が異なりますが、Safariではよく起こります。

もし文字化けをおこしてしまった場合の対処方法ですが、HTMLスニペットのファイルに文字コードを指定するメタタグを書く事で直る場合があります。
HTMLスニペットは「UTF-8」という文字コードで書かれていますので、下のタグを「」の後ろに追加します。

▼文字コードを指定するメタタグ

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />

「役にたった」と思ったらシェアお願いします