JUGEMブログでヘッダー（タイトルバー）の色を変更する方法
2019.06.30 Sunday
JUGEMテーマ：JUGEM
このブログは最初にテンプレートを設定して以来、殆どいじったことはありませんでした。
最近になって急にカスタムしたくなったのですが、使っているテンプレートではあまり大きく変更できないようです。
このブログのテンプレートは『white wall』というごくシンプルなものです。
サイドバーがないのは不便ですが、サイドバーが入るタイプは画像が小さいし余白が多いのがあまり好きではありません。
とりあえず『white wall』のままでヘッダーの色を変更してみました。
ネット検索した時にJugemブログのカスタムあまり見つからなかったので、やり方を書いておきます。
カスタムと呼ぶのも恥ずかしいようなごくごく簡単な内容ですが、少しでも参考になれば嬉しいです。
管理者ページの『デザイン』の中の、『HTML・CSS編集』を開きます。
『HTML・CSS編集』を開くと、使用中のテンプレート名も分かります。
カスタム用のテンプレートを使っている場合は、ヘッダーをオリジナル画像にするなど、もうちょっと色々できます。
『HTML編集フォーム』と『CSS編集フォーム』がありますが、今回はCSSの方を使います。
『CSS編集フォーム』をスクロールすると、＊ブログ名と説明文、トップ画像＊のところに＃headerが見つかります。
ここの、『background』というのがヘッダー（タイトルバー）の背景カラーです。
『white wall』のデフォルトのままだと＃313131になっています。
この色ですね。墨色というんでしょうか？
飽きの来ない良い色なので、ブログをスタートした当初からデフォルトのまま触ったことがありませんでした。
ネットでカラー見本を見ながら、＃2f4f4fに変更しました。
それがこの色。墨色がずっと飽きなかったので、今度も落ち着いた色がいいかなと思ったのですが・・・
たった2日で飽きてしまって、現在のピンクに変更しました。
ピンクでも色んな色がありますが、今使っているのは＃FF9999です。
カラーコードを変更する時は、末尾の『 ; 』を忘れないように。
このピンクに変更してみたら、意外と飽きなかったのでしばらくはこの色を使います。
せっかくなのでブログタイトルの文字も少しいじります。
＊ブログ名＊の『font-size』でフォントサイズ（文字の大きさ）を調整できます。デフォルトだと20pxです。
『color』で文字の色を変更できます。こちらはデフォルトだと＃FFFFFFで、柔らかい白です。
フォントサイズは30pxで試してみたら大きすぎたので、25pxに変更しました。
色は淡いたまご色と迷って、明るい水色（＃00ffff）に変更しました。
あれ？フォントは大きくなりましたが、色は変わりませんでした。どうしてでしょう？
色々試してみましたが、ダメでした。何が原因か分かりませんでしたが、私の古いパソコンのせいかもしれません。
どうでしょう？墨色の方がすっきりしていましたが、今のピンクの方が So Co Laっぽいかなーと思います。
少しいじると色々気になって、やっぱりカスタム用のテンプレートに変更して、ヘッダーは画像にしたいなぁ、とか。
サイドバーもあった方が読むときに操作しやすいですよね。
ヘッダーの色が変わったのはパソコン版だけで、スマホ版は変わっていません。
スマホ版といえば、スマホだと2枚目以降の画像が大きくはみ出してしまっているのが気になっています。
画像の大きさを画面に合わせるように設定し直したのですが、直りませんでした。見にくくて申し訳ありません。
スマホでも『PC表示に切り替え』をクリックして頂ければ、ヘッダーの色も見えますし、画像もはみ出しません。
PC作業は得意ではありませんが、またカスタム出来るところがあれば、変えていきたいと思っています☆
