PHPで組まれたword pressは、ヘッダーやサイドバー、コンテンツにフッターと
それぞれ独立している仕組みになっているため、１つの箇所を変更すると全ての
ページが変更されてしまう。
【備忘録】
①cssにてセレクタを下記のようにする。
#main-contents h2.special {
font-size: 1.4em;
}
これは固定ページを複製したpage-index.phpというページ(私はこれをトップページに指定している)の
main-contentsの中の【h2】の文字の大きさを指定している。
画像を背景指定して、テキストを飛ばして画像で作成したい場合や、main-contentsのh2の他ファイルの
指定は残したまま、単純に<h2><img src=”” alt=””></h2>左記のように画像を入れる場合等に利用する。
————————————————————
`<h2 class=”img-header”><img src=”～”></h2>`
————————————————————
その上で、下記のようなCSSを追加すると、
初期設定のh2のスタイルに影響されず、
画像を追加することが可能です。
————————————————————
`#main-contents h2.img-header{
padding: 0;
width: 630px;
background: none;
border-bottom: none;
font-size: 1.3em;
font-weight: bold;
color: #333;
}`
ポイントは 【#main-contents h2.img-header】
・#はIDセレクタであり、ページでは一度しか使わない。
・html側では【#】＝id、【.sample】＝classとなる。
※例
<div id=”main-contents”>
<h2 class=”img-header”><img src=”～”></h2>
</div>
・上記の記述を訳すと#main-contentsの中の(<div id=”main-contents”>この間</div>)
<h2>でclassをimg-headerに指定すると、例えばAのファイル内のmain-contents内の
h2を【.img-header】の指定に変更することが出来る。