Palette★カスタマイズ解説（１）基本の設定（全体・フォント・背景色）

はてなテーマストア「Palette（パレット）」のカスタマイズ解説（１）です。

カスタマイズが簡単で色々なデザインができる、はてなブログのテーマ「Palette（パレット）」はこちらからダウンロードできます。

Palette （パレット） - テーマ ストア

初回、解説（１）では、フォントや背景色などの全体的な基本の設定を解説します♪

※コードは赤字の部分を変更することで色やサイズを変えられます！
※変更後のCSSは、デザイン→カスタマイズ（スパナマーク）→{}デザインCSSに挿入します。

フォント関連-種類、色、サイズ

フォントを変える

body {font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';}

こちらのサイトでは、好きなフォントを選んでサクッとコピペで設定できます♪♪
Font-familyメーカー：標準フォント一覧からサクッと指定

文字色を変える

body{color: #454545;}

「色辞典」はいつもこちらを使っています♪♪ お好きな色をどうぞ！ 
WEB色見本 原色大辞典 - HTMLカラーコード

フォントサイズ（初期設定17px）を変える

body{font-size:17px;}

行間（高さ）を変える 

body{line-height: 1.7;}

フォントサイズや行間は、色々やってみて自分のブログのデザインにあったものを選ぶと良いでしょう(^-^)

CSSを変更してもデザインが変わらない場合はキャッシュがクリアされていないことが考えられます。CSSが間違っているかも！ってアレコレ試す前に、まずキャッシュをクリアしてみてください。
（キャッシュクリアの方法はブラウザによって違うので自分で調べてくださいね ^^;）

↑↑ここまでをまとめて変更する

body {
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';/*フォント*/
	color: #454545;/*文字の色*/
	font-size:17px;/*フォントサイズ*/
    	line-height: 1.7;/*行間の高さ*/}

リンク文字の色を変える

a {color: #87ceeb;}

リンクにマウスオーバーした時の色を変える

a:hover {color: #d3d3d3;}

既読リンクの色

こちらは、テーマでは設定していないので、設定する場合は書き足してください。 

a:visited{color: #d3d3d3;}

全体の背景色

全体の背景色を設定すると、実は記事部分は角が丸くなるようにしてあります。
↓↓こんな風に！

初期設定では、背景色は「白」になっています。 変更する場合はこちら↓↓

#content{background-color: #fff;}

グローバルヘッダ

（一番上の「記事を書く」など書いてあるバー）

#globalheader-container {
    　background-color: #000;/*背景色*/
    　/*背景色 透明にしたい場合は[color: transparent;]にする*/
   　 color:#fff;/*文字の色*/
	border-bottom: 1px solid #000;/*下線*/
       /*下線を表示しない場合は [border-bottom: none;]にする*/}

「グローバルナビゲーション」を設定している場合、グローバルヘッダーを透明にすると、後ろの文字が透けて、ごちゃごちゃしてしまいます。

はてなブログPRO版の場合は消すことができます。
無料版の方は規約違反になりますので、そのまま表示しておいてくださいね。
（個人的には、すぐに記事を書いたり編集したり出来るのであった方が良いかなって思います...）


PRO版の方のみ！
グローバルヘッダーを表示しない場合↓↓ 

#globalheader-container {display: none;}

ヘッダとフッタの色 

body{background-color: #f5f5f5;}

Palette★カスタマイズ解説（２）見出しの設定（色・サイズ・見出しリセット方法）