Wedges.bin

はてなブログでWEBデザイン

ブログタイトルの大きさを変える。

このテーマでは、ブログタイトルのフォントサイズは350%になっています。
日本語で長めのタイトルにすると数行になってしまいます。

文字の大きさを変更したいときは、カスタマイズのタブで「デザインCSS」を選択し、CSSを追加します。

#blog-title-inner h1#title {font-size: 200%;}

これを1行追加することで、350%から200%に下げることができます。

しかし、上記で解消されるのは、画面サイズ1025以上の表示の時だけ。

このテーマではレスポンシブになっているため、タブレット表示とスマホ表示も制御しないといけません。
なので、以下のCSSを追加してください。

@media (max-width: 736px) ,
(min-width: 737px) and (max-width: 1024px) and (orientation:portrait) {
#blog-title-inner h1#title {font-size: 150%;}
}
@media (min-width: 1025px) ,
(min-width: 737px) and (max-width: 1024px) and (orientation:landscape) {
#blog-title-inner h1#title {font-size: 200%;}
}

内容をざっくり翻訳しますと、
メディア(画面)のサイズが最大で736pxの画面まで(スマホを指しています)と、
737px〜1024pxの画面でポートレイト表示(タブレットの縦使い表示)の場合、
ブログタイトルを150%のフォントサイズにします。

メディア(画面)のサイズが最小で1025pxの画面まで(PCの表示)と、
737px〜1024pxの画面でランドスケープ表示(タブレットの横使い表示)の場合、
ブログタイトルを200%のフォントサイズにします。

という内容です。
メディア定義の部分の数字は変えないで、フォントサイズの部分のみお好みで変えてください。
(メディア定義の部分は、上記の数値でテーマに書かれていますので、変えてしまうことによって、変更が効いている部分と、効いていない部分が出てきてしまいます。)