アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編４：記事タイトル背景変更
今日は、記事タイトルの背景をCSSで変更してみたいと思います。
それでは、いつも通り、CSSの編集画面に移動しましょう。
ちなみに、編集する場合は、ブラウザのタブを活用して
一つはこのブログ、もうひとつは皆さんのCSS編集画面、
もうひとつは他のWebページを参考にしたりというように、
使い分けると、作業性が向上しますよ。
｢そんなことあたりまえだよ！｣と思われるかもしれませんが、
ひたすら、一つのタブでWebページを見ている人が、
すぐ近くにいるものですから…。
おっと、話が最初っからそれてしまいました。
その人のことは、最後にでも語るとします（笑）
まずは、背景用の素材からですね。
今回はココから 素材を分けてもらいたいと思います。
素材は作るのが大変なので助かりますね。
フリー素材[*Piece***]さん、ありがとうございます。
今回、私の場合は、壁紙素材 → チェック → 01
から、緑色の素材を右クリックして画像を保存してください。
↓この緑の画像をダウンロードしました。
そうそう、素材屋さんでは、画像の直リンクは禁止している場合が
ほとんどですので、素材は自分のWebページやブログに
アップロードしてから使うようにお願いします。
直リンクで画像を使うと、素材屋さんのWebサイト（サーバー）に
余計な負荷を掛ける迷惑行為になっちゃいますので。
で、こんなにちっちゃな画像て大丈夫？
と思うかもしれませんが、全く問題ありません。
要は画像の特性を活かしてあげることが重要なのです。
意味が分からないと思うので、行動して
サクッと体験して理解してもらいましょう。
まずは、ダウンロードした画像をアップロードします。
すると、アップロードした画像とその画像のパス（URL）が表示されます。
では、この画像のパスをすべて選択し、コピーをしておいてください。
そして、下に画面をスクロールさせ、｢現在使用中のブログデザインCSS｣の
テキストボックス内の編集をしていきたいと思います。
編集箇所は｢/*７）記事タイトルの背景色を変更する*/｣の
.entry h3.titleの部分になりますので、ブラウザの文字検索で
.entry h3.titleを探します。他にも.entry h3.titleがありますが、
探す部分は｢/*７）記事タイトルの背景色を変更する*/｣の下
の.entry h3.titleなので、間違えないように気を付けてください。
では、Ctrl ＋ F （もしくはメニューから編集 → 検索）を押します。
すると、検索用のウィンドウが表示されますので、
そこに｢.entry h3.title ｣を入力して、次の場所を探します。
この部分の{ }の中につぎのプロパティを追加します。
background-image: url();
追加したら、先ほどアップロードした画像ファイルのURLを
すべてコピーして、urlの後の( )内に貼り付けします。
そうしたら、画面を下にスクロールさせて、
｢表示を確認する｣をクリックします。
すると、次の様に記事タイトルの背景が画像に切り替わりました。
←こんな小さい画像が↑こんなに大きく表示されたのか、
別記事のヘッダーに画像 を追加するを実施した方はピンと
来たと思いますが、これは、画像が繰り返して表示されているためです。
しかも、この画像の場合は、繰り返し表示用に作られてますので、
綺麗なチェック柄になったというわけです。
皆さんも、表示に問題がなければCSSを保存して下さい。
この調子で、サイドバーの表示も変えてみてください。
サイドバーは、
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title
の{ }内に、先ほど挿入した
background-image: url();
とURLを( )内に入力してください。
どうですか、うまくいきましたか？
以上で、
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編４：記事タイトル背景変更
を完了したいと思います。
あ、そうそう、ブラウザをひたすら一つのタブで
使い続けるその人とは…
うちのかみさんです（笑）
まぁ、それで支障が出てないので、
問題ない使い方なんでしょうけどね
使い方は人それぞれですが、自分のお勧めとしては、
ダブルディスプレイでの表示ですね。
これだと、片方の画面を見ながら、もう片方の画面で
作業が出来るので、とても効率が上がります。
まぁ、今のパソコンだと解像度が高いモニタがついてくるので、
一画面で2画面分表示できたりしますが。
でも、余っているモニタをノートPCなんかに繋げるだけで、
劇的に作業効率がアップしますので、是非やってみてください。
それでは、次回は…
…
次回は～
…
ん～、何にしましょ？
リクエストがある方コメントくださ～い。
お待ちしております。
精一杯対応してみたいと思います！
それでは、いつも通り、CSSの編集画面に移動しましょう。
ちなみに、編集する場合は、ブラウザのタブを活用して
一つはこのブログ、もうひとつは皆さんのCSS編集画面、
もうひとつは他のWebページを参考にしたりというように、
使い分けると、作業性が向上しますよ。
｢そんなことあたりまえだよ！｣と思われるかもしれませんが、
ひたすら、一つのタブでWebページを見ている人が、
すぐ近くにいるものですから…。
おっと、話が最初っからそれてしまいました。
その人のことは、最後にでも語るとします（笑）
まずは、背景用の素材からですね。
今回はココから 素材を分けてもらいたいと思います。
素材は作るのが大変なので助かりますね。
フリー素材[*Piece***]さん、ありがとうございます。
今回、私の場合は、壁紙素材 → チェック → 01
から、緑色の素材を右クリックして画像を保存してください。
↓この緑の画像をダウンロードしました。
そうそう、素材屋さんでは、画像の直リンクは禁止している場合が
ほとんどですので、素材は自分のWebページやブログに
アップロードしてから使うようにお願いします。
直リンクで画像を使うと、素材屋さんのWebサイト（サーバー）に
余計な負荷を掛ける迷惑行為になっちゃいますので。
で、こんなにちっちゃな画像て大丈夫？
と思うかもしれませんが、全く問題ありません。
要は画像の特性を活かしてあげることが重要なのです。
意味が分からないと思うので、行動して
サクッと体験して理解してもらいましょう。
まずは、ダウンロードした画像をアップロードします。
すると、アップロードした画像とその画像のパス（URL）が表示されます。
では、この画像のパスをすべて選択し、コピーをしておいてください。
そして、下に画面をスクロールさせ、｢現在使用中のブログデザインCSS｣の
テキストボックス内の編集をしていきたいと思います。
編集箇所は｢/*７）記事タイトルの背景色を変更する*/｣の
.entry h3.titleの部分になりますので、ブラウザの文字検索で
.entry h3.titleを探します。他にも.entry h3.titleがありますが、
探す部分は｢/*７）記事タイトルの背景色を変更する*/｣の下
の.entry h3.titleなので、間違えないように気を付けてください。
では、Ctrl ＋ F （もしくはメニューから編集 → 検索）を押します。
すると、検索用のウィンドウが表示されますので、
そこに｢.entry h3.title ｣を入力して、次の場所を探します。
この部分の{ }の中につぎのプロパティを追加します。
background-image: url();
追加したら、先ほどアップロードした画像ファイルのURLを
すべてコピーして、urlの後の( )内に貼り付けします。
そうしたら、画面を下にスクロールさせて、
｢表示を確認する｣をクリックします。
すると、次の様に記事タイトルの背景が画像に切り替わりました。
←こんな小さい画像が↑こんなに大きく表示されたのか、別記事のヘッダーに画像 を追加するを実施した方はピンと
来たと思いますが、これは、画像が繰り返して表示されているためです。
しかも、この画像の場合は、繰り返し表示用に作られてますので、
綺麗なチェック柄になったというわけです。
皆さんも、表示に問題がなければCSSを保存して下さい。
この調子で、サイドバーの表示も変えてみてください。
サイドバーは、
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title
の{ }内に、先ほど挿入した
background-image: url();
とURLを( )内に入力してください。
どうですか、うまくいきましたか？
以上で、
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編４：記事タイトル背景変更
を完了したいと思います。
あ、そうそう、ブラウザをひたすら一つのタブで
使い続けるその人とは…
うちのかみさんです（笑）
まぁ、それで支障が出てないので、
問題ない使い方なんでしょうけどね
使い方は人それぞれですが、自分のお勧めとしては、
ダブルディスプレイでの表示ですね。
これだと、片方の画面を見ながら、もう片方の画面で
作業が出来るので、とても効率が上がります。
まぁ、今のパソコンだと解像度が高いモニタがついてくるので、
一画面で2画面分表示できたりしますが。
でも、余っているモニタをノートPCなんかに繋げるだけで、
劇的に作業効率がアップしますので、是非やってみてください。
それでは、次回は…
…
次回は～
…
ん～、何にしましょ？
リクエストがある方コメントくださ～い。
お待ちしております。
精一杯対応してみたいと思います！