CDGテーマのヘッダー画像の大きさを変える

いつも楽しく読ませていただいている加藤さんのブログをみていたらCSSの記事がありました。

CSSカスタムされたサイトをスマホからみてみたら

(↑上記は書いてあったCSSをコピーしてつくった私のテストサイトです)

タイトル隠れてしまって悲しい感じになっちゃってました。。。

なるほど

「Ameba OwndのカスタムCSSはアメブロと違ってスマホも考えて対応しなきゃいけないのですね。」

せっかくなのでスマホでもみれるようなCSSを考えてみました。

全体の方には

.page__keyvisual {

　max-height: 400px;

}

スマートフォンの方にはこちら

.keyvisual__body {

　padding-bottom: 5%;

}

.keyvisual__image {

　height: 180px;

　min-height: 180px;

}

.keyvisual__title {

　margin-top: 15px;

　font-size: 2.8rem;

}

.keyvisual__description {

　margin-top: 0px;

}

を

このように設定します。

その結果

大きさ変えてもちょうどよい大きさになるようになった気がします。

いろんなことができる分、色々気にしなきゃいけないことが多くて大変ですね。

細かい数値はタイトルやキャッチフレーズの長さを考えて調整してみてください。

↑ CSSを更新する可能性があります。