Movable Typeのタイトル背景画像をCSSで変更：らっぱ王子

トップバナーの画像を変更してみた。MTのRainierは簡単に画像を差し替え可能だとか。

Rainierのカバー画像を自分の好きな写真に変えてみよう (Six Apart)

管理画面 → アイテム → 新規 → アイテム(画像)のアップロード → アイテムの管理 → タグ欄に、@SITE_COVER_IMAGE → 変更を保存、再構築。

…しかし、手順を踏んでみても変更されなかった。間違いようがないのだけど、なんでかな。

仕方ないので、CSSで直接画像を指定してみた。

#header[role="banner"] #header-content {
  background-image: url("画像のURL");
  min-height: 160px;
}

background-image で任意の画像を指定。ついでに min-height でバナーの高さを指定。

あと、画像の上にかかる暗いグラデーションもカット。以下のCSSを編集する。

/mt/mt-static/support/theme_static/rainier/css/rainier-white/screen.css

66行目にある

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

の、

background: transparent url(data:image/png;base64,～～

の長い行と、以下４行を削除する。

background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); }

だけど、この４行を削除するとタイトル文字のセンタリング等が解除されてしまうので、それぞれ末尾にある