Atelier

　
　昨年夏に、サムネイル写真をクリックするとウインドウ中央に写真が拡大表示される Llightbox を ｊQuery という JavaScript のライブラリーを使用した Lightbox2.51 を導入した。
　その時、カストマイズしたのは、デフォールトでは黒である背景画面の色を緑にしたのと、写真ページを閉じるボタンを　デフォールトの　から、自作の　　に変更しただけである。

　私が管理している友人の Lightbox は、prototype.js という JavaScript のライブラリーを使った旧バージョン Lightbox2.0 を使っている。背景画面に、蝶をあしらった壁紙を使っていて、これを Lightbox2.51 で使う方策が分からなかったからである。
　 Lightbox2.51 のカストマイズは、【jQueryのlightBoxプラグインの使い方】【jQuery LightBox Pluginの使い方】 などに詳しい。これらのプラグインは、新たに JavaScript を付け加えてカストマイズする方法である。だが、私のやり方が悪かったのか上手く行かなかった。
　そこで、当初導入した時にいじったJavaScript lightbox.js と スタイルシート lightbox.css 再度いじって見ることにした。 私にコードが理解できるわけではないから、やりかたは　ここはと思われるスクリプト　ないしは　CSS をいじって、FTP でサーバーにアップロードし、実際のページでの変化を観察する方法である。幸い、JavaScript と　CSS の変更は、すぐにページに現れるから楽である。この結果を備忘録として記録しておきたいと思う。

1. 自作の closelabel に置き換える。
   lightbox.js の41行目を下のように独自の画像に置き換える。

         this.fileCloseImage = 'http://n-shuhei.net/atelier/Jquery2.51/images/closelabel.gif';

   
   
2. セットで写真を表示している場合の表示を　"image"(default) から "画像"に置き換える。44行目

         this.labelImage = " 画像 "; 

   
   
3. セットの写真の何枚目を示す、表示を例えば　"1 of 8"　を　" 1 / 8 "に置き換える。45行目

         this.labelOf = "/";　　

   
   
4. 背景画面を単一色から、壁紙画面に変える。lightbox.ccs の7行目あたりの背景色をコメントアウトして、壁紙イメージを挿入する。

   /*  background-color: #000000; */
        background-image: url("http://n-shuhei.net/atelier/lightbox2/images/overlay_1.jpg") ;　

   
   
5. 画像の枠（台紙）の色をかえる。lightbox.ccs の35行目あたり。デフォールトは、"white;"

      background-color: #ffffe0;

   
   
6. 画面の"前画面"　"次画面"　へのボタンを独自のボタンに置き換える。lightbox.ccs の112行目、117行目あたり。　

       background: url(http://n-shuhei.net/lightbox2/images/prevlabel.gif) left 40% no-repeat;
   
   
       background: url(http://n-shuhei.net/lightbox2/images/nextlabel.gif) right 40% no-repeat;

   
   
7. 写真の説明文字の色を変える。lightbox.ccs の145行目あたり。デフォールトは灰色。

    color: #ffffff;

   
   

　その他、細かい部分も、CSS をいじることで変えられそうだ。
サンプル画像は、次のエントリー【隠居の探鳥ウォーク：ハリエンジュ　花芽ついばむ　鷽（ウソ）４羽 】などで確認できます。

　　

　前回の記事【隠居のMT 備忘録：IE で表示した時に出現する意図しないスペースを削除する】で表の上部に余分なスペースが表示される件については、一応落着しているのであるが、それでも原因が探りたくて、色々と大した知識もない中で思いをめぐらしていた。

　どうやら、先の現象が起きるのは、記事の中のテーブルを頻回に修正・追加しているのが原因ではないかと思われた。それで、?IE CSS Table?というようなワードでググってみると、 HTML コードでの <table> に関するプロパティを付け焼刃で学習してきたために、十分把握していなかったことが分かった。今後、HTML CSS にあまり知識のないものが、テーブルをいじるときに注意すべき事項を思いつくまま、備忘録として記録しおきたい。

　

• テーブルやセルの枠を表示する線は、それぞれ太さがあり、隣接するセルのボーダーを重ねて表示したり、間隔をあけて表示したりできる。これは、CSS（スタイル・シート）で指定する。
  　重ねての表示は、次のようなコードが紹介されている。

  table  { border-collapse: collapse }

  
  また、間隔をあけての表示は、次のように設定するとされている。

  table {  border-collapse: separate }

  
  どうやら、border-collapse を指定しない場合（初期設定）は、separate になっていたようだ。そのために、IE の場合、テーブルを設定し直すたびに、少しずつ sell-space が設定されており、たび重なって大きな空白ができたのではないかと推定される。ど素人のゲスだから、全く的外れかもしれないが。
  
  
• このような学習をしていると、テーブルの枠やセルの線の太さや色などを指定したり、空白のセルにも枠をつけるためのスタイルを設定する方法が分ってきた。テーブルの枠やセルの線は、今まで特別に意識しない場合デフォールトの設定である solid で通してきたが、好きな線の太さや色を設定する方法も分かった。それで、もう少し自分好みにしたくて、新たにスタイルシートに設定した <table> に関するコードは、次のようなものである。
  なお、余談であるが、線の色：#ffcf64 および #48acd0 は私がディスクトップの壁紙として使っているカワセミの写真の腹部および羽の色である。この色コードは、以前から愛用している【ウェブカラークリエイター】というソフトを使って、採取したものである。

  /* テーブルのセル・ボーダーの表示形式　*/
  table
  　.waku1
    { border-collapse: separate;
      border: 1px solid #ffcf64; }
   .waku2
    { border-collapse: collapse;
      border: 1px solid #48acd0; }
  
  td { border: 1px solid #48acd0 }  

border-collapse: separate の場合（初期設定）

border-collapse: collapse の場合（新しく設定したスタイルシート）

　エントリーで、HTML や Javascript , XML のソースコードを記録するときには、<pre><code>?</code></pre>という形で記述している。
　私のMovable Type でのブログは、「小粋空間」さんのテンプレートを使わせてもらっている。もちろん付属しているCSS(Cascading Style Sheets)も使っている。そのCSSでの　<pre>　は次のように設定されている。backgroundの色は、いじっていているが。

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #ffffe0;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 100%;
    overflow: scroll;
}

　このまま、100行、200行あるソースコードを記載すると、縦に非常に間延びしたエントリーになってしまう。
　これを避ける方法をネットでサーチしてみると余りにも普通の知識なのか適切な記述が見つからなかった。もう一度 CSS の基本に立ち返って学習してみると、CSS の pre の部分に、

pre {
  ,,,,
  height: 150px;
  ,,,,
 }
 

といれればよいことが分かった。　
　が、これでは１行のコードを表示するときでも、縦 150px のボックスができてしまう。それで面倒でも、本文のHTMLで

<pre style="height: 150px"> 

とスタイルを指定すればいいことが分かった。この方法を使えば、ボックスの縦の大きさを表示するコードの行数に合わせて変えることができる。スタイルを指定しなければ、縦スクロールがなく、全てのソースコードが表示される。余りにも基本的なことなので、ブログに載せるのは恥ずかしいが、自分自身の備忘録として残しておきたい。

　なお、、<pre><code>　?　</code></pre>　の　?　部分（ソースコード）にある　<　>　は、特殊文字と判定されるので、&lt; &gt;  とHTML エンコードする必要がある。
私はエンコードには、HTML エンコードフォームというサービスを使わせてもらっている。これを使うと空白文字が 、&nbsp; に、" が &quot;に、& が &amp;にエンコードされるが、エンコードされたものをそのまま　Copy&Paste して使っても問題はない。
　また、いろいろな場面でソースコードを整理する必要があるが、そのようなときはシェアウエアの「秀丸エディタ」を使っている。テキストを編集する様々な機能が備わっているので、非常に便利である。

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

　方法をググッテみるといつもテンプレートを使わせてもらっている「小粋空間」さんに、「印刷用スタイルシート」というカストマイズがあることが分かった。このカスタマイズは、印刷をするときには、スタイルシートを切り替える仕様になっている。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. カスタマイズの結果
   　左のスクリーンショットは、このカスタマイズをしていない場合とカスタマイズした後との印刷画面の比較である。
   　カスタマイズした後は、ヘッダーと右サイドメニューが印刷画面に出てこないので、エントリー部分のみを印刷できる。
   
   
   

　恥ずかしながら、ブログのエントリーなどでかいた英単語が行末で分断されていたり、行頭に「。」がきていたりしてもスペースの関係で仕方ないのだと思いこんでいた。

　Word などのワープロソフトでは、この禁則処理は初期設定で組み込まれている（「ツール」→「オプション」→「文字体裁」）のは知っていたが、Movable Type のようなブログ HTML での禁則処理の方法を知らなかった。
　ほっておくのもぶさいくなので、ネットで「HTML　禁則処理」のような検索語で方法をサーチしてみると、CSS で設定できることが分かった。ブラウザーによっては、自動的に禁則処理をしているようだが、ブラウザーによって異なるらしい。IEではあまりうまく処理されていないらしい。

　早速、自分のサイトの CSS （もともとは、「小粋空間」さんのテンプレートを利用させてもらっている）に、左のような　id 属性（ word-break line-break ）を設定すると禁則処理ができるようになった。word-break は、英単語を行末で分断しないプロパティで、IE のみで有効なようである。詳しくは、HTML クイックリファレンスにでている。値に、keep-all を指定すると全ての言語で単語の途中では改行せず、単語の切れ目で改行されることになっているが、この設定では形が崩れてしまうようだ。
　また、line-break は、行頭・行末の禁則処理で、これも IE に独自なプロパティのようだ。これも詳しくは、HTML クイックリファレンスの line-break のページにでている。この方は、 normal と strict とでは余り変化がないように思える。最近のブラウザーでは、それ自身が禁則処理を行っているようである。

　スタイルシートに設定前と設定後を比較すると、下のような結果になる。CSS を設定した方があきらかに読みやすい。こんなことがすぐ分かるのも、ネットのおかげである。

　　

　いろいろと遠回りをしたが、ブログのヘッダー部分に、以前から設置したかったタブメニューを作った。このようなリンクボタンは、Flashで作るものとばかり思いこんでいた。そのために、ボタンを作るFireworksやFlash８などの学習をボチボチとしてきた。Fireworksには、Javascriptをつかうタブメニューの作り方のステップガイドがある。新しくページを作るときには有用と思えるが、MovableType（MT）に持ち込むにはいささか難しそうだ。Flash での例示は、もう少し高度なプルダウンメニューのようなものが多い。Google でサーチをしてみると、JavaScript や　Flash は使わずにスタイルシートを上手く使ってHTMLで作成できることが分かった。ちなみにいつも参考にさせてもらっている「小粋空間」さんのタブメニューもページのソースコードを見るとHTMLで作られているようだ。（一部、ＪａｖａＳｃｒｉｐｔｓ が使われているようだ。）
　いろいろ探してみると CSS Tab Designer というフリーの Software(?) に行き当たった。同様の日本語サイトもあるが、どうも海外のサイトの方があか抜けている。早速、css_tab.zip ファイルをダウンロードして展開してみるとお誂え向きのサンプル (Tab Menu10)があった。これには、そのサンプルのHTMLコードがついており、これをページ作成ソフト（私の場合、Dreamweaver MX ）にコピー＆ペーストして、いろいろと弄って応用した。主な変更点は、文字コードを utf-8 にして日本語が扱えるようにすることとボタンのテキストやリンク先の指示やボタンの色を変えることなどである。
　MTへの持ち込みは、StyleText 部分を本来のスタイルシート（styles-site.css) に付け加え、<body><div> 部分のコードをテンプレートに挿入した。なお、私はテンプレートのヘッダー部分などは、モジュール化しているので以前に自分で作成しているテンプレートへの追加となる。このように多くのテンプレートを修正する場合には、モジュール化は重宝する。
　できあがりは画面でご覧いただけると思うが、このようなタブ区分と右サイドのカテゴリー区分とが完全に一致していないので、カテゴリーを再度見直す必要がある。また、サブカテゴリーも設けているので、プルダウンできるような改良も必要である。
　なお、ＩＥではボタンテキストの日本語だけのものと英語まじりのものとでは、表示が微妙に異なるようである。Ｆｉｒｅｆｏｘでは揃って表示されている。

　今まで少し長文のコメントをしたい（してもらう）ときには、テキストエリアが小さいと感じていた。いろいろと調査をすると横幅の拡大は単純にCSSを弄ることでできることが分かった。「小粋空間」さんのテンプレートで使っているstyle-site.cssの#comment-text のwidthを大きくするだけである。
　コメントするときのテキストエリアの縦方向の拡大や文字を大きくしたり小さくしたりできるTextarea ToolsというJavaScriptを見つけたので、これをインストールしてみることにした。アイコンの位置取りに少してこづったがなんとか形になった。ただし、字の大きさは入力するときのみ大きくできるだけで、投稿されたコメントは通常の表示になる。
　ついでにコメント・プレビュー画面の横幅も大きくした。
（追記：2006/6/7　6:00）現在　Textarea Toolsへはアクセスできないようです。

MTのカスタマイズに役にたっています。画面サンプルの文字が小さくて老人にきついですが。丁寧に書かれています。丁寧に読む必要はありますが。

詳解HTML&スタイルシート辞典―最新実用カラー版 posted with amazlet on 06.04.02 岡蔵 龍一 秀和システム (2000/09) 売り上げランキング: 184,878 おすすめ度の平均: 正しいHTMLを書くために 手元に置いておくと便利です。 コンセプトが洗練されていない Amazon.co.jp で詳細を見る

　今日は朝から雨。桜見の散歩は中止して、PCの前に座っている。　先日からCSSをもうちょっと深く学習する状況になって、３年ほど前に買っていた「HTML＆スタイシート辞典」を見ていたら、今まで使っていなかったタグを使いたくなった。この頃、特にMTのカスタマイズ投稿で、ITがらみの略語が増えてきたので、これらのフルスペルを abbr を使ってマウスがonされたときに表示したいとおもってやってみた。どうも上手くいかないので、Googleのサーチでよくよく調べてみると、abbr　はIEでは機能しないことが判明した。本を丁寧にみてみると対応ブラウザは、IE5-Mac となっていた。（Win　Netscapeでも機能する） Win IE では、acronym　を使わなければならない。Netscapeでは、どちらも使えるが、ほんとは abbreviation と acronymとに使い分けるのだそうだ。この投稿のように、英語：日本語でも使えちゃうから、そんな厳密な使い分けは考えなくても良いと思う。
　NetscapeとIEの争いを垣間見る思いだ。