タイトル1行目と2行目の文字サイズを変える方法

タイトルの下にサブタイトルも入れたいんだけど、文字だらけ。

文字の大きさ変えられないのかな~、なんて思ってる人は結構いるんじゃないでしょうか。

 

CSSのコードを確認していたら、たまたま発見!

そっか、これを使えばできたんだったと今更ながら気づきました。

 

 

 

↓こんな感じで、1行目と2行目の文字サイズを変える方法をご紹介します。

方法は、CSSで 1行目の文字 を変えます。

1)はじめに、現在設定している文字サイズを調整します。

まず、小さくしたい文字のサイズにあわせて、位置や色を調整してみてください。

 

↓こんな感じ。

2)スタイルシート(CSS)をコピーして、ヘッダーにペースト(貼り付け)します。

 

下記のスタイルシートを<style>から</style>までコピーして、

「設定」→「ヘッダー部分を編集」にペースト(貼り付け)してください。

 

 <style>
#emotion-header-title:first-line{
    font-size:180%;

  color:#000066;
}
</style>

 

▼補足説明:サイズ

font-size:180%;  → 1行目を180%拡大させるという指定です。

数字を変更することで、1行目と2行目の文字サイズの差がかわります。

 

▼補足説明:カラー

color:#000066;  → カラーコードです。

数字を変更することで、色が変わります。

その他のカラーコードは、「文字サイズや色を変更する」ページを参考にしてください。

 

↓“ヘッダー部分を編集”画面

1度保存して再度開くと、下記が自動的に挿入されてしまいますが、特に問題ありません。

/*<![CDATA[*/
/*]]>*/

 


プレビューで確認できたら、完了です♪

【作業上の注意】

・編集画面では表示が確認できない場合があります。必ずプレビューで確認してください。

・「ヘッダー部分を編集」にスタイルシートを貼り付けてから、ヘッダーの文字サイズの修正を行うと、うまく変更されない場合があるようです。その場合は、一度スタイルシートを削除して保存した後、もう一度はじめからやり直してみるなどしてください。

・他のCSSなど設定している場合、うまく表示されない可能性がありますのでご注意ください。

 

以上、ご参考まで!