公開日：7/27/2018
シェア：Tweet
こんな感じのシンプルなデザインになっていると思います。白基調でわかりやすいんですが、今ひとつインパクトに欠けますね。そこで、全体的にもう少し色を足していきたいと思います。
ただ今回は「Bloggerで簡単に作るホームページ」を目指しているので、クリック+少しのキーボード操作で実現できる範囲にしたいと思います。
「Bloggerテーマデザイナー」が開きます、ここから色やテーマそのものを変更できるようになっています。早速背景の色を変えてみましょう。
「背景」をクリックすると背景画像を変えたり背景色を変えられるようになります。下にはプレビューも表示されるので、直感的に操作ができると思います。
「背景画像」をクリックすると背景に画像を入れることもできます
メインのカラーテーマでは、背景色や文字の色のセットが用意されているので、これを活用すると「不自然な配色」を回避することができます。もし「自分の美的センスで選びたい！」というときにはこの後に説明する「上級者向け」を使います。
色の設定が終わったら、何かのトラブルで作業内容が消えないように「ブログに適用」を押しておきましょう。記事を書くとき。操作をするときはこまめに保存をするように心がけましょう。
例えば、100ページ分の見出しの大きさを変えるときに、一つずつ変更していたら大変で。それを1箇所で定義（決まりをつくっておく）することで、管理がしやすくなります。CSS（スタイルシート）にはいろいろな機能があるのですが、今回は簡単な「見出しの装飾」をしたいとおもいます。
Bloggerテーマデザイナーの「上級者向け→「CSSの追加」をクリックしてからエディタに次のコードを入れましょう。
（入力するコード）
入力が終わるとプレビュー画面の「見出し」の部分が変わると思います。
では、ここで少しコードの解説をしたいと思います。
h2 {
見出しはh●で書きます、Bloggerではブログタイトルがh1。記事の大見出しがh2という割り振りになっているようです。
border-left: 5px solid #191970;・・・見出しの左端（left）に線(boder)を5pxの実線（solid）、色は青（＃191970）で入れますよ、という意味になります。5pxや＃191970を変更すると太さや色が変わります。色の指定はHTMLのカラーコードを使うので、こちらは機会があったら改めて紹介したいと思います。最後の「;」の入力が忘れやすいので注意です。
padding-left: 10px;
文字を左端からどれくらい空けるかを指定しています。なくても良いのですが、文字がラインとくっついてしまうので、入れるのがおすすめです。
}
h2に対する装飾はここまでですよ。
このCSS（スタイルシート）はBloggerでなくても流用が効くので、余裕があればぜひ勉強してみると良いかもしれません。
では、応用編で「小見出し」も装飾してみましょう。小見出しはh3になります。また、左ラインに加えて下ラインをいれて、色は「赤」先の太さも細くします。それを踏まえてコードを書くと
こんな感じになります。新しいコードが2つ出てきました。
border-bottom: 1px solid #ff0000；
これは見出しの下線を指定しています。bottomは「下」という意味ですね。
margin: 15px 0 0 0;
この部分で周囲のアイテムとの間隔を指定しています。これがないと上下がぴったりくっついて見にくくなるので、上に15pxの余白を設けています。そのあとに0が続いていますが、それぞれ右側0、下側0、左側0の余白にするよ。という意味があります。
これをh2のコードの下に設置します（下に完成例を入れました）
では、これで保存するとどうなるでしょうか？
「ブログに適応」してからページを見てみましょう。適用後に管理画面に戻るには「Bloggerに戻る」をクリックします。
見出し部分が装飾されました、ラインが入るだけでもイメージが変わってきますので、少し大変でもぜひ実装してみてください。
では、次回も引き続きBloggerテーマデザイナーでカスタマイズしていきましょう
シェア：Tweet
Bloggerでオリジナルホームページを作ろう#07：デザイン（色）をカスタマイズする
コンテンツが出来上がったら、次はホームページのデザインをカスタマイズしていきます。まだ大きなカスタマイズはしていないのでこんな感じのシンプルなデザインになっていると思います。白基調でわかりやすいんですが、今ひとつインパクトに欠けますね。そこで、全体的にもう少し色を足していきたいと思います。
ただ今回は「Bloggerで簡単に作るホームページ」を目指しているので、クリック+少しのキーボード操作で実現できる範囲にしたいと思います。
Bloggerのデザインはここでカスタマイズ
Bloggerは管理画面の「テーマ」→「カスタマイズ」から設定することができます。「Bloggerテーマデザイナー」が開きます、ここから色やテーマそのものを変更できるようになっています。早速背景の色を変えてみましょう。
「背景」をクリックすると背景画像を変えたり背景色を変えられるようになります。下にはプレビューも表示されるので、直感的に操作ができると思います。
「背景画像」をクリックすると背景に画像を入れることもできます
メインのカラーテーマでは、背景色や文字の色のセットが用意されているので、これを活用すると「不自然な配色」を回避することができます。もし「自分の美的センスで選びたい！」というときにはこの後に説明する「上級者向け」を使います。
上級者モードでBloggerのデザインを設定する
上級者向けを選択すると、Bloggerの各パーツの色やフォントなどを一つずつ決めていくことができます。各項目をクリックすると変更できる箇所がマークされるので、色を変えているうちにおかしな箇所まで変更される・・・ということは少ないと思います、色の設定が終わったら、何かのトラブルで作業内容が消えないように「ブログに適用」を押しておきましょう。記事を書くとき。操作をするときはこまめに保存をするように心がけましょう。
超・上級者！CSSを追加する
ここからは、超上級者といっても過言ではない「CSSの追加」をしてみましょう。CSS（スタイルシート）はWEBページのパーツにどのような装飾をするのかを一括して管理できる便利な機能です。例えば、100ページ分の見出しの大きさを変えるときに、一つずつ変更していたら大変で。それを1箇所で定義（決まりをつくっておく）することで、管理がしやすくなります。CSS（スタイルシート）にはいろいろな機能があるのですが、今回は簡単な「見出しの装飾」をしたいとおもいます。
Bloggerテーマデザイナーの「上級者向け→「CSSの追加」をクリックしてからエディタに次のコードを入れましょう。
| h2 { border-left: 5px solid #191970; padding-left: 10px; } |
（入力するコード）
入力が終わるとプレビュー画面の「見出し」の部分が変わると思います。
では、ここで少しコードの解説をしたいと思います。
h2 {
見出しはh●で書きます、Bloggerではブログタイトルがh1。記事の大見出しがh2という割り振りになっているようです。
border-left: 5px solid #191970;・・・見出しの左端（left）に線(boder)を5pxの実線（solid）、色は青（＃191970）で入れますよ、という意味になります。5pxや＃191970を変更すると太さや色が変わります。色の指定はHTMLのカラーコードを使うので、こちらは機会があったら改めて紹介したいと思います。最後の「;」の入力が忘れやすいので注意です。
padding-left: 10px;
文字を左端からどれくらい空けるかを指定しています。なくても良いのですが、文字がラインとくっついてしまうので、入れるのがおすすめです。
}
h2に対する装飾はここまでですよ。
このCSS（スタイルシート）はBloggerでなくても流用が効くので、余裕があればぜひ勉強してみると良いかもしれません。
では、応用編で「小見出し」も装飾してみましょう。小見出しはh3になります。また、左ラインに加えて下ラインをいれて、色は「赤」先の太さも細くします。それを踏まえてコードを書くと
| h3 { border-left: 5px solid #ff0000; border-bottom: 1px solid #ff0000; padding-left: 10px; margin: 15px 0 0 0; } |
border-bottom: 1px solid #ff0000；
これは見出しの下線を指定しています。bottomは「下」という意味ですね。
margin: 15px 0 0 0;
この部分で周囲のアイテムとの間隔を指定しています。これがないと上下がぴったりくっついて見にくくなるので、上に15pxの余白を設けています。そのあとに0が続いていますが、それぞれ右側0、下側0、左側0の余白にするよ。という意味があります。
これをh2のコードの下に設置します（下に完成例を入れました）
| h2 { border-left: 10px solid #000000; padding-left: 10px; } h3 { border-left: 5px solid #ff0000; border-bottom: 1px solid #ff0000; padding-left: 10px; margin: 15px 0 0 0; } |
では、これで保存するとどうなるでしょうか？
「ブログに適応」してからページを見てみましょう。適用後に管理画面に戻るには「Bloggerに戻る」をクリックします。
見出し部分が装飾されました、ラインが入るだけでもイメージが変わってきますので、少し大変でもぜひ実装してみてください。
では、次回も引き続きBloggerテーマデザイナーでカスタマイズしていきましょう
