～TCD～コメント欄のフォントを変更する

TCDのWordPressテーマ「AN(tcd014)」のコメント入力欄のフォントを変更する方法です。

コメント入力欄のフォントはmonospace、フォントサイズは11pxになっていますので、それを変更します。

カスタマイズをする場合の注意
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。

親要素のfont-familyを継承させる

コメント入力欄のフォントがmonospaceなのは、コメント入力欄で使用されるtextarea要素が、親要素のCSS(ANの場合はjapanese.css)で指定されているfont-familyを継承しないからです。

form,table,input,textarea,dl,dt,dd { margin:0; padding:0; font:inherit; }

変更するのは、style.css の basic setting の中です。formやinput、textarea などが書かれた一行に、font:inherit; と書き加えました。

親要素では、ヒラギノ角ゴシックやメイリオなど、一般的に見やすいと言われているフォントが指定されていますから、コメント入力欄でも親要素と同じフォントが継承されるように、inheritという値を指定しました。

また、この場合、input要素が使われるもの(Googleカスタム検索など)も同じように親要素のフォントが継承されます。

basic setting の一番下にある、input[type=”text”]～と書かれた一行に書き加えても大丈夫です。

comment-style.cssにfont-familyを指定する方法もある

comment-stlye.css にfont-familyを指定する方法でも大丈夫です。

#comment_textarea textarea { margin:15px 0 0; width:100%; height:150px; border:1px solid #ccc;
                             background:#fff; color:#777; font-size:13px; overflow:auto; 
			     font-family:"Century Gothic",Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; }

/* — form area — */ の中にある、#comment_textarea textarea に、font-familyを書き加えます。

コメント入力欄のフォントを親要素とは違うフォントにしたい場合はこちらの方法で変更してくださいね。

コメント入力欄の文字サイズを変更する

コメント入力欄の文字サイズは、comment-stlye.css で変更します。

#comment_textarea textarea { margin:15px 0 0; width:100%; height:150px; border:1px solid #ccc;
                             background:#fff; color:#777; font-size:11px; overflow:auto; }

/* — form area — */ の中にある、#comment_textarea textarea に書かれているfont-sizeが、コメント入力欄に表示されるフォントサイズです。デフォルトは11pxになっていますので、お好みのサイズに変更してください。