Ameba Owndのテーマってどれもメインビューがでかいものが多いです。正直こんなに高さいらんわってことで、カスタムCSSを利用してメインビューの高さを変更しました。

※以下テーマ「BELLE」のカスタム内容です。他のテーマではclass名などが違うかもしれません。

※カスタムCSSをいじるときは自己責任で。

要素を調査

まずはメインビューがなんてclass名のcssで書かれているのか調べます。「ソースを見る」だとhtmlが<script>だらけで分かりません。なのでfirefoxの場合は「要素を調査」で調べます。

.keyvisual__imageとメインビュー

要素を調査すると.keyvisual__imageにメインビューが入っていることが分かります。ただこのdiv自体では高さを指定していません。んで、よく見ると.keyvisual__imageの後ろに疑似クラスの「::after」があります。ここのpadding-topでメインビューの高さを指定しています。

.keyvisual__imageにメインビュー、::afterで高さ指定

多分ですが、.keyvisual__imageにメインビューを入れて画像をbackgroundで指定することで画面幅いっぱいの表示にしてあります。んで、background-positionで真ん中中央揃えにしてあるんじゃないかと。で、backgroundはoverflow: hidden;にして次のコンテンツを重ねてあるため、.keyvisual__image::afterのpadding-topでメインビューの高さを指定してあるんじゃないかなぁと。

.keyvisual__image::afterのpadding-topを変える

とりあえず.keyvisual__image::afterのpadding-topの高さを変えます。デフォルトで確か40%ぐらいだったので、私は30%に変更しました。画像の位置を変えたい方は.keyvisual__imageのbackground-positionで変更かけてください。ただ私が試した時には、左右の画像位置は変わりましたが上下は変化なしでした。理由はわかっていません。もしかしたらメインビューのjqueryとの関係があるのかもしれません。

ついでにカバーとサイトアイコンとロゴも変更

なぜかデフォルトでカバーの写真がぼやけている、というふざけた不思議な状態だったのでカバー写真自体も変更しました。私はスマホを持っていないのでフリー素材から写真を持ってきました。

↓カバー写真配布元

↓あとついでにロゴもフリーで作っときました。参考までに。

背景色は管理画面から調べられるので背景色#132029でフォントカラー#ffffffにして書体をHoliday-MDJP03で作成しました。