超初心者でも簡単にムーバブルタイプでホームページを作成する方法 第三回

手順2.5

まずは、再構築ボタンを押して、再構築します。

MTインストール直後は、Webサイトを構築するフォルダが作られていません。

再構築後、ホームページを格納するフォルダができているはずなので、そのなかにWebサイトで利用する画像をFTPソフトで画像をフォルダにアップロードする。

手順3

HTMLヘッダーを作る

おおむね、これだけ知っていればいいだろう。的なタグを寄せ集めてヘッダーを作成しました。
まずはご覧下さい。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=<$mt:PublishCharset$>” />
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
<link rel=”EditURI” type=”application/rsd+xml” title=”RSD” href=”<$mt:Link template=”rsd”$>” />
<link rel=”alternate” type=”application/atom+xml” title=”Recent Entries” href=”<$mt:Link template=”feed_recent”$>” />

<link href=”<mt:BlogUrl />tag-format.css” rel=”stylesheet” type=”text/css” />
<link href=”<mt:BlogUrl />common.css” rel=”stylesheet” type=”text/css” />

<link href=”<mt:BlogUrl />initialaize.css” rel=”stylesheet” type=”text/css” />
<link href=”<mt:BlogUrl />common.css” rel=”stylesheet” type=”text/css” />

<MTIf name=”page” eq=”home”>
<meta name=”keywords” content=”Facebook” />
<meta name=”description” content=”Facebookです” />
<title>Facebookのページ</title>
<link href=”<mt:BlogUrl />home.css” rel=”stylesheet” type=”text/css” />
<link rel=”alternate stylesheet” type=”text/css” href=”<mt:BlogUrl />home.css” title=”standard” />
<link rel=”alternate stylesheet” type=”text/css” href=”<mt:BlogUrl />home-small.css” title=”small” />
<link rel=”alternate stylesheet” type=”text/css” href=”<mt:BlogUrl />home-big.css” title=”big” />

<MTElseIf name=”page” eq=”other”>
<meta name=”keywords” content=”<$MTPageKeywords$>” />
<meta name=”description” content=”<$MTPageExcerpt$>” />
<title>Facebook|<$MTPageTitle$></title>
</MTIf>

 

<MTIf name=”page” eq=”home”>
<link href=”<mt:BlogUrl />home.css” rel=”stylesheet” type=”text/css” />
<MTElseIf name=”page” eq=”other”>
<MTPageTags>
<MTPageIfTagged tag=”column”><link href=”<mt:BlogUrl />second.css” rel=”stylesheet” type=”text/css” /></MTPageIfTagged>
<MTPageIfTagged tag=”nocolumn”><link href=”<mt:BlogUrl />second02.css” rel=”stylesheet” type=”text/css” /></MTPageIfTagged>
</MTPageTags>
</MTIf>

<script type=”text/javascript” src=”<mt:BlogUrl />styleswitcher.js”></script>
<script type=”text/javascript” src=”<mt:BlogUrl />smartRollover.js”></script>
<link REL=”stylesheet” type=”text/css” HREF=”<mt:BlogUrl />print.css” media=”print”>

</head>
<body>
<div id=”head”>
<h1><a href=”<mt:BlogUrl />”><img src=”<mt:BlogUrl />img-common/home.gif” alt=”” width=”300″ height=”28″ /></a></h1>

<p><img src=”<mt:BlogUrl />img-common/moji-title.gif” alt=”文字サイズを変更できます” width=”161″ height=”27″ /><a href=”javascript:void(0);” onclick=”setActiveStyleSheet(‘big’); return false;”><img src=”<mt:BlogUrl />img-common/moji-big.jpg” alt=”文字を大サイズにします” width=”23″ height=”27″ /></a><a href=”javascript:void(0);” onclick=”setActiveStyleSheet(‘standard’); return false;”><img src=”<mt:BlogUrl />img-common/moji-mid.jpg” alt=”文字を中サイズにします” width=”18″ height=”27″ /></a><a href=”javascript:void(0);” onclick=”setActiveStyleSheet(‘small’); return false;”><img src=”<mt:BlogUrl />img-common/moji-small.jpg” alt=”文字を小サイズにします” width=”20″ height=”27″ /></a></p>

<ul id=”globalnavi”>
<li><a href=”<mt:BlogUrl />”><img src=”<mt:BlogUrl />img-common/01-off.jpg” alt=”ホームへ戻る” width=”133″ height=”77″/></a></li>
<li><a href=”<mt:BlogUrl />koe.html”><img src=”<mt:BlogUrl />img-common/02-off.jpg” alt=”お客様の声” width=”133″ height=”77″/></a></li>
<li><a href=”<mt:BlogUrl />map.html”><img src=”<mt:BlogUrl />img-common/03-off.jpg” alt=”周辺地図” width=”131″ height=”77″/></a></li>
<li><a href=”<mt:BlogUrl />boshu.html”><img src=”<mt:BlogUrl />img-common/04-off.jpg” alt=”職員募集” width=”132″ height=”77″/></a></li>
<li><a href=”<mt:BlogUrl />vo.html”><img src=”<mt:BlogUrl />img-common/05-off.jpg” alt=”ボランティア募集” width=”133″ height=”77″/></a></li>
<li><a href=”<mt:BlogUrl />shiteki.html”><img src=”<mt:BlogUrl />img-common/06-off.jpg” alt=”ご指摘ご要望” width=”138″ height=”77″ border=”0″/></a></li>
</ul>
</div>

解説は、次回にします

超初心者でも簡単にムーバブルタイプでホームページを作成する方法 第二回

手順1?

MTでWebサイトを作る前に、DWでレイアウトを完璧に整える

…っというのも、MTでWebサイトを作ってからCSS変更するのって大変なんですよ。ですから、小規模なWebサイトならすべてDWでもホームページビルダーでもいいから先にWebサイトを作成指定した方が遠回りなようで近道です。

ちなみに僕は50ページ程度のWebサイトなら先に作り込んでしまって、納品前にMT化します。

手順2

テンプレートを作成する

作成するテンプレートは次の通り。
※インストール時からあるテンプレートは削除しないように!

インデックステンプレート
DWで作成したWebページのCSSを適当なテンプレート名を付けて保存してきます。
僕なら次の表のようなテンプレートを作成します。このあたりは、作成する人それぞれでしょうね。
既存のテンプレートは削除しないようにお願いします。

ちなみに、CSSを登録するときに背景画像の指定をしている場合、オーサリングソフトはおおむね相対指定になっているはずです。絶対指定の方が、安心できるかなぁと思いますので、相対指定の前に<mt:BlogUrl />を入力してください。<mt:BlogUrl />は、ブログを作成したときに指定したURLに変換されます。

テンプレート名 出力ファイル名
CSS:スタイルシートの初期化 initialize.css
CSS:レイアウト common.css
CSS:トップページ   home.css
CSS:セカンドページの書式設定 second.css
css:印刷用CSS   print.css

テンプレートモジュール
次のテンプレートモジュールを作成します。
どのページでも同じような内容ならテンプレートモジュール化してしまった方が効率的です。
分割しすぎるとワケ分からなくなりますけどね。

  • HTMLヘッダー
    HTMLタグから大体共通しているところまでざっくりモジュール化します。
    第三回くらいから、詳細に説明します。
       
  • HTMLフッター 
    おおむね終わりそうなところからHTMLタグ終了までをモジュール化します。
    これも同じく第三回くらいから詳細に説明します。
     
  • グローバルナビ 
    Webサイトを横断的にまたいでいるリンク集
    カテゴリーやフォルダーでわければ自動的にリンクを生成できるけれども、情報をたくさん取り扱うようなサイトならいざ知らず、通常のWebサイトなら固定で十分。てなわけで、Webページを直接指定したWebサイトを構築します。
      
  • 左ナビゲーション
    グローバルナビゲーションの下にローカルリンクなんて欲しい場合があるじゃないですか、そのために用意しました。なくても問題はありません。               

修正するテンプレート

  • インデックステンプレート
    メインページ index.htmlページ
  • アーカイブテンプレート
    ウェブページ

おまけ

僕が使っている初期化CSSはこんな感じ。
YAHOOのライブラリでダウンロードしてきたモノにimgへのスタイル追加したモノを使っておりまする。

では、また次回。

/* タグの初期化用CSS */

html{
 margin: 0px;
 padding: 0px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}

/* Yahoo!User Interface Libraryの初期化CSSを利用 */
body {color:#000;background:#FFF;margin:0;padding:0;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:”;}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/* イメージをリンクした際に、囲い線がでないようにする */
a img {
 border:0;
 overflow: hidden;
}
 

超初心者でも簡単にムーバブルタイプでホームページを作成する方法 第一回

※僕のMT構築のメモ書き程度の記事です。
チラシの裏よりかは役に立ちます。。。と思う。

Webサイトの仕様

基本的に初心者でも更新できる

変なプラグインは使わない
※初心者が更新できなくなります

Webページ機能だけでWebサイトを構築
ブログ機能を使うと、記事が多くなりすぎて直感的に修正できなくなるためです。
 ブログ機能も後付けできます。
 マルチブログタグ未使用で、簡単設置

超初心者でも簡単にムーバブルタイプでホームページを作成する方法

っというカテゴリーを作ってみました。

ムーバブルタイプでWebサイトを構築しますってなった場合、書店で販売しているムーバブルタイプのカスタマイズの本ってちょっと使いづらいんですよね。お客様が求めているWebサイトってのはもっとシンプルなものが多いような気がします。

んなわけで、ムーバブルタイプで構築する超簡単なWebサイトの構築手順をご紹介します。(まぁ僕のメモとして残しておきたいわけですけどね。)我流の構築方法なので、つっこみどこ満載ですが閲覧してくださっている方の参考になれば幸いです。

構築するWebサイトの概要

  • トップページ
  • 商品紹介
  • 採用募集ページ
  • お問い合わせページ(メールフォーム)
  • 社員ブログ※オマケで付けます

用意するもの

構築方法手順

ムーバブルタイプがインストールされた状態からスタートです

  1. トップページ作成
  2. Webページ作成(商品紹介、採用募集)
  3. お問い合わせページ作成(メールフォーム作成)
  4. ブログの設定をいじる

以上!なんて簡単なWebサイトでしょうw

中小企業のWebサイトなんて、おおむねこのレベルで満足してくれるお客様が多い気がしますよ。

まぁ僕の営業努力が足りていないだけかもしれませんが…。。。。

ぼちぼち更新してきますノシ