こちらの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コメント