こんにちは。
Webクリエイター加藤です。

AmebaOwndテーマ「NEMI」のカスタマイズです。(*^^*)
早速追記で再アップです。。。。
追記の内容は、ブログの一番最後です。。。

記事タイトルの文字サイズを変更する方法です。
今回もPC版のみのカスタマイズです。

では早速やってみましょう!!


まずは変更前のAmebaOwndサイトのブログ記事タイトルの文字サイズです。
(3.2rem == 32px です)






1.まずは、ダッシュボードからデザイン編集>CSSカスタマイズへアクセスしてください。

そして、下記CSSをコピー・ペーストしてくださいませ。コピーするところは、全体と書かれたCSSの所の一番下??にコピーペーストしてください。



rem単位用CSS
=================
/*記事タイトル文字サイズ変更*/
/*html 62.5% = 10px */
.page__main--blog-detail .blog-article .blog-title__text{
font-size:3.2rem;/*32px*/
line-height:4.2rem;/*42px*/}
=================









======================================
今回は、ちょっとだけ頭を使ってくださいませ。
(軽く読むだけでいいです。。(笑))

AmebaOwndテーマ「NEMI」では、Webサイトの基本文字サイズが、62.5%になっています。
一般的なhtml文字サイズのベースが16pxなので、62.5%だと、

16 x 62.5% = 10px になります。

ここで気になるのが、「rem」という単位です。

これremというのは、「root+em」(ルートエム)の略で、Webサイトのhtmlの文字サイズベースを継承する、文字サイズ単位です。
(なれない方には難しいので、スルーーしてくださいませ。)
=======================================



で、文字サイズを調整するための変更箇所は。。

/*記事タイトル文字サイズ変更*/
/*html 62.5% = 10px */
.page__main--blog-detail .blog-article .blog-title__text{
font-size:3.2rem;/*32px*/ 文字サイズ調整
line-height:4.2rem;/*42px*/}行の高さ調整



文字のサイズを調整するには、赤文字の部分の数値を変更してください。
基本は、3.2rem(32px)に設定されていますので、この数値を減らしたり、増やしたりしてください。



ただし、remという単位になれない方には、こんな感じで px単位 の文字サイズとの対比にはなります。

文字サイズ
1rem    === 10px
1.2rem === 12px
1.4rem === 14px
1.6rem === 16px
           -
           -
           -
           -
3.2rem === 32px




これでもシックリいかない方には、普段見慣れた文字サイズの単位pxを使って下さいませ。
px単位のものを使いたい方は、下のCSSをコピー・ペーストしてくださいませ!!

12px , 14px , 16px , 18px , ,,,,,,,,,,,, 32px , 48px ,

px単位用CSS
================
/*記事タイトル文字サイズ変更*/
/*html 62.5% = 10px */
.page__main--blog-detail .blog-article .blog-title__text{
font-size:32px;/*3.2rem*/
line-height:42px;/*4.2rem*/}
================



チョットヤヤコシイ感じになっちゃってごめんなさい。m(_ _)m

コピーして使うのをもう一度のせますね。。。

この2つの何方かをコピーしてつかってくださいませ!!!


rem単位用CSS
=================
/*記事タイトル文字サイズ変更*/
/*html 62.5% = 10px */
.page__main--blog-detail .blog-article .blog-title__text{
font-size:3.2rem;/*32px*/
line-height:4.2rem;/*42px*/}
=================


px単位用CSS
================
/*記事タイトル文字サイズ変更*/
/*html 62.5% = 10px */
.page__main--blog-detail .blog-article .blog-title__text{
font-size:32px;/*3.2rem*/
line-height:42px;/*4.2rem*/}
================




で、私は変更したよ!!というのが解るように文字サイズを52px(5.2rem)にしてみました!!

さてその結果こんな感じになりましたよ。。






どうでしょうかねぇ~!!
是非チャレンジして、色々な文字サイズに変更してみてくださいませ!!



ではまた。
加藤でした。



【追記】

早速試してくださって、「ふふふ。。。私にも出来たもんね♪」とつぶやいてくださってました!!

文字サイズは、28px、行調整は38pxに設定されていますね。
ボーダーもカラーを変更されてますね、カラーコードは#e9546bですね。。(*^^*)




私のSmilefactorytenのAmebaOwndサイトはこちらでーす!!
kato AmebaOwnd site