こちらの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カスタマイズですが、どうやらデザインごとに違うようで、同じようにやっても他のデザインでは高さが変わらない、とかあるみたいです。

私のアメーバオウンドではできても、他ではできないことがあるのでお気をつけくださいね。