こちらのHPは「MALIA」をCSSカスタマイズして作ってます
こんにちは。
ブログオーガナイザーのラクリエイトです。
昨日お知らせした新しいHP。
アメーバオウンドで作成しています。
もとは「MALIA」というデザインを使っています。
アメブロ連携、カバー写真が使えるデザインです。
アメブロ連携ができるので、アメブロの方にもHPの上にあるメニューが表示されます。
アメブロのスマホ版にもメニューが表示されますよ。
これをカスタマイズして使っています。
CSSカスタマイズを使用しています。
どこをいじっているかというと、
■カバー写真の大きさ
■サイト説明文の文字の大きさ
■ブログ記事の日付の消去
この3点です。
カバー写真が大きくて、スクロールをしないとサイトタイトルもわからないので、高さを低くしました。
そのCSSがこちら。
.keyvisual__item {
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
display: block;
overflow: hidden;
position: relative;
width: 100%;
height: 600px;
}
高さを600pxにしています。
スマホ版も変えています。
スマホ版は高さを250pxにしています。
サイト説明文の文字は確か・・・大きくしています。
CSSはこんな風にカスタマイズしています。
.site-info__description {
font-size: 1.6rem;
}
文字の大きさを1.6remに。
スマホ版は24px。
なんで単位を変えたんだっけ?忘れました(笑)
ブログ記事の日付を消すCSSは、
.page__main--blog-detail .blog-article__date {
display: none;
}
日付を消す理由は、
ブログ記事としての使用するのではなく、HPの1ページとして使いたかったから。
例えば、フルオーダーカスタマイズの詳細ページ。
これを見ると、パッと見はブログ記事には見えませんよね。
なぜこんなことをするかというと、アメーバオウンドはページ数が10ページと決まっているからです。
アメーバオウンドのCSSカスタマイズですが、どうやらデザインごとに違うようで、同じようにやっても他のデザインでは高さが変わらない、とかあるみたいです。
私のアメーバオウンドではできても、他ではできないことがあるのでお気をつけくださいね。
2コメント
2019.04.24 06:26
2019.04.13 06:11