理想を目指したサイトのリニューアル

目次
はじめに
１．リニューアル作業
　１．HTML　XHTML、CSSの習得
　２．最終決定までのテスト
　３．標準的リニューアル作業
　４．構造の修正
　５．カラー修正
　６．内容の変更
　７．記事の削除
　８．リンク切れチェック
２．リニューアルの結果
３．リニューアルで学んだこと
４．今後の予定
まとめ

はじめに

９６年にWebサイトを開設して１４年が過ぎた。その間Webサイトのデザインは、マークアップ言語の HTML/XHTMLでデザインの全てを行う従来の方法から、HTML/XHTMLは骨組みを作り、スタイルシート言語の CSS で装飾する方向に変わってきている。

そこで、今回、CSSを併用して当サイトの文書スタイルを設定し、現在掲載中の約３４０の記事全部について、このスタイルでリニューアルすることにした。

ここに、そのリニューアル作業の実際とその結果についてまとめておくことにした。

１．リニューアル作業

１．HTML、CSSの習得

これまでは、マークアップ言語のHTMLでWebサイトの記事を書いてきたが、今回はスタイルシート言語のCSSを併用して、これまでの記事のリニューアルを行うことにした。そのために、CSSについて一通り理解し、leaning by doing で、リニューアルを行った。その間に習得したCSSの要点をまとめておく。

１）CSSの書式

CSSの書式は非常に簡単で、以下のように示される。

セレクター { プロパティ : 値 ; }

ここで、セレクター(selector)とは、スタイルを設定する対象、プロパティ(property)は、スタイルの種類、値(value)は、プロパティの値である。

セレクターにはいくつかの種類があるが、代表的なものには、１）要素セレクタ、２）クラスセレクタ、３）idセレクタ、４）疑似クラスセレクタがある。

今回使用したセレクターの、それぞれのスタイルシートでの記述例を示す

　　　スタイルシートの記述
　　　　1)要素セレクタ　　　　h1{color:#dc143c;}
　　　　2)クラスセレクタ　　　div.side {margin-left: 90px; margin-right: 90px; }
　　　　3)idセレクタ　　　　　div#container {border: solid 0px #000000;
　　　　4)疑似クラスセレクタ　a:link {color: #0000ff; }

２）CSSを設定する方法

　1.文章の中で書く（インラインスタイルシート）
　　文章の中の、スタイルを設定したい要素に、style属性の値を書く

　　　　　例：<h1 style="color:#dc143c;> </h1>

　2.ヘッダ部分に書く（ドキュメントスタイルシート）
　　HTML 文書の head 部分に、そのページ全体を対象に、style要素を使って、スタイルを書く

　　　具体的には、スタイルシートの種類の宣言をした後、スタイルを設定したい要素の後に、
　　　中括弧　{ 　 }　を付けて、プロパティ：値を書くと、
　　　ボディ部分のすべての要素に、この設定が適用される。

　　　　　例：<style type="text/css">
　　　　　　　h1{color:#dc143c;}
　　　　　　　</style>

　3.別ファイルに書き込み、それを読み込む（外部スタイルシート）
　　2.の形で設定したスタイルを、拡張子.css のファイル名で保存し、
　　　それを個々のHTMLファイルのヘッダ部から、リンクを張って読み込む。

　　　読み込むための設定は、ヘッダ部分にlink要素を用い、

　　　まず、　rel="stylesheet" 　で、スタイルシートを使うことを宣言し、
　　　次に、　type="text/css" 　で、スタイルシートの種類を述べ、
　　　最後に　href="base.css" 　で、読み込む css ファイル名を書く

　　　　　例：<link rel="stylesheet"
　　　　　　　type="text/css"
　　　　　　　href="base.css">

以上が理解しやすいように、模式図でまとめた。四角い箱はファイルを示す。
上段は css ファイル、下段は HTML ファイルである。

図1.CSS を設定する方法

３）外部スタイルシートファイル base.css の内容

　a {text-decoration: none }
　a:link {color: #0000ff; }
　a:visited {color: #0000ff; }
　a:hover {text-decoration: underline; }
　a:active {color: #dc143c;}
　body { background-color: #fffff0; color: #000000;
　　line-height:150%;
　　font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック", Osaka, sans-serif; }
　div#container {border: solid 0px #000000;
　　padding: 0x;
　　background-color: #fffff0;
　　width: 940px}
　div.side {margin-left: 90px; margin-right: 90px; }
　div.pref {margin-left: 90px; }
　h1 { color: #dc143c;
　　text-align: center; }
　h1.index {font-size: 250%;}
　h2 { margin-left: 50px;
　　margin-right: 50px;
　　font-size: 135%;
　　border-style: solid;
　　border-color: maroon;
　　border-width: 1px 1px 1px 15px;
　　padding-top: 8px;
　　padding-left: 20px; }
　h2.title { margin-left: auto;
　　text-align: center;
　　font-size: 170%;
　　border-style: none;
　　border-color: #fffff0;
　　border-width: 0px 0px 0px 0px; }
　h3 {margin-bottom: 0.4em; margin-left: 70px; }
　h3.title { margin-left: auto;
　　text-align: center;
　　border-style: none;
　　border-color: #fffff0;
　　border-width: 0px 0px 0px 0px; }
　h4 {margin-bottom: 0em; margin-left: 90px; }
　hr {margin-left: 90px; margin-right: 90px; }
　p {margin-left: 90px; margin-right: 90px; }
　p.note {margin-left: 120px; font-size: 90%; }
　p.sign {margin-right:90px; text-align:right; }
　p.tuika {margin-left: 90px; margin-right: 90px; font-family: serif; }
　p.nonp {font-family: "ＭＳ ゴシック",monospace; }
　span.nb {color: #dc143c; }
　span.link {color: #0000ff; }

　table {margin: auto;
　　text-align: center;
　　border: solid 0px gray;
　　border-collapse: collapse; }
　td {text-align: left;
　　border: solid 0px gray;
　　padding: 0.3em 0.5em; }
　th {border: solid 1px gray; padding: 0.3em 0.5em; }

　table.border {
　　border: solid 1px gray;
　　line-height: 1.2; }
　table.border td {border: solid 1px gray; }

　table.index {
　　width: 700px;
　　border: solid 1px gray;
　　line-height: 1.2; }
　table.index td {border: solid 1px gray; }

　table.site_map {
　　width: 840px;
　　border: solid 1px gray;
　　line-height: 1.2; }

　table.allworks {
　　width: 760px;
　　border: solid 1px gray;
　　line-height: 1.2; }

４）３つの方法を同時に使った場合の優先順位

CSSを設定する３方法を同時に使った場合の優先順位は、１）HTMLタグの中に、style属性の値を書く、２）ヘッダ部分の style に書く、３）外部スタイルシート読み込みの順になる。

これを利用して、Webサイト全体に適用したいスタイル指定は３）を使い、あるページだけに適用したい場合は２）を併用し、ページの一部だけに適用するものは１）を併用することで、こまかな設定ができる。

５）cascadingの意味

CSSは Cascading Style Sheet の略で、最もよく使われているスタイルシート言語である。

CSSでは、様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用される。CSS の cascading はこの特徴を示している。

６）コメント指定記号

ブラウザで表示されない説明用の文書を、コメント指定記号を使って書くことができる。
　　CSSでは：/* コメント */
　　HTMLでは：<!-- コメント -->

２．最終決定までのテスト

最初から「サイト用のフォルダ」に収めているファイルをリニューアルすると、失敗すれば元も子もなくす危険がある。

そこで、予め作っておいた「テスト用フォルダ」に、リニューアルするファイルをコピーし、それに処理を加える。いろいろシミュレーションを行って、納得がいけば、「サイト用のフォルダ」内の元のファイルを、この処理済ファイルに取り替える、という工程をとっている。

この「テスト用フォルダ」には、「サイト用フォルダ」と同じ条件でテストができるように、基本ファイルとして、以下の７ファイルを置いている。これは「サイト用フォルダ」にある元ファイルと同じもので、元ファイルが修正されれば、こちらも修正をし、常に同じ状態を保たせている。

１）Web文書スタイルのテンプレート(template.html)、２）外部スタイルシートファイル(base.css)、３）トップページ(index.html)、４）サイト・マップ(site_map.html)、５）更新暦(allworks.html)、６）テンプレートで使用する画像、７）トップページで使用する画像

もちろん、ルーティン化できたタイプのファイルのリニューアルは、直接そのファイルに対して処理を行う。

３．標準的リニューアル作業

１）テンプレートの読み込み

リニューアルを行うファイルの選択は、更新暦の新しいものから、古いものへ遡るのを原則とした。ただし、同じジャンルに属するものは、続けて、サイトマップから、古い方に遡ってリニューアルした。

まず、テンプレートファイルをエディターMIFESに読み込み、次にリニューアルを行うファイルをMIFESに読み込む。

２）内容部分を除く、先頭部分と後尾部分の書き換え

1.テンプレートファイルの先頭からタイトルまでの部分を、リニューアルを行うファイルの先頭に
　コピーする。
2.<title>記事のタイトル</title>を書き換え、
3.パンくずリストを書き換え
4.目次のある場合は、これを書き換える
5.古い部分を削除する
6.テンプレートファイルの最後尾から更新年月日の前までの部分を、リニューアルを行うファイルの
　更新年月日のすぐ下にコピーする。
7.パンくずリストを書き換え、不要となった古い部分を削除する

３）内容部分の不要HTMLタグ除去

リニューアルするファイルの中の不要HTMLタグを削除する。これは<BR><BR>が大半で、<P></P>の代わりに使ってきたので、膨大な数になる。これを行うと、ファイルの文章が分かりやすくなる。

４）内容部分のHTMLタグをCSS対応に置換

これまで見出しタグ（<H1><H2><H3><H4>など）をあまり使って来なかったり、文字のカラーもHTMLタグで行ってきたので、これらをCSSに対応するように置換する。

５）微修正

見出しの番号付けが、アルファベットであったり、ローマ数字だったり、そのほかいろいろあって統一されていない場合には、これを大分類１．２．３．...、中分類1.2.3....小分類1)2)3)...に変更する程度の微修正を行う。

６）ブラウザで表示し、デザインを確認

最終結果をブラウザで表示する。これによって、入力ミスを発見できるほか、テンプレートの修正、あるいは、読み込む外部スタイルシートファイル(base.css)の修正にまで発展することもある。

７）ファイルをサーヴァーに転送し更新

FTP転送ソフト(FFFTP)を使ってサーバーにファイルを転送する。

４．構造の修正

構造の大きな修正は行わなかったが、数個の連続記事を統合して、一つの記事としたことはある。

記事の統合

パソコン物語、エーゲ海クルーズ、光のルネサンス２００５では、数個の記事を統合して一つにした。これによって、統合された記事の数だけ、サイトの記事は減った。

いずれも、目次を作り、それに従って構成記事を統合した。ページの最下段に、「次へ」「戻る」のボタンを付けて、目次に戻らなくても記事を選べるようにした。

５．カラー修正

これまでは、全体の背景色をベージュ(#f5f5dc)としてきたが、より明るいアイボリー(#fffff0)に変えた。また、注意喚起色として、深紅(#dc143c)を使ってきたが、これをマルーン(#800000)に変更した。それ以外の配色の変更はない。その結果、ベージュがアイボリーに変わったほかは、カラー自体に変更はない。

６．内容の変更

今回は内容の変更は行わず、一部に読点を加えた程度の微修正だけを行った。それは、リニューアルの作業量が膨大で、そこにまで手をつける余裕がなかったことも関係するが、それよりも、推敲をするのが好きでないという性格の方が大きいのではないかと思う。

７．記事の削除

これまでに掲載した記事は、更新暦（制作目録）によれば、４９４件である。昨年９月に大量に削除したことがあるが、今回は１０数件を削除したので、残存している記事は３２４件となった。これは、全記事の６６％に当たる。これによって、記事はかなり精選されたのではないかと思っている。

            49年以前 70〜79 80〜89  90〜95  96 97 98 99 00 01 02 03 04 05 06 07 08 09 10   計    % 
残存記事数     3       2     11      14    10  5  7  5  3  7 23 16 20 19 33 44 72 24  6  324 65.6%
掲載記事数     4       2     11      15    17 30 20 21 22 21 39 26 35 28 41 50 81 25  6  494      

02年23件の内14件は「心に生きることば」、07年の44件の内32件は飛鳥世界一周クルーズ関係、08年の72件中55件は音楽関係が占め、それぞれが、その年に集中的に取り組んだ課題であった。

８．リンク切れチェック

これまで、Webの最も重要な機能として、ハイパーリンクと考えてきたので、できる限りリンクを張ってきた。その数は5000を超えて、まさにWeb（蜘蛛の巣）状態である。記事削除によって生じる一番の問題はリンク切れで、昨年９月に100件以上の大量削除を行った時に、多数のリンク切れが発生し、困惑した。このリンク切れは、サイトの信頼性に大きく影響する。

そこで、フリーウエアの「孤島発見器 ver2.755」を Vector で見つけ、これを使ってリンク切れの解消を図った。今回、リンク数は、5913件あり、この孤島発見器のおかげで、リンク切れを1件にまで減らすことができた。

２．リニューアルの結果

Web記事の文書スタイルで取り上げた「目標とする記事のスタイル」に、今回のリニューアルがどれだけ反映されているかを検討してみた。

１．読みやすい
　　1）空白行　　これは変わりなし
　　2）ページ両端の余白　　約30px→90px
　　3）行間　　1.5→1.5（変わりなし）
　　4）ページの幅　　不定（最大モニターの幅）→940px

２．分かりやすい
　　4)階層構造を分かりやすくする工夫
　　　大分類は、見出しの大きさは<h2>、文字の色は黒色、開始位置はページの左端から 50px、
　　　　　前に栗色■をつけ、ボーダーで囲む。段落より40px左側に出る
　　　中分類は、見出しの大きさは<h3>、文字の色は黒色、開始位置はページの左端から 70pxで、
　　　　　段落より20px左側に出る
　　　小分類は、見出しの大きさは<h4>、文字の色は黒色、開始位置はページの左端から 90px
　　　　　段落の始まる位置は、左端から 90pxに設定しているので、小分類の見出しは、段落と
　　　　　同じ位置から始まることになる
　　　注釈などの項目の開始位置は、ページの左端から 120px 、文字の大きさは標準の 90% とする。

　　　今回のリニューアルで、最も効果のあったのが、この部分ではないかと思う。

３．関連記事にすぐ移れる
　　今回新たにリンクを張ったのは、トップページ付けた５０個だけで、5900のリンクのほとんどは、
　　これまでに張ってきたものである。

４．記事をみつけやすい
　　これも、新たに手を加えたところはない。

５．少ない手順で求める記事にアクセスできる
　　これは、トップページからのリンクを１５から６５へ５０件増やしたので、サイトマップを通す
　　手順が１ステップ少なく、記事にアクセスできるようになった。

　　そのため、トップページは 青い蜘蛛の巣城 の様相を呈していている。

６．情報の新鮮度が分かる
　　掲載年月日を段落よりも左側、ページ左端の位置に記載してきた。これは、これまでと同じだが、
　　ページの幅と段落の幅が、約30pxから、90pxになったので、より見つけやすくなった。

７．掲載する記事を簡単に作れる
　　この記事が、リニューアル後の最初の記事である。２０％くらい簡単になったように思う。
　　特に階層構造を持った複雑な記事の場合は、３０％くらい簡単になるのではないかと予想できる。

８．見た目がきれい、少なくとも不快ではない
　　これもかなり良くなったのではないかと思う。

　　その理由として、以上のいろいろな面でのリニューアル他に、フォントを変えたことも大きく関係し
　　ているのではないかと思う。

　　font-familyの第１順位に「メイリオ」次に「Meiryo」、その次に「ＭＳ Ｐゴシック」を選んだ
　　ことで、このフォントが搭載されている「VISTA」や「７」では、本当に美しく、配置の崩れない
　　文字で表示される。

　　「XP」でも、このフォントをインストールすれば、このフォントで表示されるので、インストールを
　　おすすめしたい。

３．リニューアルで学んだこと

１．CSS　HTML/XHTMLの素晴らしさが理解できた

Webデザインの現在の主流となっている「CSS　HTML/XHTML」という方法の素晴らしさが、実体験によって理解できた。その素晴らしさは、「魔法の手」と表現したくなるほどであった。

２．CSSの使い方の基本を身につけることができた

CSSを使ってリニューアルを行う作業の中で、CSSの使い方の基本的な部分は、ほぼマスターできたのではないかと思える。個々のことは、CSSの辞書や解説書を、必要に応じて、ひもとけば良いだろう。

３．MIFESの威力を再認識した

私の記事は長文が多く、印刷すれば１０ページ、２０ページのものが多い。昨年の旅行記などは、７９ページと６５ページになった。このような長文の記事を、３００件以上解体して、１ヶ月ばかりでリニューアルできたのは、２０年以上愛用してきたエディターMIFESのお陰であり、これなくしては、とうてい不可能だった。

そのMIFESの使い方でも、新たな工夫を身につけることができた。

４．階層分類記号の有用性を再確認した

私は、文章のほとんどをMIFESで書いてきた。その際に、階層構造を分かりやすくするため、■◆●○・を考案して使ってきた。この階層記号は、Web記事のリニューアルの際にも有用だった。

■＝<h1>、◆＝<h2>、●＝<h3>、○＝<h4>と考えれば、ほぼ当たっている。

５．テスト用フォルダを作った

これまでは、新しいWeb記事の原稿ファイルをデスクトップ上に置いてMIFESに読み込み、「サイト用のフォルダ」から、参照用のファイルをMIFESに読み込む方法で、記事を制作してきた。

今回のリニューアルを、このような簡単な方法で行うことは、実際問題とし不可能で、分けが分からなくなり、収拾がつかず、間違いが多発するおそれが多分にあった。

そこで、「テスト用フォルダ」を作り、ここで、テスト、シミュレーションを繰り返して、完成した記事を「サイト用フォルダ」に移す方式を確立した。言ってみれば、試作室（実験室）でテストして、OKの製品を製品倉庫に移動させる方式である。

この方式を、これからの新しい記事の制作にも適用させることで、効率は非常に良くなると思われる。リニューアル後、最初のタイトルとなるこの記事は、この方式で制作した。

４．今後の予定

HTMLのタグを小文字にする

将来、マークアップ言語を、「HTML」から「XHTML」に変更する予定でいる。「XHTML」は「HTML」に似ているが、タグは小文字使用と規定されているため、現在使用中の大文字の「HTML」タグを小文字に書き換えることにしている。

今回のリニューアルで、最初は、それも平行して行ったが、余分の時間をとられるために中断し、後日行うことにした経緯がある。

<img>タグの alt 属性に、代替テキストを記入する

<img>タグの alt 属性に代替テキストを書くべきだということは知っていた。しかし、面倒なことと、画像を表示できない状況が想像できなくて、これまで放置してきた。

しかし、Web記事の文書スタイルをまとめた際に、目の不自由な人が読み上げブラウザで、この代替テキストを利用していることを知り、これからは代替テキストを付けようと決めた。

リニューアル作業と平行して、かなりの画像に代替テキストを付けたが、こちらも余分の時間を取られるのが惜しくて中断し、後日行うことにした課題である。 alt 属性を記入する際に、title 属性を記入するのも、同じ操作でできるため、こちらも同時に行うように予定している。これによって、マウスを画像に近づけると、説明文が表示される。

内容の修正

今回のリニューアルでは、時間的にも、内容の修正をする余裕はなく、推敲はあまり好きでない性格のため、ほとんど行わなかった。これからは、読みやすくするために、積極的に読点を加えていきたくは思っている。その際、必要と思われる箇所では内容の修正を加えようとも考えている。

まとめ

今回のリニューアルで、目標値の８０％が達成されたと主観的には思う。８０点主義で生きてきた私は、大いに満足している。

今回のリニューアルで、CSSの素晴らしさにすっかり魅せられてしまった。スタイルシートの値を記述したcssファイルを作り、これを、Web記事のHTMLファイルが読み込むように設定しておく。このスタイルシートファイルの値を変更すると、それを読み込んでいるWeb記事ファイルのデザインは、いくら記事数が多くても、一瞬にして、新しいデザインに変わる。今回のリニューアルでは、３４０件の記事について、それを体験できた。まさに、魔法の手であった。

個別のWeb記事の修正は、そのHTMLファイルのヘッド部分の style に書けば、こちらが優先される。また、文章のごく一部分にだけ、別のスタイルを適用させたい場合は、文章の中のスタイルを設定したい要素に、style属性の値を書けば、こちらが優先される。

同時に、この３種類の方法で設定されたデザインは、通常のプログラムのように、条件判断の分岐部分を設けなくても、段階的に、流れるように、正しく処理が実行される。「cascading」「段階的に行う」というのは、このスタイルシート言語の処理の仕方に由来しているのではなかろうか？

同じころWebサイトを開設した知人が、また、同じときに、同じようにCSSを使って、サイトのリニューアルを始め、ため息が出るほどの美しいサイトに、作り変えつつある。そのサイトの名は、寅baba のパソコン部屋から、制作者は古希を越えた女性で、１４年前、この方にPCの手ほどきをさせていただいた。

リフォームは衣服の仕立て直しや建物の改装に使うことばと知って、リニューアルに変更した。