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」まで作られます。
▼文字コードを指定するメタタグ
iWeb Tips - iWebのコツ -
HTMLスニペットの使い方
挿入メニューから「HTMLスニペット」を選ぶか、iWebの画面下にある「Web ウィジェット」のアイコンから「HTMLスニペット」を選んで表示される黒いボックスに、貼付けたいもののソースコードペーストして「適用」ボタンをクリックするだけです。
詳細は「ページにWebウィジェットを入れるには」を参考にしてみてください。
たったこれだけなのですが、問題なく上手に使うにはちょっとコツがあります。
HTMLスニペット の構造
ここでは、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” />
スポンサードリンク
公開に関するTips
iWeb基本のTips
iWeb Tips：記事一覧
iWeb Tips 記事一覧
HTMLスニペットを使うコツ
その他のTips
アクセスアップ、SEO対策のTips
iWebの機能、更新に関するTips
運営サイト・ブログ
このサイトはApple iWeb を使用して作成しています。
ご意見などはお問い合わせフォームからお願いいたします。
当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。
スポンサードリンク
