MT5.2.2Rainierのカバー画像を明るくし、高さを変更する

新バージョン5.2.2でようやくレスポンシブデザイン対応テーマが標準でついた、Movable Type (ムーバブル・タイプ）。

その新テーマ「Rainier」では、カバー画像（ヘッダー上部の背景画像）を、アイテム登録と既定のタグをつけるだけで、簡単に差替えができます。

と、そこまではいいのですが、差替えると、どうも薄暗い。

おかしいなと、背景部分の色を白く上書きしたりしてもダメでした。
タイトルの白文字を浮き立たせるためなのか、黒の透過グラデーションが重ねられているようです。差替え前提なら必要ないような。。。

それはさておき、公開CSSファイルではなく、MTプログラムエリア内のフォルダにある、透過画像の設定と黒のグラデーションの指定を、追加記述などで上書きする必要がある、ということです。

⇒http://貴殿のサイト/mt/mt-static/support/theme_static/rainier/css/rainier-white/screen.css

■具体的には、追加のCSSを作ってstyel.cssに付け足すか、別CSSファイルを追加で読ませます。

#header[role="banner"] #header-content:before {
background: transparent

のところを無効化して、グラデショーンの背景を白にしてしまう以下のような記述をします。

#header[role="banner"] #header-content:before {
background: transparent none left bottom repeat-x;
background-image: -ms-linear-gradient(rgba(255, 255, 255, 0),
 rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), 
rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), 
rgba(255, 255, 255, 0));  
background-image: linear-gradient(rgba(255, 255, 255, 0),
 rgba(255, 255, 255, 0)); 
}

これで貴殿のオリジナルカバー画像が、はっきり見えるようになるでしょう。他にもっとエレガントな方法があるのでしょうが、とりあえず、これでうまくいきました。

■また、カバー画像の高さを変えたい時も、以下のように追加CSSを作ります。

#header[role="banner"] #header-content {
    min-height: 120px;
}

(規定値はmin-heightが200pxになっています）

尚、MTOS5.2.2にもRainierは入っています。
また、MT5.2.2から、スタイルシート（インデックステンプレート）が、標準のHTML5用とIE8以下用と2つあるので、上記の追加CSSは両方に、付け加える必要があります。