経倫悔-keirinbu-

社会人5年目の僕は22歳の僕に教えてあげたい。

ブログの文字カスタマイズ

カスタマイズで、ブログの『文字』のデザインをCSSで変更しました。今回は、“日本語フォント”と“文字サイズ”の調整です。 

私がこのブログで使っているテーマは『blank』です。シンプルで良いテーマですが、“フォント”を変更し、“ブログタイトル”と記事タイトル小さくしたいと思っていました。

このブログのカスタマイズ内容を紹介します。

フォント

このブログのフォントは

{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

です。(1/11時点)
ぶっちゃけ初期設定と変わっているかどうかは、わかりません。笑

googleフォントの記事はよく見たのですが、日本語対応のフォントに関しての記述が少なく色々ググってみました。

下記のサイトが日本語フォントに関して、色々テンプレがあってわかりやすいです。

unitopi.com

 

文字サイズ

文字サイズのカスタマイズは

/* ブログのタイトル */
#title a {
color: #000000;/*タイトルの文字色*/
font-size: 25px;
}
/* ブログのタイトル 終わり*/

/* ブログ説明欄 */
#blog-description {
color: #000000;/*タイトルの文字色*/
font-size: 18px; /*文字サイズ*/
}
/* ブログ説明欄 終わり*/

/* 記事タイトル */
.entry-title {
font-size: 20px; /*文字サイズ*/
}
.entry-title {
color: #000000; /*タイトルの文字色*/
font-weight: 600; /*文字の太さ*/
}
/* 記事タイトル 終わり*/

とCSSで設定しています。(1/11時点)

補足しますと

“ #title a ”は、ブログタイトル

“ #blog-description ”は、ブログタイトルの下にある説明文

“ .entry-title ”が、記事のタイトル

に関連するものです。

 

初心者は、CSSの欄が文字の羅列にしか見えないですよね〜。(私もですが)

ここで“ #title a ”を例にとって説明してみると

#title a {
font-size: 25px;
}

ブログタイトルの {
サイズを:25pxにする;
}

となるようです。これだけ知っているだけでも、ブログの文字に関してのカスタマイズができるようになるはずです。

とはいえ、私もほぼ知識がないので、わかんない時はコピペでそれっぽくしているだけの場合が多いです。

実際にカスタマイズをする場合は、『ゆきひー』さんが作った構成図がとても参考になるので、ご参照ください。最初何の表なのか全くわかりませんでしたが、理解するとわかりやすくて感動します。感謝申し上げまする。

www.yukihy.com

 

CSSやHTMLを勉強し始めると時間がいくらあっても足りないですね。初心者にはわからないことだらけなので余計時間がかかります。

ある程度のところで妥協してこれからも進めていこうと思います。