MALIAでスマホ版のサイトカバーが消えるからコードを書いた

Ameba Owndのテーマ「MALIA」を使ってページを作った。

プレビューではこんな感じの表示だけど、

ひと通りできたあとにiPhoneサイズで見てみたら、

一番上のサイトカバー画像がない！

PC版は問題なかったから、最初はスマホ版だけそういう仕様のテーマなのかなと思ったけど、「Twitter」のタブを押して戻ってきたらちゃんと表示される、っていう謎仕様だった。

トップページに直接アクセスすると消えちゃう。他のMALIAを使ったサイトもそうなってた。

ということで、常にトップページで画像を表示させるためにCSSを追加で書いてみた。

ここの画像は、あるdivタグにkeyvisual__itemっていうクラス名が追加されることで表示されるっぽい。

keyvisual__itemの追加はたぶんPHPとかJSとかで制御されていて操れない（そこまで考えるのはめんどくさい）から、一つ外のクラス名：page__keyvisualを使うことにした。

まずpage__keyvisualの方に、keyvisual__itemと全く同じCSSを充てた。

そしたら全く同じように表示できた。けど、「Twitter」のタブを押して戻ってきたら、2個表示されるようになっちゃった。

だから最後に、元々のkeyvisual__itemを非表示にした。

消えろ〜！

↓

↓

消えた。完成 🎉

もっとシンプルなやり方がわかる方いたら教えてください。

余談

Ameba Owndのコードエディタ、全角スペースと半角スペースの違いが全然わからなくて、隠れた全角スペース×1のせいでCSS効かなくて、気づくまでめっちゃ時間かかった ^ - ^