ホーム > コンピュータ > webツール > Expression Web 4 > 新しいサイトを作成する

ベクトルドロー・レベルゼロ+

ヘッダを修正する[Web]

新規作成日 2015-10-22
最終更新日

方針

Expresson Web 4の付属テンプレートを修正して、ダイナミックWebテンプレートの独自のテンプレートを作成します。

Expresson Web 4の付属テンプレートは、「XHTML 1.0 Transitional」で記述されていますので、大幅な変更が必要になります。

今回、Html5, css3で、レスポンシブデザインのテンプレートを作成したいと思います。

このページでは、ヘッダを修正します。

ヘッダを修正します。

まず、テンプレート「mastar.dwt」をコピーし張り付け、名前を変更しておきます。こうすることで、間違えてよくわからなくなったとき元に戻せます。

テンプレート「mastar.dwt」のヘッダ部分を修正します。

定型のスタイルが存在しますので、そのまま利用すれば良いかと思います。提携のスタイルは、書籍やテンプレート、webサイトなどを参考にしてください。

Expresson Web 4の付属テンプレート「mastar.dwt」のヘッダ部分


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- #BeginEditable "doctitle" -->
<title></title>
<!-- #EndEditable -->
<link href="styles/style1.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
</head>

これを以下のように修正します。


<!DOCTYPE html>

<!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!-->

<html lang="ja">

  <!--<![endif]-->
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--ページ情報-->
    <meta name="author" content="作成者名">
<!-- #BeginEditable "doctitle" -->
    <meta name="description" content="ページの説明">
    <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4">
    
    <title>タイトル</title>
<!-- #EndEditable -->
    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/style.css">
    
    <!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<script src="js/html5shiv.js"></script><![endif]-->

	<!-- google-code-prettifyのスクリプト -->
		<!-- google-code-prettifyのスクリプトは、ここに張り付けます。-->

    <!-- アクセス解析スクリプト -->
    <!-- GoogleAnalyticトラッキングコード-->

		<!-- GoogleAnalyticトラッキングコードは、ここに張り付けます。-->

  </head><!--ヘッダ終了-->

説明

かなりコードが増えました。しかし増えたコードのほとんどは、古いIEのための対応です。対応させるためのjsスクリプトのための表記ですので気にする必要はありません。

<!DOCTYPE html>

このタグが、Html5で、このページを記述することを宣言しています。


<!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!-->

ここは、IEのバージョンによって違う対応をさせることを指示しています。<!--コメント-->の表記は、 htmlのコメント文を示しますが、この中に制御文を入れて、外部のプログラムによって、条件ごとの動作をさせることがあります。

<html lang="ja">

日本語で記述されていることを示しています。


    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

上から、記述フォーマットの明記と使用する文字コードの明記します。 インターネットエクスプローラーをGoogle Chrome Frameで表示します。 ビューポートで、ディバイスの標準サイズで表示することを指定します。

    <!--ページ情報-->
    <meta name="author" content="作成者名">

ページを作成した人の名前を示します。「content」属性に、自分の名前、あるいはページを作成した人の名前を記入してください。日本語名で記述する場合は、ローマ字名を併記してください。


<!-- #BeginEditable "doctitle" -->
    <meta name="description" content="ページの説明">
    <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4">
    
    <title>タイトル</title>
<!-- #EndEditable -->

この中の


<!-- #BeginEditable "doctitle" -->
<!-- #EndEditable -->

は、Expresson Web 4のダイナミックWebテンプレートの制御コードです。Expresson Web 4で編集する際、このコメントタグに囲まれた範囲が、修正可能な部分であることを示しています。

中身は、metaタグです。順に、ページの説明、ページを検索する際のキーワード、ページのタイトルを記述します。

google検索エンジンでは、この中のキーワードは、パラメータとして評価しないと明言しています。(※ウェブマスター・ハングアウト 2013-02-06)

ページの説明とページのタイトルは、検索エンジンで検索した際、検索結果に表示される項目です。興味を引く内容にすることをお勧めします。 ページの説明とページのタイトルを同じにすると、検索エンジンからの評価が下がるといわれています。注意しましょう。


    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/style.css">

cssファイル(スタイルシート)とその位置を指定しています。ファイル内で、同じ内容を指定していた場合、あとに読み込んだ内容で上書きされます。

リセットCSSを読み込み、各種ブラウザ間の表示の違いをなくしてから、「style.css」を読み込んでいます。

Expresson Web 4のテンプレートで用意されていたcssファイルは、私は使用しません。


    <!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<script src="js/html5shiv.js"></script><![endif]-->

IEのバージョン9に対応させるコードです。


	<!-- google-code-prettifyのスクリプト -->
		<!-- google-code-prettifyのスクリプトは、ここに張り付けます。-->

    <!-- アクセス解析スクリプト -->
    <!-- GoogleAnalyticトラッキングコード-->

		<!-- GoogleAnalyticトラッキングコードは、ここに張り付けます。-->

  </head><!--ヘッダ終了-->

コメントとヘッダの終了タグです。コメントは、スクリプトの挿入位置を示しています。

「google-code-prettifyのスクリプト」は、ページ内でコードを表示す際に、読みやすいように色分けされた強調表示をするためのものです。

「GoogleAnalyticトラッキングコード」は、グーグルの「GoogleAnalytic」と呼ばれるアクセス解析を利用する際に必要となるコードです。 サイトをパブリッシュ(アップロード)した後、コードを取得します。コードを取得したらここに張り付けます。サイトごとに別のコードを張り付けます。

解析サービスは、いろいろなものが利用できますが、解析スクリプト(解析タグ)を張り付ける場所はそれぞれ異なりますので、説明をよく確認しましょう。

Copyright (C) 2011-2016 kukekko All Rights Reserved.
kukekko@gmail.com
ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません 」。
inserted by FC2 system