MTサイト構築Tip集

RGBによる表記法

Webサイト作成のときに、画像ファイルの以外の要素はCSSで色指定することが一般的です。そのCSSでは色はRGB形式で示します。

#○○△△□□ （○○：赤Red、△△：緑Green、□□青Blue）
○○、△△、□□はそれぞれ16進数：例 #FF0000：赤

HSBによる表記法

配色を行うときに適した色の指定方法で色相(Hue)、彩度(Saturation)、明度(Value または Brightness)を使って色を直感的に指定することができます。

ただし、CSSはRGB形式で指定しなければならないので、HSV→RGBに対応した色設定ソフトを使う必要があります。
以下にフリーで使える色設定ソフトをご紹介します。

・FE - Color Palette
http://www.vector.co.jp/soft/win95/net/se190947.html

・すぽいと君
http://www.vector.co.jp/soft/win95/net/se386163.html

・Color Dialog 003
http://www.vector.co.jp/soft/win95/net/se085351.html

色相、明度、彩度を色の三属性といい、これを理解することで色を直感的に認識できるようになります。

アクセス解析を設置することで、ただ単にアクセス数だけでなく、サイトの訪問者の行動が詳細に把握できるようになります。

訪問者の行動の情報を役立てることにより、サイト制作者は今後にむけて、よりよいサイト製作、改善を行うことができます。

アクセス解析で知ることができることの例

1. トータルアクセス数とユニークアクセス数
2. アクセス時間帯
3. 訪問者の使用環境(OS、ブラウザ、使用画面の解像度、等）
4. リンク元はどこか
5. どんな検索キーワードを使って訪問されたか

ソースコードを記事の中で表示するためには、<pre>, <code>タグを組み合わせが一般的に使われています。

ここではSoh Tanakaで示されているデザインを参考に<pre> <code>を使ったソースコードの表示方法をご紹介します。

<pre> <code>のCSS定義例

pre {
    font-size: 12px;
    padding: 0;
    margin: 0;
    background: #f0f0f0;
    border: 1px solid #ccc;
    line-height: 20px; /*--Height of each line of code--*/
    background: url(pre_code_bk.png) repeat-y left top; /*--Background --*/
    width: 600px;
    overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
    overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

pre code {
    margin: 0;  /*--Left Margin--*/
    padding-left: 5px;
    display: block;
}

<pre> <code>を使ったソースコードの表示例

<mt:If name="datebased_archive">
     <mt:Ignore><!-- Title for category-monthly entry listings --></mt:Ignore>
     <h1 id="page-title" class="archive-title"><$mt:CategoryDescription$>アーカイブ</h1>
<mt:Else>
     <mt:Ignore><!-- Title for category entry listings --></mt:Ignore>
     <h1 id="page-title" class="archive-title"><em><$mt:CategoryDescription$></em>の最近のブログ記事</h1>
</mt:If>

MTではカテゴリは文字コード（アルファベット、五十音)順にソートされますが、実際の運用では、重要なコンテンツが上位に表示されるようにしたいところです。

前回の記事ではSuperSortプラグインを使って、カテゴリを並べ替え直すことをご紹介しましたが、今回はMTの標準機能をつかって並び替える方法をご紹介します。

[MTのデフォルトカテゴリ順]
文字コード順に表示されてしまう．．．
”カスタマイズ”を先頭にしたい！！

[標準機能を使って順番を変更]
”カスタマイズ”を先頭にする！！

Mobable Typeの出力するページをPHP化する検討をします。

PHP化する目的

1.PHPスクリプトが使えるようになる。
htmlのままですと、使えるプログラムは、MTタグやJavaScriptになりますが、PHP化することで、よりダイナミックなページの表現が可能になります。

2.再構築時間の短縮
サイドバーなどの別ファイルにして読み込ませるモジュール化などにより、再構築の時間を短縮できます。

3.不要なファイル削除の手間を省く
PHP化の設定変更の結果、不要になったファイル(index.html, archive.html, etc)の削除作業が最小ですみます。
後でやるとカテゴリフォルダごとにindex.htmlファイルを削除、またブログ記事をすべて再構築せねばならず、手間がかかります。

PHP化の手順

1. メインページの拡張子変更
2. アーカイブインデックスの拡張子変更
3. アーカイブ（ブログ）記事の拡張子変更
4. サイトの再構築を行う
5. 不要な「.htmlファイル」を削除する

フォントの種類は自分が見てほしいと思っているフォントで、サイトを見てほしい場合に指定します。

指定しない場合は、ブラウザののデフォルトのフォントで表示されますが、それだとブラウザによって閲覧イメージがかなり変わってしまう場合があります。、時には、サイトの表示がくずれてしまったり、サイト作成者が意図していようなトラブルが起こることがあります。

そのため、font-familyは指定しておくのが、オススメです。

font-familyは以下の５つのグループがあります。

[フォントの一般分類名]

Webサイトを印刷する際には、画面表示とは変えたい場合があります。

[(例)印刷時に改善したいこと]

1. 中央のメインカラムだけを印刷させたい
2. 印刷のときに、白黒でもわかるような配色に変えたい
3. カラ―インクを大量消費しないように配色を工夫したい

等々、印刷の際には印刷媒体にあったレイアウトを工夫する場合があります。

このような場合、media属性を指定することにより、印刷用のスタイルシート(CSS)を指定することはできます。

[印刷用のスタイルシートの指定]

<link rel="stylesheet" href="styles.css" type="text/css" media="all"/>
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

media=”all” : すべての出力媒体(画面、印刷、等）に適用される
media=”print” : 印刷時だけに適用される

今回は、３カラムのMTサイトで中央カラムのみを印刷させたい場合の設定例を示します。

CSSでは、各要素を「ボックス」と呼ばれる四角形領域の概念に適用されます。

ボックスは内側から順に、内容領域、Padding、border、marginと呼ばれる部分によって構成されます。

[ボックスの概念]
内側から順に、内容領域、padding、border、marginと呼ばれる部分によって構成されます。

実際のソースコードで、その動作を検証してみます。

MTではブログ記事の公開時に更新Pingをポータルサイトへ送信する機能が標準で実装されていますが、デフォルトでは、この機能がOFFになっています。

更新Pingを送信することで、各ポータルサイトでブログ記事が掲載される機会が増え、アクセスアップにつながりやすくなります。

ここでは設定しておきたい主要な更新Pingサーバを紹介します。

[更新通知先 ： MTのデフォルト設定では．．．]
更新pingはどこにも送信されないようになっている

[更新通知先の設定]
その他の項目へ主要な更新pingサーバを設定！