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,~~

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

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)); }

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

rgba(0, 0, 0, 0.6)

を、

rgba(0, 0, 0, 0)

と変更。これでいけました。

参考
Rainierのカバー画像を自分の好きな写真に変えてみよう (Six Apart)
MT5.2.2のRainierでヘッダーのグラデーションを消したい (熊茶壜 + 遊戯三昧 )

コメント(0) トラックバック(0)