アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編３：ヘッダー文字色変更
では、今日はサクサクと進めてしまいたいと思います。
ちなみに、現在進行形で編集を進めていますので、
完成までには時間がかかるかも知れませんので、
気長にお付き合いくださいね。
それでは、いつも通り、ＣＳＳの編集画面に入って、
本日も、アメブロのデザインをちょこっと変更していきます。
さて、現在の状態ですが、背景色と文字色の色が近いことから、
かなり読みにくい状態となってます。
これでは、せっかく来て頂いたユーザの方に、伝えたいことが
伝わらないので、読みやすい文字色に変更したいと思います。
この部分は、デフォルトのCSS内で、｢かんたんCSS編集はこちら｣と書かれた
下の行が編集箇所になってますので、簡単に編集できちゃいます。
こういった心遣いはとても嬉しいですよね。
そのうち、誰でもフルカスタマイズ可能なCSSの配布も
行えたら、喜んでくれる人がいるんじゃないかなと思うので、
がんばって、作業を進めて行きたいと思います。はい。
それで、変更箇所は以下の2か所になります。
#header h1 a の colorプロパティ の値 #333333と
#header h2 の colorプロパティ の値 #333333になります。
この#333333とはカラーコード（色番号）を示しており、
光の三原色であるRGB（赤、緑、青）の割合を変化させることで、
パソコンで表示される色を作っているということです。
ちなみに、カラーコードは次のように分かれており、
＃○○△△□□
○○が赤、△△が緑、□□が青の色の割合を16進数で
入力することで、様々な色の表現が可能となります。
この中の数値は00～FFまでの256段階で入力可能です。
といっても、数字だけを変えたのでは、いつになったら
好きな色にたどりつくか分からないので、コチラ の
カラーパレットを利用させてもらいます。
このサイトを運営されている管理人さん、本当に助かります。
リンクをクリックしたら、｢フルカラーセレクト｣をクリックしてください。
すると以下のよう
な画面が表示されますので、
まずはじめに、自分の画像のメインに近い色を選択してください。
すると、背景色がその色に変わりますので、
次に、文字色をクリックして、好きな色を選択してください。
すると、以下の様に、背景と文字の関係が分かりやすく表示されるので、
大体のイメージがつかめると思います。
できるだけ、読みやすそうな色を選択してくださいね。
では、私の場合、白（#FFFFFF）がよさげだったので、
それを文字色に指定したいと思います。
それでは、先ほどのCSS編集画面に戻ってもらって、
#header h1 a の colorプロパティ の値 #333333と
#header h2 の colorプロパティ の値 #333333を
下記の画面の様に#FFFFFFに変更します。
変更が完了しましたら、いつも通り、｢表示を確認｣をクリックして、
ご自分のブログデザインを確認してみてください。
変更後：
変更前：
はい。見事に文字色が変わり、読みやすくなりましたね。
ん？あまり読みやすくないですか？
この辺は、残念ながらセンスの問題です。
私は色センスがないのは自覚しているので、
とにかく、その時は他の人に確認してもらってます。
こういった、人の繋がりもとても大事ですよね。
さて、以上で
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編３：ヘッダー文字色変更
を終了しますが、｢かんたんCSS編集はこちら｣には、
文字の大きさを変更したり、全体の文字の色を変更したりと
他にも出来ることがあるので、いろいろ試してください。
CSSのバックアップを取っていれば、失敗しても大丈夫ですから、
恐れるよりは、その先に待っている楽しみを想像しながら、
是非、行動に移していくことが私は大事だと感じてます。
このアメブロのテンプレートデザインのカスタマイズを達成した時は
皆さんの人生観も変わっているかもしれませんよ
それでは、人生もより良くさせるアメブロのテンプレート
カスタマイズ大作戦は続きますので、次回をお楽しみに！
あっ、こんなタイトルが素敵ですね
文字とか、紙に落とし込むと、自分でも知らない
気付きが訪れるから、とても楽しい作業ですね。
だから、ブログって人気なんですかね？
ん～、奥が深い。
では、もう少し考えてみて、タイトルも変更したいと思います。
次回は、
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編４：記事タイトル背景変更
で進めて行きたいと思います。
次回もお楽しみに！
…あ、2回目でした
ちなみに、現在進行形で編集を進めていますので、
完成までには時間がかかるかも知れませんので、
気長にお付き合いくださいね。
それでは、いつも通り、ＣＳＳの編集画面に入って、
本日も、アメブロのデザインをちょこっと変更していきます。
さて、現在の状態ですが、背景色と文字色の色が近いことから、
かなり読みにくい状態となってます。
これでは、せっかく来て頂いたユーザの方に、伝えたいことが
伝わらないので、読みやすい文字色に変更したいと思います。
この部分は、デフォルトのCSS内で、｢かんたんCSS編集はこちら｣と書かれた
下の行が編集箇所になってますので、簡単に編集できちゃいます。
こういった心遣いはとても嬉しいですよね。
そのうち、誰でもフルカスタマイズ可能なCSSの配布も
行えたら、喜んでくれる人がいるんじゃないかなと思うので、
がんばって、作業を進めて行きたいと思います。はい。
それで、変更箇所は以下の2か所になります。
#header h1 a の colorプロパティ の値 #333333と
#header h2 の colorプロパティ の値 #333333になります。
この#333333とはカラーコード（色番号）を示しており、
光の三原色であるRGB（赤、緑、青）の割合を変化させることで、
パソコンで表示される色を作っているということです。
ちなみに、カラーコードは次のように分かれており、
＃○○△△□□
○○が赤、△△が緑、□□が青の色の割合を16進数で
入力することで、様々な色の表現が可能となります。
この中の数値は00～FFまでの256段階で入力可能です。
といっても、数字だけを変えたのでは、いつになったら
好きな色にたどりつくか分からないので、コチラ の
カラーパレットを利用させてもらいます。
このサイトを運営されている管理人さん、本当に助かります。
リンクをクリックしたら、｢フルカラーセレクト｣をクリックしてください。
すると以下のよう
な画面が表示されますので、
まずはじめに、自分の画像のメインに近い色を選択してください。
すると、背景色がその色に変わりますので、
次に、文字色をクリックして、好きな色を選択してください。
すると、以下の様に、背景と文字の関係が分かりやすく表示されるので、
大体のイメージがつかめると思います。
できるだけ、読みやすそうな色を選択してくださいね。
では、私の場合、白（#FFFFFF）がよさげだったので、
それを文字色に指定したいと思います。
それでは、先ほどのCSS編集画面に戻ってもらって、
#header h1 a の colorプロパティ の値 #333333と
#header h2 の colorプロパティ の値 #333333を
下記の画面の様に#FFFFFFに変更します。
変更が完了しましたら、いつも通り、｢表示を確認｣をクリックして、
ご自分のブログデザインを確認してみてください。
変更後：
変更前：
はい。見事に文字色が変わり、読みやすくなりましたね。
ん？あまり読みやすくないですか？
この辺は、残念ながらセンスの問題です。
私は色センスがないのは自覚しているので、
とにかく、その時は他の人に確認してもらってます。
こういった、人の繋がりもとても大事ですよね。
さて、以上で
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編３：ヘッダー文字色変更
を終了しますが、｢かんたんCSS編集はこちら｣には、
文字の大きさを変更したり、全体の文字の色を変更したりと
他にも出来ることがあるので、いろいろ試してください。
CSSのバックアップを取っていれば、失敗しても大丈夫ですから、
恐れるよりは、その先に待っている楽しみを想像しながら、
是非、行動に移していくことが私は大事だと感じてます。
このアメブロのテンプレートデザインのカスタマイズを達成した時は
皆さんの人生観も変わっているかもしれませんよ
それでは、人生もより良くさせるアメブロのテンプレート
カスタマイズ大作戦は続きますので、次回をお楽しみに！
あっ、こんなタイトルが素敵ですね
文字とか、紙に落とし込むと、自分でも知らない
気付きが訪れるから、とても楽しい作業ですね。
だから、ブログって人気なんですかね？
ん～、奥が深い。
では、もう少し考えてみて、タイトルも変更したいと思います。
次回は、
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編４：記事タイトル背景変更
で進めて行きたいと思います。
次回もお楽しみに！
…あ、2回目でした