こんにちは。YOSHITAKA(@YOSHITA19704216)です。
今回はOPEN CAGE(オープンケージ)社のテンプレートである
STORK(ストーク)・Hummingbird(ハミングバード)・スワロー・アルバトロスの
トップページの文字サイズを変更するCSSを紹介します。
- ストーク・ハミングバード・スワロー・アルバトロスのトップページの文字サイズを変更するCSSがわかります。
- 変更する箇所がわかります。
Contents
トップページの文字サイズを変更するCSS
CSSの変更する内容
Webサイトの文字サイズは
CSSのfont-sizeプロパティの値で変えることができます。
次のCSSが文字サイズに対応するCSSです。
記載してあるfont-sizeの値は
デフォルト(初期状態)のものです。
/* サイト説明 */ .site_description { font-size: 10px; } /* ヘッダー情報 */ .header-info a { font-size: .8em; } /* カード型タイトル */ .post-list-card .post-list .entry-content .entry-title { font-size: 1.15em; } /* カード型記事本文 */ .post-list-card .post-list .entry-content p { font-size: .9em; } /* ウィジェットタイトル */ .widgettitle { font-size: 1em; }
上記のfont-sizeの数値を
お好みに合わせて数値変更してください。
修正例
例えば・・・・・
18pxから12pxに文字サイズを小さくしたい場合は
次のように修正します。
font-size: 18px;
↓ ↓ ↓
font-size: 12px;
値は任意で変更が大丈夫です。
ターゲットがご高齢なら文字を大きくするのもありです。
ご自身のお好みの大きさに合わせて
数字の修正を行ってください。
基礎情報
font-sizeの値の単位は、「px」、「%」、「em」などがあります。
(単位については、この記事では詳しく説明しません。)
ちなみに・・・・・
font-sizeの単位に「em」があります。
これは小数単位で文字サイズの指定ができます。
emの値が1以下の場合
小数点の前の「0」を省略することができます。
つまり・・・・・・
「.9em」と「0.9em」は同じ文字サイズを表します。
まとめ
今回は
スワロー・ハミングバード・ストーク・アルバトロスの
メニュー文字の大きさを変更するCSSのご紹介でした。
コピペで対応できる簡単方法ですので
実際に対応してみて下さい。
数字を変えるだけですぐにできるはずです。