図や画像にキャプションをつける
画像として作成した図や表をページの中にレイアウトする時は、図や表の内容がわかりやすいようにキャプションをつけて情報を捕捉するのがオススメです。
お試し画像のキャプションです。
<p class"images"><img src="○○.gif" width="100" height="100" alt="お試し画像なのです。">
お試し画像のキャプションです。</p>
float:left;
margin-left:20px;
font-size:0.85em;
color:#FF0000;
width:100px;
}
※「float:left」で図と表を文章に回りこませ、「margin-left」はテキストと画像の間のスペースです。
「font-size」や「color」はキャプション部分の色や大きさになります。
「width」でキャプションの幅を決めます。画像の横幅と同じ大きさにするときれいになります。特に「float:right」の場合はこの幅を設定しないと、回り込みがきれいに表示されません。
画像とキャプションの間の間隔を調整したい場合は
margin:10px;
}
これで10pxの間隔が出来ます。
タイトルの横にマーク画像をつける
見出し部分の横にマークをつけて、他の部分との差別化を測りたい…。
そんな時に「border」で、■を横につけるのもいいんですが…できれば画像が使いたい…というときもありますよね。
少なくとも円は「border」では表示不可能ですし。
vertical-align:middle;
}
.mark{
margin-left:0.3em;
}
vertical-alignでマークとテキスト画像を縦に中央揃えしています。
margin-leftでマークとテキストの間隔を指定しています。
画像に名前をつける
画像を使用する事でページデザインのバリューエーションが増えるということで、ロゴはもちろん、大見出しや小見出しを、文字ではなく画像で表示したりすることがあります。
画像を表示することができない環境や、画像を見る事が出来ないユーザーにとっては、画像で伝えている情報は、まるで役に立ちません。
もちろん、検索エンジンも画像に描かれた文字など読めるはずがありません。
そのため、画像を使用する場合は、画像の内容がわかるよう「alt」属性をつける必要があります。
※横サイズ、縦サイズは古いブラウザではこれがないと表示が重くなるので、設定しておいたほうが吉です。
たとえばリストなどのマーク画像のaltは「*」や「・」といった記号にするのが一般的ですが、音声ブラウザの事も考えると、マーク画像のalt属性は記述する必要がないと思います。
ページが白黒でも見やすい
白黒モニターで表示した場合カラーのページではあんなにキレイだったのに！！なんていうことがよくあります。
さすがに白黒モニターの人はそういないかもしれませんが、ひょっとしたら白黒プリンターの人がカラーページを白黒で印刷するかもしれません。
いろいろな人に優しいページつくりを目指すなら、白黒でもきれいに見えるページ作成が重要です。
白黒のページを確認するには、スタイルシートで設定する事が出来ます。
filter:gray;
}
※ただこれはIE専用です。
便利なソフトとして、富士通アクセシビリティ・アシスタンス - FUJITSU Japanがあります。
このColorDoctorは無料で配布されているものなのですが、ディスプレイ上に映し出される全てのリアルタイム描画データや資料の色のアクセシビリティチェックが可能です。
でもWindowsXPのみ対応です(^。^;)
アクセシビリティをチェック
富士通アクセシビリティ・アシスタンス - FUJITSU Japan
視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール群「Fujitsu Accessibility Assistance 」をホームページ作成担当者やデザイナーに向けて無償ダウンロードにて提供
WebInspector
作成したWebサイトが高齢者や障害のあるかたにとっても読みやすいかを診断するソフトウェアです。HTMLファイルだけでなくCSS(Cascading Style Sheet)を使用したWebサイトのアクセシビリティも診断します。
ColorSelector
アクセシビリティの高い背景色と文字色の組み合わせをリアルタイムに確認することが可能な、クリエイターの為の強力な支援ツールです。
ColorDoctor
ウェブサイトや動画、プレゼンテーション資料で色のアクセシビリティをチェックするためのツールです。 ディスプレイ上に映し出される全てのリアルタイム描画データや資料の色のアクセシビリティチェックが可能です。
著作者の情報
ページの一番下には、ページの制作者情報をつけるのが一般的です。
※フッターといいます。
この部分の、著作者の情報は「<adrsss>著作者の情報</adrsss>」で設定します。
ですが、この「<adrsss>」普通に表示すると文字が斜体になってとても読みいにくいです。
斜体を通常の書体に変えるのは簡単です。
「adress」に以下のスタイルを指定してください。
font-style:normal;
}
CSSハック
ユーザーのブラウザは古いのから新しいのまで千差万別です。
全てのブラウザに対応させたくても…たとえばバージョン4のブラウザは、スタイルシートでフリーズしてしたり強制終了してしまうものもあるくらいです。
そのため、バージョン4のブラウザはスタイルシートが適用されないように処理するのが現在は一般化しています。
もちろん、バージョン5のブラウザにもいろいろなバグがあり、最新バージョンのブラウザで美しく表示されるようなものも、表示が崩れることがままあります。
現在、「CSSハック」と呼ばれるトラブル回避の裏技を使って、ブラウザの表示をきれいにする方法がとられていたりします。
ブラウザの選定についてはブラウザごとのスタイルシート選定：スタイルシートメモを参考にしてみてください。
リストの設定
項目や商品の一覧など、箇条書きで記述するコンテンツは結構あります。
こうしたコンテンツもリストタグを使う事でアクセシビリティアップにつながります。
<li>
<li>
</ul>
■番号つきリスト（リストの頭が「１」などの数字）
<li>
<li>
</0l>
リスト自体にいろいろなデザインを当てる事が出来ます。
list-style-image:url(○○○.jpg);
}
※リストマークとテキストの間隔をあける
li{
padding-left:0.3em;
}
■リストの左側余白をなくす
margin-left:0;
padding-left:0;
}
※この値（0）を変える事でリストの左余白の大きさを変更する事が出来ます。
■リストの文字デザインを指定する
font-size:0.875em;
color:#000;
}
■リストの行間を調節する
margin-bottom:0.5em;
}
※リストの項目が複数行になる場合は、行間も調節したほうが◎です。
たとえば、こんな感じです。
line-height:1.5em
ちなみにリストはだいたい8個以内にするのがいいといわれています。
8個以上になるときはグループわけをしたほうが良いです。
そのときに、グループごとに見出し<h2>や<h3>で見出しを設定したほうがアクセシビリティに効果があるといわれています。
<ol>
<li>
<li>
</0l>
<h3>リストの見出し2</h3>
<ol>
<li>
<li>
</0l>
フォントの見せ方
引用テキストの場合、強調したい場合…そんな時に、フォントを通常のフォントとは違うように見せて、簡単に目で比較できるようにする方法があります。
引用などのときは、斜体を使う事が多いそうです。
私は基本的に斜体は読みにくくて好まないため、斜体は使いませんが(-_-;)
<p class="hutoji">太字の文字</p>
フォントの指定
タイトルや見出しなどで、画像を使わずにフォントで目立たせたい…
そんな時のために、フォントの種類を指定する事が出来ます。
基本的にマニアックなフォントを指定すると、正しく見られなかったり、読みにくい事のほうが多いので、フォントの指定をする場合は気をつけてください。
フォント名は、カンマで区切って複数設定する事が出来ます。
こうやって羅列する事で、1番目のフォントがない場合は二番目のフォントが表示されます。
■フォントを種類で表示する場合
「MS Pゴシック」や、「MP P明朝」など、フォントそのもので指定するほかに、フォントの種類ごとで指定する方法があります。
- serif 明朝系フォント
- sans-serif ゴシック系フォント
- cursive 草書体系フォント
- fantasy 装飾的フォント
- monospace 等幅フォント
行揃えでわかりやすく
通常状態だと、テキストは左寄せになります。
たとえば、他の情報と別個のものとしてわかりやすく表示する方法として、テキストを「中央揃え」「右寄せ」にする方法があります。
<div class="case02">右寄せ</div>
<div class="case03">左寄せ</div>
コメントを入れる
スタイルシートが複雑になればなるほど、「これ、何のために設定したものだっけ？」という記憶喪失が起きます。
絶対、覚えていられるよ…と思うかもしれませんが…時間が経つと忘れてしまったりします。
しかも、もしそのスタイルシートを他の人に見せる場合は、コメントメモがないと、すごく大変になったりします。
分かりやすいコメントを付けておいて、メンテナンス性を高めるのは大切なことです。
※複数行のコメントを書く事ができます
// ここにコメント
※一行のみのコメント用です
見やすいスタイルシートの書き方
スタイルシートの書式はまず適応先のセレクタを記述し、それに続く「{～ ～ ～}」の中で具体的な表示指定を書き込むという形式です。
「{～ ～ ～}」は、宣言といわれ「プロパティ」と「値」を「:（コロン）」で区切って指定します。
そして、複数設定するときは、宣言同士を「;（セミコロン）」で区切ります。
セレクタ{
プロパティ:値;
プロパティ:値;
}
body{
background-color:#FF0000;
color:#FFFFFF;
}
※この方式だと、一つのセレクタにたくさんのプロパティを設定できるのでとても便利です。
スタイルシートが見やすくなり、管理するにも楽なので、この方法はお勧めです！
リンク部分の指定方法
リンクは、状況において表示が変化します。
通常時、既に見たリンク、カーソルが乗ったとき、マウスが押されたときです。
通常のタグと違って、独自の書き方をします。
このリンク状態別に指定できる擬似クラスは指定する順序を変えると意図した表示にならない場合があるので注意しましょう。
順番は「通常時」「既に見たリンク」「カーソルが上にきた時」「マウス押した時」です。
color: #CC6600;
}
a:visited {
color: #663300;
}
a:hover {
color: #FF0000 ;
}
a:active {
color: #000000 ;
}
セレクタの基本
スタイルシートは、まずスタイルシートの適用先を書いて、それに続く「{}」の中で具体的なスタイルを記述する形になっています。
最初はちょっとなれない事もありますが…慣れるとすごく便利です。
■要素名をそのままセレクタとして指定する場合
※適用先を「*」（アスタリスク）にすることで、全ての要素を適用対象と出来ます。
※適用先が複数ある場合は「,」（カンマ）で区切ると一緒に指定できます。
※ボディ（つまりページ全体）の文字色を「red」にせよ
h1,h2,p {font-size:1em }
※h1,h2,pの文字の大きさを「1em」にせよ
■IDセレクタ
※「id」属性の値が指定されている要素を適用対象としてスタイルを指定できます。
※要素名に続けて書く事で適用対象を限定できます。
「<p id="red">ここにはたくさんの<span id="red">文字列</span>があります。 </p> 」
の場合、
※「#red」で指定した場合は、全ての文字列にスタイルシートが反映。
※「span#red」で指定した場合は、「<span id="red">」で囲まれた、「文字列」のみがスタイルが反映。
■クラスセレクタ
※「class」属性の値が指定されている要素を適用対象としてスタイルを指定できます。
※要素名に続けて書く事で適用対象を限定できます。
「<p class="red">ここにはたくさんの<span class="red">文字列</span>があります。 </p> 」
の場合、
※「.red」で指定した場合は、全ての文字列が反映。
※「span.red」で指定した場合は、「<span class="red">」で囲まれた、「文字列」のみがスタイルが反映。
■設定するセレクタを限定したい場合
適用先を指定する際に、「要素Aの中の要素B」を指定したいときがあります。
#header .navi ul
と設定した場合
※「#header 」が指定された中の「.navi」が指定された中の「ul」タグ、となります。
文字の色を指定する
明るい背景の上に、明るい文字色をおいたり、暗い背景の上に暗い文字をおくと、文字が読みにくくなってしまいます。
ストレスなくページを見る事が出来るように、文字の色を指定しましょう。
この文字色を赤くします。
今回は段落「<p>」で色を設定していますが、「<span>」や「<div>」でも設定できます。
また、これだと「<p>」タグの中味全てに赤が指定されてしまうので、一部分だけ設定したい場合は、クラス名（class）を指定して該当部分のみ色付けします。
この文字色を赤くします。
MovableType関連人気書籍
MovableType関連の人気書籍です。
随時更新されますので、今現在の人気書籍を探す事が出来ます(#^.^#)
■Fujisan人気書籍
■Yahoo人気書籍
スタイルシート関連人気書籍
スタイルシート関連の人気書籍です。
随時更新されますので、今現在の人気書籍を探す事が出来ます(#^.^#)
■Fujisan人気書籍
■Yahoo人気書籍
リンクのポイント
検索エンジンでも重要視されるのがリンクです。
リンクをされている回数が多いと、それだけでアクセスアップにつながったりします。
ちなみに自分のサイトから自分のサイトへの内側リンクでもアクセスアップにつながります。
※といっても、あまりメジャーではないサイトからのリンクはそんなにアクセスアップにはつながりませんが…地道な努力ですから！
ポイントは、内容がわかるリンクを作ること。
リンクを「こちら」などに張っていると、凄くもったいないです。
たとえば、リンクの先が「インコの紹介をするページ」だったとします。
より
の方が検索エンジンに好かれる訳です。
TypePad Weblogs
※TypePadは、Movable TypeをベースとしたBlogサービス。
画像アップロードでアルバム作成ができる「フォト・アルバム」や、書籍やCDの画像タイトルをリスト化可能な「TypeList」（タイプリスト）といった独自の機能も。
スタイルシート辞典
おすすめのスタイルシート例文・辞典的サイトさんを紹介します。
基本的にこのサイトではスタイルシートの辞典のような一覧は表示しないので、スタイルシートの詳細辞典を見たい方はこちらのサイトを利用すると便利だと思います。
- とほほのスタイルシート入門 有名なサイトさんです。詳しい説明が◎
- スタイルシート例文辞典 スタイルシートの例文がわかりやすく一覧になっているので使いやすいです。
- HTMLクイックリファレンス スタイルシートはもちろん、HTMLのタグの一覧も閲覧できます。
行間をあけて見やすくする
文字がたくさん並んでいると、書籍でも読みにくいものですが、モニタで見るとさらに文字は読みにくく感じます。
延々と文字がスクロールしても現れてくるページなんて読みたくないですよね…(^_^;)
HTMLの規格に従って、文章を
でマークアップします。
pは文章の段落であることを意味するもので、画面上では上下に余白が挿入されます。
そのため、文章を細かく区切り、読みやすくする効果があります。
さらに文字の行間を変えると、文章をより読みやすくすることができます。
文字のサイズを相対で指定
アクセシビリティを考慮すると、ユーザーが文字サイズを変更できるように相対サイズで指定したほうがよいと思います。
特に見出しなどは32pxなど大きいサイズで表示されるため、デザイン的にちょっと…ということも。
文字サイズと絶対サイズ
■相対サイズで指定する単位
- em 1emは基準となる文字サイズ
- ex 1exは基準となる文字サイズのXの高さ
- px ピクセル（※どっちかというと絶対に近い）
- % 基準となる文字サイズに対する割合
■絶対サイズで指定する単位
- pc パイカ
- pt ポイント
- cm センチメートル
- mm ミリメートル
- in インチ
文字サイズを指定する単位は、相対的な大きさを指定するものと、絶対的な大きさを指定するものがあります。
ちなみに推奨されているのは「em」です。
「em」で文字サイズを指定した場合、親となる要素の文字サイズが基準となります。
例えば、大見出し「h1」は、「body」の文字サイズを基準とします。
※ちなみに、「body」はブラウザの標準設定文字サイズ（たいていは16px）です。
「h1」を「1em」とした場合は「16px」、「2em」とした場合は「32px」で表示されることになります。
- h1 32px 2em
- h2 24px 1.5em
- h3 18px 1.125em
- h4 16px 1em
- h5 12px 0.75em
- h6 10px 0.625em
見出し
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
コンテンツの構造にたがって見出しをつけることによって、SEOやアクセシビリティ、ユーザビリティをあげることができます。
スタイルシートを設定すれば、文字の大きさや色なども変更できるのでうまく活用しましょう。
コンテンツの中で、一番重要でメインになるのは「<h1></h1>」です。
「<h2></h2>」「<h3></h3>」と数が大きくなるほど小さなレベルの見出しになります。
ちなみにページ内で「<h1></h1>」をたくさん使用したりすると、検索エンジンに嫌われます。
- 基本的にページの中に見出しは必ずつけること
※見出しをつけることでページの内容や構造がわかりやすくなります。
- テキストブラウザや音声ブラウザ対策としても見出しは重要です
- 見出しはコンテンツの内容を簡潔に表したものであるべきです
- 「<h2></h2>」をページ内に数回使うのは問題ないが、「<h1></h1>」は1ページに一回きりにする。
ちなみに余談ですが。
h1、h2など見出しの多くは上下に空白が出来てすごくうざったいですよね。
マージンを0にすると、その余白がキレイさっぱりなくなります(#^.^#)
margin:0;
}
外部スジャバスクリプトを設定する
テキストサンプル
<h1>大見出し</h1>
<p>段落１</p>
<h2>小見出し1</h2>
<p>段落2</p>
<h2>小見出し2</h2>
<p>段落3</p>
<div>グループ</div>
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
<adrsss>著作者の情報</adrsss>
</body>
ブラウザごとのスタイルシート選定
いろいろなブラウザがある中で、古いインターネットエクスプローラーやネットスケープ4のスタイルシートの表示はには頭が痛くなる一方で。
だいたいスタイルシートオンリーでページを作成している人は、ネットスケープ4は読み込まないように設定しているようです。
- ■Netscape 4.xだけに読み込まれない
<link rel="stylesheet" type="text/css" media="screen,tv" href="default.css" />
- ■Windows IE 4.xだけに読み込まれない
@import "default.css";
- ■Windows IE 5.xだけに読み込む
@media tty{
i{content:"\";/*" "*/}} @import url('ie5win.css') /*";}
}/* */
- ■Mac IE5だけに読み込む
/*\*//*/
@import url("ie5mac.css");
/**/
私がいつも使う方法を紹介します
※default.cssはこの時点で、ネットスケープ4に読まれません。
（２）default.cssの中身
@media tty {
i{content:"\";/*" "*/}} @import 'ie5.css'; /*";}
}/* */
※ここでIE5とほかのブラウザのスタイルシートの振り分けをします。
（３）通常のブラウザで使用するスタイルシートを「site.css」で、IE5にだけ適応したいものを、「ie5.css」で設定します。
外部スタイルシートを設定する
スタイルシートは、ページに直接書き込むより外部に設定したほうが便利です。
外部スタイルシートにすることで、ヘッダー部分に記述する情報が少なくなり、アクセスアップにもなります。
ちなみに、スタイルシートが設定されていなくても、ページの中身がきちんとわかるようにページを作ることも大切です。
スタイルシートの中身例
/* ページ全体の基本的な設定と背景色 */
body {
background:#000;
color:#FFF
}
/* リンク文字設定 */
a {
color: #3333CC;
text-decoration: underline;
}
a:link {
color: #3333CC;
background: none;
}
a:visited {
color: #000066;
background: none;
}
a:active {
color: #8FABBE;
background: none;
}
a:hover {
color: #006699;
background: none;
}
/* h1h2h3 */
h1{
margin: 0px;
padding: 0px;
}
コンテンツの概要やキーワードを設定する
■キーワードの設定に便利なサイト
- Google日本語チェッカー
Googleがキーワードをどう認識しているのかチェックします
- キーワード出現頻度解析 - SEO 検索エンジン最適化
テキストマッチやキーワード出現頻度をオンラインから簡単に計測します
- キーワードアドバイスツール
キーワード毎にgoogleでの検索頻度がわかります
- 検索キーワードチェックツール SEO(SearchEngineOle)
キーワードによる各検索エンジンでのサイトの表示順位がわかります
エンコードの種類を設定する
ページの記述に使ったエンコードの種類を指定します。
日本語の場合は３種類あり、WindowsやMachintoshでテキストを記述した場合、通常はシフトJSになります。
ページの作成に使ったエンコードとブラウザのエンコード設定が異なっていると文字化けが発生します。
このエンコードを設定しておかないと、文字化けの原因になるので、設定しておきましょう♪
主なエンコードの種類
- iso-2022-jp JIS（日本語）
- shift-jis シフトJIS（日本語）
- euc-jp EUC（日本語）
- us-ascii US-ASCII（日本語）
Movable Typeユーザー・マニュアル: テンプレート・ タグ
本を買うお金があるのであれば、私がおすすめするのはこの本です。
毎日コミュニケーションズ (2004/10)
売り上げランキング: 3,731
テンプレートタグ リファレンスとして使えます
初心者にはお勧めできません
実際にMovable Typeカスタマイズする人ならこれ！CMS用として販売されている本なのですが、本の前の方にあるテンプレートタグの紹介が結構使えます。
私はタグの勉強は基本的にこの本でやりました。
CSMのために…というよりもテンプレートタグの勉強にいいかも(#^.^#)
Movable Type: デフォルト・テンプレート
※このページにあるデータはMovable Type 3.1用のものです。
Movable Type 3.2をご利用の場合は、標準添付のTemplate Backup and Refresh プラグインをご利用ください。
Movable Type 3.2を使っていてもプラグインを利用するより、ここのテンプレートページからソースを取って来た方が楽だったりすることも。
何か間違って触ってしまってどうにもならない…という時は、結構ここにヒントが隠されていることもあります(^o^)
ページのタイトル
ページのタイトルを設定することはすごく大切です。
なぜならば、検索エンジンやブラウザのお気に入りなど、さまざまな場面でこのタイトルが表示されるからです。
しっかり設定しておかないと、ページを二度と見てもらえない原因にさえなります。
もちろん、わかりやすいタイトルを付けるのもポイントです。
ページ使用言語の設定
何語で書いたページなのかを指定します。
基本的に、日本語でページを作っている方がほとんどでしょうから、「lang="ja"」で問題ないでしょう。
コンテンツ内で異なる言語を使う場合は、その言語をlang属性で指定します。
ちなみにこのlang属性の指定が画面表示に何か影響を与えるのかというと…現状だとあまり影響されないみたいです(^_^;)
Movable Type3.2のダウンロード
シックス・アパートにてダウンロードが出来ます。導入方法は、ロリポップ！レンタルサーバー - MovableTypeの設置の前にがおすすめです。
ロリポップじゃない人も、ここは参考になると思いますよ(#^.^#)
標準規格に従ってページを作成する
HTMLではコンテンツの論理構造を記述し、画面上のデザインのコントロールはスタイルシートで。
というのが現在では一般的なページの作り方となっています。
このカテゴリではスタイルシートの軽い説明はもちろんHTMLの構造についても説明していきます。
基本ルール
ヘッダー テキスト イメージ リンク 枠と枠線使用したHTMLの種類を明記する
ブラウザがページの文法を判断するために、使用したHTMLの表記を一番上に書きます。
この種類によって、ブラウザごとのHTMLやスタイルシートの解釈が変わります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
「strict」に加えて「使用しないほうがいい」とされた要素や属性を使用した場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">
もちろん、「strict」で作成するのが一番いいといわれています。
■使用しない方がよいとされているタグ
<font> フォントのサイズ、種類、色
<s> 取消線付き
<strike> 取消線付き
<u> 下線付き
<applet> Javaアプレット使用
<basefont> 基本フォント指定
<dir> リスト表示
<isindex> 検索語入力欄表示
<menu> リスト表示
記事の読み込みと書き出し
読み込み/書き出し
■記事のバックアップ
しかし、前バージョンだと、確かリンクの上で右クリックして「対象を保存」しなければいけないと思われます。
■記事の復旧
データが破損してしまった、ページを移動した、などの時に便利なのがこの読み込みです。
（２）その中に読み込みたいデータを入れます（●●.txt）
（３）「読み込み」で「エントリーの投稿者を自分にする」にチェック、あとパスワードだけ入れて「読み込み/書き出し」ボタンを押します。
※カテゴリーなども設定できます。
■読み込み時の注意
一度にたくさんの量を読み込もうとすると、途中で止まって、永遠に読み込むという不可思議な状態になります。
この場合、本当はもう読み込まれているのに、エントリーに表示されなかったりします。
それで、何度も読み込んで…気がついたら鬼のようにエントリーに被ったデータが入ってしまう…となります(^。^;)
大切なのは、一度でアップロードしようと思わないことです(-_-;)
文章を何個かに分けて、ちょっとずつアップロードしたほうが成功します。
テンプレートのセーブの仕方
このテンプレートにリンクするファイルを設定する
テンプレートを設定するページに、「このテンプレートにリンクするファイル」というものがありますよね。
これ、実はサーバー内にテンプレートのバッ自クアップを取ってくれる便利なものなのです。
たとえばここでは「memo」とします。
（２）テンプレートの画面で、このテンプレートにリンクするファイルを設定するに
フォルダ名（今回はmemo）/ファイル名
と書く。
ファイル名は自分がわかりやすいものでOKです。
（３）保存すると、先ほど作ったフォルダ（memo）の中に、そのファイルが保存されています。
（４）「.htaccess」を「memo」フォルダにいれておきます。
これをいれておかないと外から覗かれてしまいます(^。^;)
（２）以下をコピーしてペーストします。
<Files *>
<Limit GET>
deny from all
</Limit>
</Files>
（３）「htaccess.txt」としてセーブします。
（４）FTPでアップロードした後に、名前変更で「htaccess.txt」を「.htaccess」に変更します。
これでOKです。
ちなみに…
このバックアップ、保存をするたびに書き換わります。
たまにデータを自分のパソコンなどに落としてセーブしておかないと、「ぼ～っ」としたすきに間違ったテンプレートを上書きしてしまうと大変なことになります(^。^;)
MovableTypeのインストール方法
■このブログのサーバーは、ロリポップです。
月額が安い上に親切なマニュアルもあるのでもう何年も使用させていただいております(^-^)/
■ロリポップでのMovableTypeのインストール方法
基本的に、ロリポップさんで、MobavleTypeの設置方法のマニュアルが公開されているので、この通りにやればまず問題はありません。
ロリポップ！レンタルサーバー - MovableTypeの設置の前に
（２）MovableType3.2をインストールして、ブログを作るまで
ロリポップ！レンタルサーバー - MovableTypeの設置方法
■3.17からのバージョンアップの場合はこちら
※私が思うに、アップグレードは失敗が多いので、以前のテンプレートのセーブと、データの書き出しを行って、新しく3.2をインストールしたほうが良い気がします(^。^;)
MovableTypeはこちらからダウンロードできます。
MovableType3.2
このブログはMovableType3.2で制作されています。
というわけで、MovableType導入での、ちょっとしたメモを公開します。
このブログはロリポップサーバーで作っているため…基本的にロリポップ仕様のお話ばかりになります…すみません(^。^;)
導入
バックアップ 便利リンク テンプレートヘッダーサンプル
<html lang="ja">
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="description" content="コンテンツの概要">
<meta http-equiv="keywords" content="キーワード１,キーワード２,キーワード３">
<link rel="stylesheet" href="スタイルシートのURL" type="text/css">
<script language="JavaScript" type="text/javascript" src="ジャバスクリプトのURL"></script>
</head>
<body>
</body>
</html>
ユーザビリティのポイント
ユーザビリティというのは、ようは「見に来てくれる人が使いやすいページ」のことです。
老若男女、全ての人が完全に満足するようなページデザインはなかなか難しい…というかできないのが普通です(-_-;)
たとえば、若い世代の人の中には、文字が小さくてデザイン的なページのほうが良いと思うかもしれないですが、お年寄り世代の人の中には、文字が大きくて読みやすいページのほうが良いと思うものです。
この二つを共有できるデザインは、結構大変なんですよねぇ…。
ここでは、広い目で見たユーザビリティのポイントについて説明します。
- ■文章を読みやすくする
書籍より、画面の文字の方が読みにくいのです。
文字の大きさも大切ですが、文字と文字の間（行間）も大切です。
行間が大体文字の大きさの1.5～1.8倍あると読みやすいです。 - ■ページの内容をわかりやすくする
ページの内容がわかりにくいと、ページを読んでもらえないどころか、多分ブラウザを閉じられてしまうかも…(-_-;)
文章に「見出し」をつけてわかりやすくしたり、ページの階層がわかりやすいような目次をつけるのも◎。 - ■ユーザーの慣れているデザインにする
一般的なデザインにすることで、感覚的にメニューの位置がわかると、使う方にとって便利です。
自分にとって使いやすいよりも、来てくれる人にとって使いやすいが大切です。
ウェブブラウザ
ページのアクセシビリティを考える場合、できるだけいろいろな環境のブラウザで表示確認をする方が良いです。
テーブルでページを組んでいる場合はそれほどではないのですが、スタイルシートでページを構成している場合、ブラウザによって恐ろしく見栄えが違っていたりします。
それぞれのブラウザの認識が違うから…なのですが…。
これを考慮して作るのが大変やっかいです。
基本的に作る⇒各ブラウザで確認する
の作業を繰り返すことになります(-_-;)
たとえば私は基本的にWindowsユーザーなのでMachintoshでの確認は困難なのですが…(^。^;)
できれば、すべてのOSやブラウザできれいに見えるページを作りたいですねぇ…。
なんだかんだいってシェアが多いので、チェックは怠らずに…
ちなみにver6の人がほとんどですが、5や5.5を使っている方も多少いらっしゃるようなので要チェック。
近頃、Firefoxを使っている人が多いですね。 動作が軽いため、結構気に入って使っている方が多いブラウザ。 Machintosh OSXの標準ブラウザ。 もちろん、Machintoshがないと導入できません。 Windowsでサファリのイメージを知りたい場合は、iCaptureが便利です。 iCapture ※index.htmlなどのファイル名まで入れないときちんと動作しません。
文法チェッカー
HTMLやCSSの規格に従ってページを作成するときに文法チェッカーを利用すると、文法的な間違いを簡単に見つけることができ、かなり便利です。
RSSで読もう
Web Designing（ウェブデザイニング）
WEB FLASH（ウェブフラッシュ）
WEB FLASH（ウェブフラッシュ）
Web Site expert(ウェブサイトエキスパート)
ＭｄＮ（エムディーエヌ）
Web Creators（ウェブクリエイター）