【MALIA】サイトタイトルの文字を大きくしたい、小さくしたい

アメーバオウンドホームページ作成サポート、ラクリエイトです。
こちらのサイトではアメーバオウンドのCSSカスタマイズについて書いていますが、カスタマイズは自己責任でお願い致します。


アメーバオウンドのデザインはシンプルで使いやすいのですが、もうちょっとこうしたい、と思うところもあります。


その少しを紹介しているサイトです。

今日はサイトタイトルの文字の大きさの整え方です。




サイトタイトルはここです。

今日カスタマイズするデザインは「MALIA」

別のデザインだと同じようにはいかないこともありますのでお気を付けください。
順次作成していきますのでお待ちくださいね。

サイトタイトルはこちらです。




このタイトルの文字の大きさを変えたい。 

その場合にCSSカスタマイズに何を入れたらいいのかを書いていきますね。



CSSカスタマイズの書き込むのはここです。

書き込む場所についてはこちらに書いてありますのでご一読ください。




書き込む内容はこちらです。

タイトルの文字の大きさを変えるためにはこちらを書き込みます。



.site-info__name {
    font-size: 4rem;
}


4remという値が標準になります。


.site-info__name {
    font-size: 6rem;
}


6remにしてみました。

小さくする場合には、4の値を小さくします。


長いタイトルの場合なんかは小さくしてもいいかもしれませんね。



スマホビューにも影響があります

全体の方に入れると、スマホビューの方にも影響があるので、6remにするとこんな見え方になります。



大きすぎて見えにくいですね。 なので、スマートフォンの方にも


.site-info__name {
    font-size: 2rem;
}


と値を指定してください。 

 2remを入れてみましたが、このような見え方になります。



スマホビューの確認の仕方

スマホの見え方を確認するのは、こちらを切り替えてください



ここでPC→スマホの見え方の確認の切り替えができます。 

 必ず全体とスマートフォンの見え方を確認してくださいね。 


 次回は、サイトの説明文の文字の大きさの変え方です。



0コメント

  • 1000 / 1000