まずは、HTMLスニペットの構造を説明します。

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

ページのソースを表示して、下のように書かれている部分がHTMLスニペットの呼び出し部分です。


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

外部ファイルになっているHTMLスニペットには、文字コードの指定をするメタタグが書かれていません。このために、日本語で書かれた文字は文字化けをしてしまう事があります。

この現象はブラウザによって挙動が異なりますが、Safariではよくおこります。（困ったもんです）

もし文字化けをおこしてしまった場合の対処方法ですが、HTMLスニペットのファイルに文字コードを指定するメタタグを書く事で直る場合があります。

HTMLスニペットは「UTF-8」という文字コードで書かれていますので、下のタグを「<head>」の後ろに追加します。

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

iWeb Tips - iWebのコツ -

ホーム > iWeb Lab > iWeb Tips > HTMLスニペットを使うコツ

挿入メニューから「HTMLスニペット」を選ぶか、iWebの画面下にある「Web ウィジェット」のアイコンから「HTMLスニペット」を選びます。


すると、黒いボックスが開きますので、あとは貼付けたいYoutubeの動画URLをこのボックスにペーストして「適用」ボタンをクリックするだけです。


たったこれだけですが、上手く使うにはちょっとコツがあります。

　HTMLスニペット の構造

では、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」まで作られます。

<script type="text/javascript"><!--//--><![CDATA[//><!--

new Paste('widget0', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {});

//--><!]]></script>

　日本語には注意が必要です！

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

  iWeb Tips | バックナンバー

　スポンサードリンク

　iWeb基本のTips

　公開に関するTips

　iWebの機能、更新に関するTips

　アクセスアップ、SEO対策のTips

　その他のTips

    iWeb Q＆A

このサイトはApple iWeb を使用して作成しています。

ご意見などはお問い合わせフォームからお願いいたします。

運営サイト・ブログ

当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。