【隠居のパソコン備忘録： （続）ブログ（MT4.1）の表示レイアウトを変更する】に記録したように、表示レイアウトを変更してから、いろいろなトラブルが出てきた。
　MovableType（MT) で構成している私のブログ・サイトには、右サイドメニューに日付やカテゴリーで管理されない 野鳥日誌であるとか、Jazz Player のリストなどの独立したウェブページにリンクするボタンを置いている。これらのリンクボタンをクリックしても、「ページが見つけられません」という表示がでて、リンクできないようになった。ネットをサーチしてみたりして、いろいろと弄ってみたが、知識の乏しい老人では、原因がわからない。思い余って、テンプレート使わさせてもらっている「小粋空間」の荒木さんに、質問を投げかけてみた。だが、上っ面だけの知識では教えてもらったことが、よく理解できない。
　とりあえず、MT のサイトの外に、静的なウェブページを作成し、リンクすることで急場をしのいだ。

　今回、何が原因だったのかがよくわからないのであるが、なんとか修復することができたので、修復した方法を備忘録として記録しておきたい。　

1. MT ではブログ作成作成画面と同じように、 ウェブページを作成・編集する画面があるのであるが、ブログ作成・編集では、表示するファイル名は、/blog-url/yyyy/mm/dd_HHMM.php (2013/02/06_1131：2013年2月6日11時31分の意）というフィル名が自動的に付けられる。（変更はできるようだが）　これに対して、ウェブページのフォルダー名・ファイル名は自分でつける。例えば、、/blog-url/web/birds-diary-2012.php という具合に下線部分を自分で決める。
   ブログの公開で、「アーカイブテンプレートをダイナミックに構築する」を選択し、ファイル拡張子 .php としていると、ファイル名の拡張子はすべて php となる。
2. このウェブページのファイルを、Blog URL フォルダーの直下に置くなどして、ファイル名を変更し、表示を確認（プレビュー)して問題がなければ、保存する。
3. ウェブページへのリンクは、「テンプレート・モジュール」の「サイドバー」の中で指定しているので、上で指定したファイル名（例：/blog-url/web/birds-diary-2012.phpを間違えないように書き換える。書き換えた「サイドバー」テンプレートを保存し、サイトの再構築（すべてのファイルの再構築とした）をすると、ブログの右カラムに置いているリンクボタンのクリックで、ウェブページが表示されるようになった。ダイナミック・・パブリッシングになっているので、サイトの再構築はそんなに時間がかからない。

　修復できてみれば、大した作業ではないのであるが、それまでに同じような試みをして、上手くいかなかったのは、きっと入力文字の綴りを間違えるなど初歩的なミスをしていたせいかもしれない。

　MTサイト内のウェブページへのリンクにしておくと、MTサイトでカストマイズしている最新のカレンダーが使えるなど、体裁が良くなる。ただし、内容によっては、MTサイト外で表示したほうがいい場合もある。たとえば、DIY作品集などは、静的なウェブページのほうが、スッキリしていいようだ。

　【隠居のパソコン備忘録： （続）ブログ（MT4.1）の表示レイアウトを変更する】 で記録したが、友人の指摘で、ヘッダー部分にある横長カレンダーからエントリーへのリンクが機能していないことがわかった。原因を探ると、プラグインの横長カレンダーを導入した時に作ったアーカイブテンプレートが表示レイアウトを変更した時に、消失していることが判明し、過去の記録を見て修復することができた。
　と思っていたのだが、なぜか２月になって投稿した日の色が変わらないのとその日の投稿タイトルが表示されなく当然のことながら、該当エントリーにリンクしない。

　私が運営している Studio YAMAKO でも横長カレンダーではないが、同じ仕樣のテーブル型のカレンダー(Kinarie&May 作のFlash carender)を使っている。ただ、このカレンダーは正常に機能している。
　このカレンダーの仕樣をそのままコピーすれば、うまくいくはずと考え、横長カレンダーをやめて、通常型カレンダーを設置することにした。だが、かなり注意して、再設置したはずなのに、うまくいかない。Studio YAMAKO のアーカイブ・テンプレートなどあれこれと比較してみたが、原因がはっきりしない。ほぼ諦めかけて、もう一度仔細に、比較してみると、さして気にもしていなかったブログのテンプレートのうちアーカイブ・テンプレートの【ブログ記事】テンプレート行の右側にある「ダイナミックテンプレート」に、Studio YAMAKO の場合はチェックが入っているのに、私のブログ Atelier ではチェックが入っていないことがわかった。

これにチェックを入れる方法がわからない。「ダイナミックテンプレート」なるものがよく分かっていなかったので、ネットでサーチしてみたが、理解が進まないが。どうやら「ダイナミック・パブリッシング」という言葉を昔使ったような気がしたので、自分自身のブログをサーチしてみるとありました。
　2008年6月に、MovableType 3.3 から 4.1 にアップグレードしたときに苦労した事項の備忘録である。
　これらの記録を參考に、因果関係がよくわかっていないのだが、ブログ管理画面の【設定】⇒【ブログの設定】⇒【公開】の画面で、【公開方法】セレクトボックスから「アーカイブテンプレートのみダイナミックで構築する」を選択すると、「アーカイブテンプレート」の「ブログ記事」に、ダイナミックテンプレートのチェックが点くようになった。MT4.1にバージョンアップするときに、その辺りを学習したつもりであるが、5年も前のことは、さっぱり記憶が蘇らない。
　そのためにも、ささいなことでも記録していくようにしたいと思う。

　【隠居のパソコン備忘録： ブログ（MT4.1）の表示レイアウトを変更する】で記録したように、表示レイアウトを変えてから、色々なバグが出ている。今まで、当ページを訪問していただいていて、お気に入り（Bookmark）に登録していただいてような方が、登録しているURLをクリックすると表示が崩れてしまう。変更前のレイアウトのキャッシュを保持しているからである。一旦、古い登録や Cookie（キャッシュ） を削除して、新たにアクセスしていただくと上手く表示されるのだが、メールでもいただかない限り、それを案内する方法が思い当たらない。何かいい方法があれば教えてもらいたいと思う。

　その他にもいくつかの不具合があったが、中でもなかなか原因がつかめなかったバグ（？）は、右サイドメニューに置いている【このブログのキーワードページ】（TagCloud のページ）の表示である。ページの表示が崩れるのである。このページは、自分で乏しい知識をもとに行ったカストマイズである。このページを作った時の記録が、ブログに残っているのであるが、この記録が不完全であった。新たに、tagcloud ページ用のインデックス・テンプレートを作って対処していたのであるが、新たにインデックス・テンプレートを作るとの記述が抜けていた。
　スタイルシート（CSS）も、インデックス・テンプレートの一つであるが、これらを訂正した時には、ブログの再構築が必要である。上述の記録にある方法で、tagcloud 用のインデックス・テンプレートを作成し、再構築を行うと正常に表示されるようになった。
　5年も前のことは、すっかり忘れてしまっている。そのための記録なのだが。

（追記：2013/1/28）修復するのに、多大な時間を使った項目が2つあるので、記録しておきたい。

1. 先にも記録したようにメインページのおかしなキャッシュが残っていて、ブログ・メインページ（http://n-shuhei.net/atelier/ ）にアクセスすると、1月8日現在の形の崩れたページが表示された。
   原因をいろいろと探ったが分からずあきらめていたところ、インデックス・テンプレートのメインページテンプレートでの出力ファイル名が、index.php となっていなければならないところ、index.html となっていた。いつもそうだが、単純なミスである。
2. いつも訪問していただいている友人の指摘で、ヘッダー部分にある横長カレンダーからエントリーへのリンクが機能していないことがわかった。原因を探ると、プラグインの横長カレンダーを導入した時に作ったアーカイブテンプレートが消失していることが判明した。過去の記録を見て修復することができた。
   
   

　　

　私のブログ（Atelier Shuhei Weblog)に訪問してくださる方たちの訪問内容を分析するサービスがある。私は、古くから Reasearch Artisan Lite というサービスを使わせてもらっている。

　この分析項目の一つに、訪問者がどのような解像度のモニターで表示されているかが示される下のスクリーンショットのような表がある。最近3ヶ月の訪問内容を調べてみた。


　最近の液晶モニターは、解像度が向上してブラウン管のモニターが大勢であったころの 1024x768 のモニターは少数派となってしまった。私のブログは、1024x768 のモニターで見てもらうことを前提に、ブログのレイアウトを構成してきた。
　ブログのテンプレートは、MovableTypeのエキスパートである小粋空間が提供するテンプレートから、横幅がモニターの解像度に合わせて伸縮するリキッドレイアウト（２段）を使ってきた。もともと横幅を1024ピクセルに合わせて、テーブルなどを作成してきたので、最近の横幅 1280 や 1600 などのモニターで画面一杯表示させると、非常に間抜けた表示になってしまう。多くの方が、このレイアウトの崩れた画面を見ておられることになる。
　実は私も、普段は横幅 1600 ピクセルのモニターを使っていて、自分のブログを表示するときには、縮小モードで横幅を 1024 近くで表示させているのだ。
Google や　Yahoo! のページでは、どのような解像度で見ても対応できるように作られているが、このようなページを作るには難易度が極めて高そうだ。
　それで、先の小粋空間さんのページをはじめ多くのページで採用されている横幅が固定したレイアウトに変更することにした。それほど難しくは無いだろうと始めた作業は、結局丸２日ぐらいかかってしまった。今後のために、試行錯誤の作業を記録しておきたい。

1. 小粋空間のサイトで探し当てた【テンプレートセットの入れ替え】というページにもとづいて、「2カラム（右サイドバー）・リキッドレイアウト（layout-two-column-liquid-right）」から、「2カラム（右サイドバー）・固定レイアウト（layout-two-column-right）というレイアウトにデザイン適用を行った。だが、これからが大変だった。
2. 後でわかったことであるが、レイアウトを入れ替えると、ブログのテンプレートが初期化された。（（追記：2013/1/17）私のブログだけだったようで、初期化されるのはスタイル・シートだけである。　問題は、長い間にわたってカストマイズしてきたインデックス・テンプレートの、スタイル・シート、メインページが、テンプレート・モジュールのヘッダー、サイドバー２、サイドバー、コメント入力フォームが初期化されたことである。幸い私の場合、友人のブログをほぼ同じようにカストマイズしてきていたので、これらの内容をコピペすることで、かなりの部分が助かった。だが、私のブログ用にかなりいじっている部分もあったので、これを修復するのが大変だった。
   カスタマイズしたテンプレートは、事前に別ファイル名でコピー保存しておくことが必要だ。
3. 一番の苦労は、2カラム（右サイドバー）・固定レイアウト用に、スタイル・シートをいじることであった。レイアウトの全幅は #box、 記事部分は #content 、右サイドメニューは #links-right-box、にピクセル数を与えながら設定した。

まだ、原因が判明できないバグがあるが、おいおいと修正したいと思う。まあ、苦労したお陰で、仕組みの理解は少し進んだかもしれない。
歳をとっての、このような作業は辛いが、ボケ防止になるだろう。

　私のパソコンは、いわゆる自作PC で、いろいろな部品や機器をアセンブリしたものである。モニターは、１０年前くらいに娘の大学入学祝いにと自作したときに求めた SAMSUNG の 19インチ CRT を、娘が新たに SONY Vaio を買い求めたので舞い戻ってきたものを使ってきた。

　特段問題はなかったのであるが、デスクの上に大きな場所を占めており、動かすのも重たい。それに、家内の LCD の方が、掲載している写真が明るく綺麗に見える。私のブログに訪れるほとんどの人も、パソコンのモニターは液晶になっているはずである。ブログ・ページを作るときにも、液晶で確認しておいたほうがよい。節電にもなるので、思い切って、モニターを LCD に変えることにした。

　PC のモニターとして使うだけなので、余計な機能はいらない。Amazon で探すと、Iiyama の 20 インチの液晶モニターが一万円を切ってある。思わず飛びついた。Amazonn の配達は早い。注文した翌日には品物が届いた。今までのぎっくり腰にならないか心配しながら持ち上げていた CRT のモニターに比べると無茶苦茶軽いし、容積が小さい。

　このモニターには、PC 本体との接続は、DVI-D という接続と従来からの D-Subミニ15ピンの接続との2系統がある。PC 本体の裏側を見ると、DVI-D のソケットもある。一緒に、DVI－D のケーブルも注文した。
　早速、DVI－D のケーブルで接続し設置してみた。しかし、これはかなりの勉強不足であった。画面が表示されるのは表示されるが、横長のワイドに映る。つまり、もともと横：1024　縦：768 のXGA 比率のものが、1600X900 で写ってしまうのだ。このために、このIiyama のモニターには、画面を XGA 比率にする画面調整機能がついていて、「フル」ではなく、「アスペクト」にすると XGA 比率で表示されるようになっている。ただ、DVI－D 接続では、この比率を調整する「画面モード」が、グレイアウトし、切り替えができない。それで、 D-Subミニ15ピンの接続に切り替えて（モニターに付属しているケーブルはこのケーブルである）みると、「画面モード」が機能するようになった。知識不足の頭では、原因は分からない。また、ビデオカードの性能も強く影響するらしい。まだまだの学習が必要であるが、ここまでにわかったことを記録しておくことにした。


（追記：2011/11/23）使っていたビデオカードは、Aopen FX5200-DVP128LP（AGPスロットから抜き出して確認した）で、DVI-D 接続ではワイドモニターには対応しないことが分かった。そこで、高解像度対応のビデオカードを求めることにしたが、乏しい知識ではネットサーチだけでは何を購入したらいいのかよく分からない。近くの「パソコン工房」に行って教えを乞うとAGP対応のビデオカードは、2つしか置いていなくて、その内の一つ(NVIDIA FX5200)が私のパソコン・マザーボードで許容しているAGP4Xでもいけることが分かった。これを求めて、ビデオカードを取り替えると、高解像度でもOK であった。接続コードも、D-subミニからDVI－D ケーブルに変えても「画面モード」が機能するようになった。

　XGA 比率で作成しているブログの写真も歪みがなくなった。当面は、新しい LCD display の画面の解像度を 1600x900 と設定して、水平方向をXGA モードの幅に設定して運営することにした。iGoogle の画面などは 1600x900 モードでも問題はなく見やすくなった。

　友人から、ブログのヘッダー部分や右サイドメニューを外して、エントリー部分のみを印刷できないかの質問を受けた。確かに、ヘッダー部分や右サイドメニューが印刷されるのは少々うっとうしい。

　方法をググッテみるといつもテンプレートを使わせてもらっている「小粋空間」さんに、「印刷用スタイルシート」というカストマイズがあることが分かった。このカスタマイズは、印刷をするときには、スタイルシートを切り替える仕様になっている。MT4.1、「小粋空間」さんのテンプレート（layout-two-column-liquid-right ）の私のブログ環境に導入してみたので備忘録として書き留めておきたい。
　

1. 印刷用スタイルシート追加を追加する。
   　管理画面のデザイン→テンプレート→インデックス・テンプレートの表示で「インデックステンプレートを作成」クリックして、以下のように新しいインデックス・テンプレートを作成する。
   • テンプレートの名前：ForPrinting（なんでもよい）
   • 出力ファイル名：print.css
   • 再構築オプション：チェックを外す
   • このテンプレートにリンクするファイル：（空白）
   • テンプレートの中身：スタイルシート（styles-site.css）の中身を丸ごとコピー
2. 印刷用スタイルシートの修正
   コピーしたスタイルシートで本体のヘッド部分と右サイドメニューが印刷プレビューで表示されないように、該当スタイルのID属性、クラス属性をいじった。
   　私の場合、具体的にはスタイルシートの次の項目を青字で書いた部分を付加した。

   #header 
       {
        /* padding: 15px;
       border-bottom: 1px solid #669;
       color: #999;
       background-image: url("http://n-huhei.net/Libraly/Image/Wood_ipe_01.gif");   
       background: #8fabbe; 
      text-align: left;     */
      display: none;
   }
   

   #links-left-box dl,
   #links-right-box dl {
     /*  margin: 0;
       padding: 0;   */
         display: none;
       }
   

   /* 2カラムリキッドレイアウト(右サイドバー) */
   .layout-two-column-liquid-right #content {
       /* margin: 0 250px 10px 0px;  */
       margin: 0 10px 0px;    
      /* border-bottom: 1px solid #669;
       border-right: 1px solid #669;
       background-color: #ffffff;  */
       border-style: none; 
   }

   
   
3. テンプレートに link 要素追加
   　次に、モジュールテンプレートの「ヘッダー」 <head> 部にあるスタイルシートを呼び出している部分を次の青字部分を追加した。
   実際には、この部分を先に付加しておいて、ブログのエントリーを表示し、ブラウザーのツールバー「ファイル」→「印刷プレビュー」で確認しながら print.css をいじる試行錯誤をした。

   
      <link rel="stylesheet" href="<$MTLink template="スタイルシート"$>" type="text/css" media="screen,tv" />
      <link rel="stylesheet" href="<$MTBlogURL$>print.css" type="text/css" media="print" />




4. カスタマイズの結果
   　左のスクリーンショットは、このカスタマイズをしていない場合とカスタマイズした後との印刷画面の比較である。
   　カスタマイズした後は、ヘッダーと右サイドメニューが印刷画面に出てこないので、エントリー部分のみを印刷できる。
   
   
   

　３月２８日に、Weblogの背景画像を設定したことに伴い、全体に細かな修正を行った。修正の大部分は「小粋空間」テンプレートのCSSに手を入れることであった。この作業は、全体のレイアウトがすっきりすることが目的であるが、スタイルシートの学習にもなった。

Weblogバナー部分はHPでも使っているイぺ材の色合いと木目を配しているが、Movable Typeのレイアウト全体にこれと同じ背景画像を設定した。この変更は、CSSの２カラムレイアウトの部分に、background-image　を付け加えることで行った。 色調もだんだんと自分の好みにしていきたいと思っている。