*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

TOP >  Template >  カスタマイズ >  文字サイズの変更

文字サイズの変更

いつもご愛顧頂き、誠に有難うございます。
テンプレートや記事の文字サイズ変更方法について、今迄記事にしておりませんでした。
不案内なテンプレートで申し訳ございませんでした。m(__)m
カスタマイズをされる方にとっても必要な情報と思いますので、記事にさせて頂きます。


1) テンプレート全体の文字サイズ変更
2) 投稿画面で文字サイズを変更
3) 記事カラムまるごと文字サイズを変更



1) テンプレート全体の文字サイズ変更
先ず、テンプレート全体の文字サイズ変更についてです。
全体の文字サイズ
(クリックで大きく表示)
ブログ全体の文字を大きくしたい場合は、ご利用テンプレートのスタイルシート編集枠上段の
html{
font-size:
85%; という部分の数値を調整します。(小数点以下も可。)
テンプレートによって85%では無いものも有ります。その場合も html の font-size の数値を変更して下さい。

1emの大きさはブラウザーのfont-sizeのデフォルト値で、変更がなにも無ければ16pxです。
html{ の下に有る body{ に font-size:1em; と有りますが、html{ で(上記であれば)85%としているので、16pxの85%という大きさになります。html{ のfont-sizeを100%にすると、デフォルト値の16pxで表示されます。




2) 投稿画面で文字サイズを変更
文字のサイズを記事内で変更する場合は投稿画面で行います。大小色々変えたい場合はこちらをご利用下さい。
【注意】
投稿画面での文字サイズ設定は、テンプレート毎の基本文字サイズが指定されている場合、上手く反映しない場合が有ります。
当方テンプレートではデフォルトサイズより小さくなっておりますので、それに合わせて投稿画面で文字サイズ設定を致しますと、テンプレートを変更した場合に『大き過ぎ』たり『小さ過ぎ』たりする事が有ります。
入力モードでの文字サイズMediumは16pxですので、「テンプレートの文字が小さいな」と思われましたら、先ず(1)の基本文字サイズを100%にして表示をご確認下さいませ。


[参考数値 1em=16pxを100%とした場合]
フォントサイズ

投稿画面1
・ 通常の(旧)投稿画面。(クリックで大きく表示)
投稿画面2
ボタンを押すと選択した文字列にCSSが直書きされます。
変な文字列訳わからん、と仰る方は下記の入力方法をどうぞ。

・ 高機能テキストエディタを使った場合
投稿画面3
MS Wordのような画面です。でもこの『W』はWordでは無く WYSIWYGの事です。
WYSIWYGは「What You See Is What You Get」の略で、入力画面上で表示されている通りに表示する事ができます。

・ 新投稿画面の場合
投稿画面4
使うかどうか分からないようなボタンを排除し、使い易さを重視したシンプルな投稿画面で、こちらも『見たまま』表示です。




3) 記事カラムまるごと文字サイズを変更
いちいち記事を書く時にエディタで調整するのは面倒なので、まとめて記事表示部分の文字サイズを変更したい、という場合はスタイルシートを編集します。簡単に言うと「ヘッダーとメニューカラム以外」です。
…細かく言うと、ヘッダー部のブログタイトル・ブログの説明文、サイドに有るメニュー部分を除き、(設定していれば)トップページ及び個別記事のプラグイン3、個別記事ページの本文・コメント・トラックバック、カテゴリーや月別・全記事タイトルリスト等の文字は大きくなります。

元々(全体の文字サイズで指定しており)記事カラム部分の文字サイズは指定しておりませんので、一番簡単な方法として新たに文字サイズのスタイルを追加します。
この方法で有れば、テンプレートを他のものに変更しても(2)の注意事項を気にしなくて済みます。
ご利用テンプレートのスタイルシート編集枠最下段に、下記を追加して更新して下さい。

テンプレート名↓の場合は
youth_resp2,3c
genial_resp2c,3c
serene_resp2c,3c
ct_responsive
dt21_ryo,ryo_2c
candy-2c3c
green-2c3c

↓下記を最下段に追加(コピペ可)
.blog-con {
font-size: 1.2em; /* 記事の文字サイズはここを変える */
}


テンプレート名↓の場合は
al_responsive2c
↓下記を最下段に追加(コピペ可)
.con1,.menu3 {
font-size: 1.2em; /* 記事の文字サイズはここを変える */
}


テンプレート名↓の場合は
al_responsive3c
lace-d2c,d3c
lace-al2,al3

↓下記を最下段に追加(コピペ可)
.con2,.menu3 {
font-size: 1.2em; /* 記事の文字サイズはここを変える */
}


後は更新ボタンを押して頂ければ適用されます。
文字サイズの数値は小数点以下が指定できますので、見栄えの微調整が出来ます。
(閲覧されるブラウザの種類によっても解釈が異なりますが、第3位で切り捨て・四捨五入等が有るものを考慮して、小数点以下は第2位までの指定が無難…と思います。)



[Tag] * カスタマイズ

Last Modified : 2020-03-19

Comments






非公開コメント

aki Re: k 様へ

お返事にいらして頂き、誠に有難うございます。m(__)m
一つご提案がございますので、そちらに伺わせて頂きますね。
(このコメントの返信は不要です。(^-^))
2020-03-17-16:41aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-03-17-00:29  [ 返信 * 編集 ]

aki Re: b 様へ

お返事有難うございます。m(__)m
後出し報告が有るので、そちらに伺います~。
2020-03-14-19:10aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-03-14-15:33  [ 返信 * 編集 ]

aki Re: b 様へ

コメント頂き有難うございます。

ちょっと良いもの(?)見付けましたので、そちらにお伺い致しますね~♪
2020-03-14-14:17 aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-03-14-10:19  [ 返信 * 編集 ]

aki Re: maccha2665 様へ

無事に適用できたようで何よりです。(^^)
他にもカスタマイズされていらっしゃり、暗色テーマもとても見易いですね。
また何かお気付きがございましたら、いつでもお声掛け下さいませ。

この度は素敵な出会いを有難うございました。(^-^)
2020-03-11-15:23aki [ 返信 * 編集 ]

No Subject

早々と、年寄りにも丁寧によく分かるように解説下さり有難うございました。
2020-03-11-07:44 maccha2665 [ 返信 * 編集 ]