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

色相とは赤、黄、緑、青といった色味の違いのことです。>

色を環状にし、スペクトルの両端である赤と紫を滑らかに結んだものを色相環といいます。

下記のように24色相の最高彩度の色を環状に配列した色相環が一般的によく用いられます。

[24色相環]

明度

明度とは色の明るさの度合いのことです。

明度が高いほど色は明るく、明度が低いほど暗くなります。

  ←高い                                         明度                                       低い→

彩度

色の鮮やかさの度合いのことです。

彩度が高いほど色の純度が高くなり、鮮やかに見えます。

鮮やかさは、各色に白、灰、黒などの混合程度により変化し、白、灰、黒の度合いが高くなるにつれて彩度が低くなります。

最も鮮やかな色、つまり最高彩度の色を原色・純色などと呼ばれます。

また彩度が低くなるにつれ、色はくすんだ感じになりますが、色みが完全になくなった白、灰、黒をまとめて無彩色と呼びます。

     ←高い                                     彩度                                       低い→

ここでは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>

1. <pre> <code>の定義をスタイルシート(CSS)に記述する。
2. ソースコードの特殊文字を変換する
3. （補足）印刷用の<pre>定義

1. <pre> <code>の定義をスタイルシート(CSS)に記述する。

<pre> <code>をスタイルシート(CSS)に定義します。

<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;
}

backgroundで使う背景画像　（右クリックで画像を保存で利用してください）

2. ソースコードの特殊文字を変換する

記事を書くに当たって、<pre><code>～</code></pre>で囲まれた領域にソースコードを入力していきます。

<pre><code>入力領域

<pre><code>   ソースコード………………………   ソースコード………………………   ソースコード………………………</code></pre>

ソースコードで&, <, >, “ などの特殊文字があるときは、変換する必要があります。

変換が必要な文字コード例

この変換が大変ですが、自動的に変換してくれるJavaScriptを提供しているWebサイトがあります。大助かりでよく利用させていただいています。

特殊文字変換用JavaScript

上記サイトを用いて文字を変換後のソースコードを、<pre><code>～</code></pre>で囲まれた領域に入力します。

<pre> <code>を使ったソースコードの入力例

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

これにより実際の表示は以下のようになります。

<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>

3.（補足）印刷用の<pre>定義

ソースコードは印刷して見たい場合があります。

現在の<pre>定義では紙面よりはみ出した部分は印字されません。

実際にははみ出た部分は次行へ折り返して印字するほうが都合がよいと思います。

そんな時は以下のような印刷用の<pre>定義を追加しておくとよいと思います。

以下の定義は印刷用のスタイルシート(CSS)に記述してください。

印刷用<pre>の定義例

pre{
     white-space: pre-wrap;      /* CSS3サポートブラウザ向け (Opera8等) */
     white-space: -moz-pre-wrap; /* Firefox サポート用 */
     white-space: -o-pre-wrap;   /* Opera 7 サポート用 */
     white-space: -pre-wrap;     /* Opera 6 サポート用 */
     word-wrap: break-word;      /* IE サポート用 */
}

.layout-twt #alpha {
    width: 956px;  /*　中央カラムを紙面いっぱいに広げる */
}

#beta{
    display: none; /*　左サイドバーは印刷しない */
}

#gamma{
    display: none;　/*　左サイドバーは印刷しない */
}

印刷用のスタイルシートについては以下の記事が参考にしてください。

印刷用のスタイルシート(CSS)を指定する

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

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

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

以下のようなboxの設計を考えてみます。

上記boxのHTML/CSSソースコード例は以下のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> 
<title>CSSボックスの概念</title> 
<style type="text/css">
<!--
body{
  font-family: 'MS Gothic', monospace;
} 
.sample-column1{
    width: 300px;
    height: 300px;
    margin: 30px;
    border: 30px solid #ff0000;  
    padding: 50px;
    background-color: #ffff00;
    overflow: hidden;
} 
-->
</style> 
</head> 
<body> 
<div class="sample-column1">内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。</div>
</body> 
</html> 

上記ソースコードにおける実際の表示イメージ 表示／非表示

(補足)borderを利用した見出し(タイトル)への使用例

HTML/CSSソースコード例 表示／非表示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> 
<title>borderを利用した見出し(タイトル)への使用例</title> 
<style type="text/css">
<!--
body{
    font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.midashi1{
    border-style: solid;
    border-color: #ffcc66;
    border-width: 1px;
    background-color: #ffffcc;
    margin-bottom: 20px;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #000080;
}

.midashi2{
    border-style: solid;
    border-color: #cc3300;
    border-width: 0 0 3px 0;
    margin-bottom: 20px;
    padding: 10px 0 2px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #000080;
}

.midashi3{
    border-style: solid;
    border-color: #228b22;
    border-width: 3px 0 3px 0;
    margin-bottom: 20px;
    padding: 5px 0 5px 5px;
    font-size: 16px;
    font-weight: bold;
    color: #000080;
}

.midashi4{
    border-style: solid;
    border-color: #cc3300;
    border-width: 0 0 3px 20px;
    margin-bottom: 20px;
    padding: 5px 0 5px 5px;
    font-size: 16px;
    font-weight: bold;
    color: #000080;
}

.midashi5{
    border-style: solid;
    border-color: #228b22;
    border-width: 0 0 0 20px;
    background-color: #98fb98;
    margin-bottom: 20px;
    padding: 5px 0 5px 5px;
    font-size: 16px;
    font-weight: bold;
    color: #000080;
}

.midashi6{
    border-left: 20px solid #cc3300;
    border-right: 2px solid #cc3300;
    border-bottom: 2px solid #cc3300;
    background-color: #ffdab9;
    margin-bottom: 20px;
    padding: 5px 0 5px 5px;
    font-size: 16px;
    font-weight: bold;
    color: #000080;
}

-->
</style>

</head> 
<body> 
<div class="midashi1">midashi1 : サンプル見出し1</div> 
<div class="midashi2">midashi2 : サンプル見出し2</div> 
<div class="midashi3">midashi3 : サンプル見出し3</div> 
<div class="midashi4">midashi4 : サンプル見出し4</div> 
<div class="midashi5">midashi5 : サンプル見出し5</div> 
<div class="midashi6">midashi6 : サンプル見出し6</div> 
</body> 
</html>

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

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

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

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

Yahoo!ブログ検索

URL : http://blog-search.yahoo.co.jp/

ping送信先 : http://api.my.yahoo.co.jp/RPC2

Googleブログ検索

URL : http://blogsearch.google.co.jp/

ping送信先 : http://blogsearch.google.com/ping/RPC2

gooブログ

URL : http://blog.goo.ne.jp/

ping送信先 : http://blog.goo.ne.jp/XMLRPC

Technorati(テクノラティ)ブログ検索

URL : http://www.technorati.jp/

ping送信先 : http://rpc.technorati.jp/rpc/ping

ping.bloggers.jp

URL : http://ping.bloggers.jp/

ping送信先 : http://ping.bloggers.jp/rpc/

Blog People

URL : http://www.blogpeople.net/

ping送信先 : http://www.blogpeople.net/ping

主要な更新pingサーバー(コピー用)

http://api.my.yahoo.co.jp/RPC2
http://blogsearch.google.com/ping/RPC2
http://blog.goo.ne.jp/XMLRPC
http://rpc.technorati.jp/rpc/ping
http://ping.bloggers.jp/rpc/
http://www.blogpeople.net/ping

しかし、サイトによっては投稿者は１人である場合があり、ここで表示される投稿者名が必要ない場合があります。

ここでは投稿記事から投稿者名を削除するカスタマイズ方法を記述します。

[変更前] 投稿日時の前に投稿者名が表示される

[変更後] 投稿者名を削除する

1. ブログ記事の概要 (テンプレートモジュール)
2. ブログ記事 (アーカイブテンプレート)

1. ブログ記事の概要の修正

テンプレートモジュール：ブログ記事の概要  6行目

[修正前]

<span class="byline">
    <mt:If tag="EntryAuthorDisplayName">
                <span class="vcard author"><$mt:EntryAuthorLink show_hcard="1"$></span> (<abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)
    <mt:Else>
                <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
    </mt:If>
</span>
  

[修正後] 青の部分を削除し、赤の部分を残す

<span class="byline">
    <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)
</span>

2. ブログ記事の修正

アーカイブテンプレート：ブログ記事  31行目

[修正前]

<span class="byline">
    <mt:If tag="EntryAuthorDisplayName">
                <span class="vcard author"><$mt:EntryAuthorLink show_hcard="1"$></span> (<abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)
    <mt:Else>
                <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
    </mt:If>
</span>

[修正後]青の部分を削除し、赤の部分を残す

<span class="byline">
      <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
</span>

以上です。

[MTのデフォルトリッチテキストエディタ]
機能的にちょっと物足りない

[TinyMCEのエディタ画面]
機能が豊富に用意されている

1. 「ブログ記事」や「ウェブページ」を編集する際に、高機能なWYSIWYGエディタを利用できる。
2. 「本文/続き」だけでなく、「概要」やその他カスタムフィールドで追加したフィールドにも適用することができる。

TinyMCE-MTPluginの画面イメージ

以下、公式サイトの説明に従って補足します。

TinyMCE-MTPlug公式ページ

以下の「TinyMCE-MTPluginとは」に概要の説明どダウンロードページへのリンクがあります。

インストール

1. ダウンロードページからTinyMCE_MTPluginをダウンロードします

この記事を書いた時点の最新バージョンは「TinyMCE_ja-0.1.6.5.zip」

2. ダウンロードしたファイルを展開します。

3. TinyMCE_MTPlugin_ja_{version}/mt-static/plugins/TinyMCE を、インストール先のMTに mt-static/plugins/TinyMCE としてアップロードします。

4. TinyMCE_MTPlugin_ja_{version}/plugins/TinyMCE を、インストール先のMTに plugins/TinyMCE としてアップロードします。

5. 以上で設置完了です