
iWebのHTMLスニペットを使うコツ
HTMLスニペットは、アフィリエイトバナーやYoutubeの動画などをページに掲載するなど、様々な場面で使います。 使い方次第でiWebで制作したホームページの […]
- 2016/5/4
- 2008/2/5
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” />
iWebについて
iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。
WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。
無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。