float 3カラムの折りたたみによるCSSの不具合
リニューアルで Mozzila 系のブラウザに中央カラムのコンテンツ折りたたみを導入しなかった理由です。
Netscape または Firefox で、サイドバー（左右どちらでも良い）の表示が中央カラムより長い状態で、中央カラムの記事の折りたたみ（閉じる→開く）を行うと、開いた分の長さをサイドバーの余白として継承してしまいます。つまり記事を開いた途端にページ全体が下にのびてしまいます。中央カラムがサイドバーより長い状態であれば発生しません。
言葉で説明するのは難しいのでもぬけのからの個別エントリーアーカイブで試して頂けると一目瞭然です。このページでどちらかのサイドバーの長さを中央カラムより長い状態にして「続きを読む」をクリックすると、長いほうのサイドバーの下に余白が生じます。この余白は中央カラムを開いた分の長さと等しくなります。
またその後でサイドバーを折りたたんでも高さは変わりません。
かなり試してみましたが、今のところ解決策はみつかっておりません。そういう訳で継続調査中です。もし解決策をご存知の方がいらっしゃいましたらご教示頂ければ幸いです。
3カラム可変と3カラム固定を切り替える
当サイトで公開している3カラムテンプレートは可変と固定の2種類がありますが、これをスタイルシート切替を用いて瞬時に切り替えるカスタマイズです。どちらのタイプにするか悩まれている方はこれで解消されるのではないかと思います。
とりあえず私のサイトの右にある「Stylesheets」で可変（Default）⇔固定（Fixed3Column）を切り替えられるようにしていますので、お試しください。全てのブラウザでの正常な動作は保証しておりませんので予めご了承ください。
以下、3カラム可変を使っている状態から3カラム固定のスタイルシートを追加する手順を説明します。3カラム固定から3カラム可変のスタイルを追加する場合は「固定」と「可変」を読み替えて、６項をスキップしてください。
１．3カラム固定スタイルシート用インデックス・テンプレートの作成
管理メニューの「テンプレート」→「インデックス・テンプレート」の「新しいインデックス・テンプレートを作る」をクリック。次のページで下記を設定します。
- テンプレートの名前：スタイルシート（3カラム固定） *任意の名称でOKです
- 出力ファイル名：styles-site2.css
- テンプレートの中身：テンプレートのページより3カラム固定のエントリーにジャンプしてスタイルシートをコピー＆ペースト
設定が完了したら保存・再構築します。
２．テンプレート修正
メインページ／カテゴリー・アーカイブ／日付アーカイブ／個別エントリーアーカイブ／コメント・プレビュー／コメント・エラーの各テンプレートのヘッダに設定されているCSSファイルの設定（赤色）を、下記のように変更します（青色）。
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>styles-site2.css" type="text/css" title="Fixed" />一番上に書かれたスタイルシートが起動時に使われ、新しいスタイルシートをその下に設定しています。href 属性に作成したスタイルシートのファイル名（styles-site2.css）、title 属性に任意の名称（Fixed）を設定します。この名称は次項のスクリプトで起動される際のキー情報になります。
設定が完了したら保存します。
使用するテンプレートでこの設定がもれているとスタイルを切り替えた状態でページを切り替えた際にスタイルがなくなることがありますのでご注意ください。なおその際はトップページ等に戻ってスタイル切替のメニューをクリックすれば元に戻りますので、スタイルが崩れても慌てないようにしましょう。
３．styleswitcher.js のダウンロード・アップロード
下記の公式サイトに styleswitcher.js があります。
記事の下の方に「download」または「Download styleswitcher.js」というリンクがありますので、クリックして styleswitcher.js をダウンロードしてください。そしてダウンロードした styleswitcher.js をそのままローカル・サイト・パス（index.html と同じディレクトリ）にアップロードします。
４．テンプレートに styleswitcher.js の設定
２項で設定した各テンプレートについて <head>～</head> の間に下記を追加します。
<script type="text/javascript" src="<$MTBlogURL$>styleswitcher.js"></script>設定が完了したら保存します。
５．切り替えメニューの設定
２項で設定した各テンプレートのサイドメニューに以下のタグを追加します。例は公開テンプレートの形式にあわせています。
<div class="sidetitle">
Stylesheet
</div>
<div class="side">
<a href="#" onclick="setActiveStyleSheet('Default'); return false;" onkeypress="setActiveStyleSheet('Default'); return false;">Default</a><br />
<a href="#" onclick="setActiveStyleSheet('Fixed'); return false;" onkeypress="setActiveStyleSheet('Fixed'); return false;">Fixed</a>
</div>setActiveStyleSheet の後方にあるパラメータは、２項で設定した title 属性の名称（Default/Fixed）と一致するように設定します。
設定が完了したら保存・再構築します。
６．テンプレート修正
3カラム固定のスタイルシートはボックスモデルのCSSバグに対処するため、サイドバーの div タグを余分に付与しています。ここでは3カラム可変のテンプレートを元としているので２項で編集した各テンプレートに対し、下記のように青色部分を追加してください。
<!-- 左サイドバー開始 -->
<div id="links-left-box">
<div id="links-left">
：
</div>
</div>
<!-- 左サイドバー終了 -->
<!-- 中央コンテンツ開始 -->
：
<!-- 中央コンテンツ終了 -->
<!-- 右サイドバー開始 -->
<div id="links-right-box">
<div id="links-right">
：
</div>
</div>
<!-- 右サイドバー終了 -->設定が完了したら保存・再構築します。
以上です。3カラム可変から固定に切り替えた場合、カラムずれが発生する場合がありますので、テンプレートのページのFAQにて類似した問題をご確認ください。またスタイルシートがキャッシュに残って変更が反映されない場合があるようですので、IEであれば更新ボタンをクリックしてみてください。
CSSで画像を半透明にする
CSSで画像等を半透明にして表示する方法を紹介します。
１．サンプル
まずはサンプルをご覧ください。
通常の表示
半透明の表示
半透明の表示が確認できているのは Windows+IE/Firefox/Opera/Safari/Google Chromeです（2012年10月現在）。
２．半透明にするCSS
まず、以下のようなimg要素を用意します。
<img src="画像のURL" class="hogehoge" />次に、半透明にしたい画像のスタイルに、filterプロパティ、-moz-opacityプロパティ、opacityプロパティを追加します。クラスセレクタは任意の名称をつけてください。
.hogehoge {
filter: Alpha(opacity=50); /* IE系 */
-moz-opacity: 0.5; /* Mozzila系 */
opacity: 0.5;
}filterプロパティの「opacity=50」は透明度の割合を100を100%として指定します。-moz-opacityプロパティ、opacityプロパティの「0.5」は、透明度の割合を1を100%として指定します。
最新のブラウザであればopacityプロパティのみで表現できますが、古いブラウザに対応させる場合はfilterプロパティ、-moz-opacityプロパティも加えてください。
ここではimg要素に対して透明度を与えましたが、背景画像でも同様のことが実現できます。
2012.10.03
本文を修正しました。
