4月19日の勉強会の報告

はじめに前回の最後の文字の消し方についての学習がありましたが、4月5日の報告と同じです。
今回はページのタイトルの背景の変え方の説明がありました。
A)背景の色を変える
　先ず　メンバー紹介　の背景色を変える。
①　ダッシュボード画面を出す。
②　ダッシュボード画面で　Ctrl+サイトを表示　をクリック。
　　ホームページ画面とダッシュボード画面が出る。
③　ホーム画面で　メンバー紹介　の画面を出し、右クリックし　ページのソースを表示　をクリッ　　　ク。
④　メンバー紹介　の　class　を探す。
　　メンバー紹介　をコピーし　ページのソース画面で　Ctrl+F をクリックする。
　　すると、メンバー紹介に色が付く。
⑤　次の画面が出る。　

メンバー紹介の文字が出ない場合は、ここにメンバー紹介を貼り付けるとソースに色が付く。
メンバー紹介の文字は7個あって、1個目に濃い色が付いていることを表している。
横の下向きの矢印をクリックすると2個目に濃い色が付く。
⑥　7個ある内のどれがタイトルになっているかを探す。
　　目当ては　<h1 class= ・・・・・>メンバー紹介</h1> です。
⑦　探していくと4つ目にこれが出てきます。

⑧　div class が　page-header と　page-header-inner と page-header-cotainer と　
　　page-header-title 　と4つあります。これをひとつひとつ確かめます。
⑨　先ず、page-header-title
　　ダッシュボード　→　外観　→　カスタマイズ　→　追加css　追加css画面の左端に
　　page-header-title 　を貼り付ける。　　　　

classを表す　.　を忘れないこと。
⑩　背景の色を変える。下のように打つ。
　　4 .page-header-title ｛
　　5 background-color:red;
6 }
メニューの　メンバー紹介　をクリックすると

この様になって、全体が赤にならないので、
page-header-title　はダメだと言うことが分かる。
　page-header-inner と page-header-cotainer についても同じ事が起こり
この3つは背景にならない。結局　page-header　と言うことになる。
⑩　page-header　でやってみる。　　　　　　　　　　　　　　

　　　7 .page-header｛　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
←　　8 background-color:red;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　 9 }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

となって、背景に色が入ったので、page-headerに背景写真を入れると良いことが分かる。
⑪　ここで、公開をクリックする。
B) 背景に写真を入れる。
①　追加css画面の左上の ×印をクリックし、ダッシュボード画面に戻る。
②　メディア → ライブラリー　で 1900px × 150px の画像を選ぶ。今回は　1900×600　を選ぶ。

③　右図の下の赤〇をクリックし上のアドレスをコピーする。　　　　　　　　　　　　　　④　外観　→　カスタマイズ→　追加css　でコピーしたものを　url　を付け加えて貼り付ける。
⑤　background-color:red;の所をbackground-image:url( )；と変え、(　)の中に貼り付けると、右のように背景が入った。　　　　　　　