はてなブログを簡単カスタマイズ！③本文テキスト文字の変更編

■はじめに

f:id:kay72234:20151025131329j:plain

はてなブログでは、いろいろなデザインテーマが公開されています。デザインテーマを適用することで、ブログ全体のデザインと雰囲気を簡単に変えることができます。
しかし、やはり自分のブログだけの個性的なデザインにしてみたいと思いますよね。こちらの記事では、見出しをカスタマイズしてデザイン変更する方法を紹介しました。

今回は、記事本文のテキスト文字を簡単にカスタマイズする方法をまとめます。

■無料版でもOKです

記事の内容は、無料版はてなブログでも利用可能ですのでご安心ください。ただし、具体的な方法はPC向け画面用の設定方法になります。スマホ向けの画面にも適用するには、こちらの記事を参考にレスポンシブデザインをお試しください。

■文字のサイズを変更する

では、具体的な方法の説明に入ります。まずは記事本文の文字サイズの変更です。デザインテーマによっては、イメージと微妙に文字のサイズが違うと感じる場合がありますので、自分の好みに合わせて変更してみましょう。

では、まずは次のコードをコピーしてください。

.entry-content {
font-size:16px;
}

続いてダッシュボードから「デザイン」のメニューを開きます。スパナマークのアイコンをクリックすると次のような画面が表示されます。「デザインCSS」をさらにクリックすると、スタイルシートの入力欄が開きますので、そこに先ほどコピーしたコードを貼り付けてください。

貼り付けた後は、「変更を保存する」ことをお忘れなく。コード中の「○px」の値が文字のサイズを意味していますので、実際に表示させながら調節してください。

■文字の色を変更する

次は本文の文字の色を変更してみます。先ほどのコードに「color～」の一文を追加します。

.entry-content {
color: #000080;
font-size:16px;
}

追加した一文の「#000080」の６桁の数字で色を指定しているわけです。具体的な色と数字の対応は「カラーコード」などで検索すると、いろいろ出てきますので、そちらをご覧ください。

■本文中のリンクの色を変更する

先ほどのコードを使うと本文の色だけでなく、本文の中に組み込まれているリンクの文字列の色も変わってしまいます。そうなるとリンクというのが分かりにくくなってしまいますので、次のコードを使います。

.entry-content a {
color: #008000; /*リンクの文字色*/
}
.entry-content a:hover {
color: #32CD32; /*マウスオンオーバー時の文字色*/
}

これまでと同じように、デザインCSSの欄にコピペすればOKです。「a」がリンクを、「a:hover」がリンクにマウスカーソルが当たった時を意味しています。

■キーワードリンクの色を変更する

最後に、無料版のはてなブログの方向けのコードです。先ほどのようにリンクの色を変えると、今度ははてなブログ特有の「キーワードリンク」の色も一緒に変わってしまいます。
無料版のはてなブログでは、キーワードリンクを無効にすることができないので、記事によっては少し鬱陶しく感じてしまいます。
その場合は、次のコードでキーワードリンクの色を指定しておけば良いでしょう。