wordpress初心者の為のCSS編集講座〜PHPも関係するとか〜

CSSを編集してみよう〜wordpress初心者の為のCSS編集講座3〜

実は、前回の記事は中途半端に終わらせている。

CSSを編集してみよう〜wordpress初心者の為のCSS編集講座2〜
CSSを編集してみよう〜wordpress初心者の為のCSS編集講座2〜
wordpress初心者と言うか、そもそもこの手の物を触ったことも無いような人に向けて、CSSの編集で外観を変更する方法をレクチャーの2回目です。 とりあえずは、コピー&ペーストで実体験して見よう

なぜか?

一部のCSSの設定が反映されなかったんだよ!

記事を書きながら、自分のstyle.cssの内容を記載していたのだが、

プレビューを見ると、一部のCSSが反映されていない。

よくよく確認したら、以前に設定したサイドバーとフッターの設定が反映されていない事に気が付いたのだ。

スポンサーリンク



footer-insert.phpの存在

私は「Simplicity2 child」という「Simplicity2 」の子テーマを利用しているのだが、これが便利な反面、曲者だった。

というか、SEの人・・・システム関連の仕事をした事がある人なら、気がつけというようなミスをしていた。

このサイトに訪れてくれた人は見てると思うが、背景に動画を設定している。

モバイル(スマフォなど)の場合はデータ量の関係上、自動再生がされないので固定の背景に見えると思うが・・・

これ・・・「footer-insert.php」というファイルに「style」として動作を書き込んでいるのだ。

この設定の際に参考にしたサイトの情報を元に作った為、ここにサイドバーとフッター(画面の下の方)の表示設定も書き込まれていたのだ。

問題は読み込み順

問題となるのは外観などを含む「設定値」の読み込みには順序があるという事を、全く考慮せずにいた事だ。

まず、「Simplicity2 child」という子テーマを使っている時点で、では「親はあるの?」となるわけだが、それが「Simplicity2 」というテーマになる。

親テーマと子テーマの意味と関係性

まずは、ここからだ。

親テーマと子テーマという「テーマ」が2つになっているわけだが、なぜ、こんな事をしているかと言えば・・・

この関係性を分かり易く説明するならカッコだ。

大括弧と小括弧・・・こんな感じ。

{ AAA  (BBB ) AAA }

まず、大括弧のAAAが読み込まれ、次に小括弧のBBBが読み込まれる。

親テーマと子テーマの関係性では、親テーマに記載されて設定値がAAAになり、子テーマの設定がBBBになる。

その為、子テーマを利用している場合、まず親テーマの設定内容が読み込まれ、次に子テーマの設定が読み込まれる事になる。

そして、ここで問題点でありメリットとなるのは、wordpressに限らず「プログラム」というのは、特に断りが無い場合、順番に処理されていき「あと勝ち」つまり「後から処理された内容が優先される」のだ。

この場合、親テーマの設定内容よりも子テーマの設定内容が優先されるという事になる。

メリットして、子テーマの方は「全ての設定内容を保有する必要が無い」事にあるのだ。

つまり、親テーマの方でメインとなる設定内容を読み込んでいるので、子テーマでは「変更したい箇所」だけを読み込めば良いという事になり、大元の親テーマのアップデートなどがあっても子テーマには影響しないようになっている。

Simplicity2の特性

Simplicity2は、極力、ユーザー(利用者)の利便性を重視するように出来ていて、今回、私がつまづいた原因となる「footer-insert.php」も、本来であれば利便性の為に用意されたものだ。

「footer.php」というファイルを書き替えた際に、必要な設定値を削除したしまった場合など、最悪サイトが正常に表示されない事もあるのだが、「footer-insert.php」というファイルは、ファイル名の示す通りに「footer.php」に「設定を差し込む」動作をする。

この為、この「footer-insert.php」には、初期状態では殆ど何も記述されていない。

ここが曲者で、親テーマのCSS、header、header-insert、footer、footer-insertなどの諸々、子テーマのCSS、header、header-insert、footer、footer-insertなどの諸々のように順番に読み込まれ「あと勝ち」で適用されていく。

私がやってしまったのが、子テーマのCSSに外観の設定をしていたのに、footer-insertにも外観の設定値を記述してしまったのだ。

これが、footer-insertにも事細かに記述されていればマシだったのだが・・・

バックグラウンドカラーの透過くらいかしか記述しておらず、これが「最終的に外観設定を決めていた」事で、先日の記事を書いている際に「style.css」に記述しても反映されずにパニックに陥っていたのだ。

その後、落ち着いて考えたら・・・よく考えたら「あと勝ち」で設定値が変わる事に気がついえて・・・とりあえず「footer-insert.php」に設定内容を記述したら解決した次第だ。

このサイトのサイドバーとフッター

現時点では「footer-insert.php」に関して、読者の皆さんは変更していない前提で「style.css」に下記を記述すると、私のサイトの外観に近くなる。

/*******トップページ記事見出しh2********************************/

.entry h2 a{

font-weight: 700;

font-size: 24px;

line-height: 1.4;

}

/* サイドバーの見出しh3 **********************************/

#sidebar h3{

position: relative;

color: #FFF;

background-color: rgba(48,65,93,0.8);

line-height: 117%;

margin: 0 -25px 30px -25px;

padding: 20px 25px;

-webkit-box-shadow: 0 1px 3px #777;

box-shadow: 0 1px 3px #777;

}

#sidebar h3:after,

#sidebar h3:before{

content: “”;

position: absolute;

top: 100%;

height: 0;

width: 0;

border: 5px solid transparent;

border-top: 5px solid #663333;

}

#sidebar h3:before{

right: 0;

border-left: 5px solid #663333;

}

#sidebar h3:after{

left: 0;

border-right: 5px solid #663333;

}

/* フッター *********************************************/

#footer h3{

position: relative;

color: #FFF;

background-color: rgba(48,65,93,0.8);

line-height: 117%;

margin: 0 -25px 30px -25px;

padding: 20px 25px;

-webkit-box-shadow: 0 1px 3px #777;

box-shadow: 0 1px 3px #777;

}

#footer h3:after,

#footer h3:before{

content: “”;

position: absolute;

top: 100%;

height: 0;

width: 0;

border: 5px solid transparent;

border-top: 5px solid #663333;

}

#footer h3:before{

right: 0;

border-left: 5px solid #663333;

}

#footer h3:after{

left: 0;

border-right: 5px solid #663333;

}

/* 枠線 ************************************/

#main {

background: transparent;

border: none;

}

.single #main, .page #main {

border: 5px solid #031424;

border-radius: 0;

background: #FFF;

}

.home #main, .archive #main, .search #main {

padding: 0 !important;

}

なお、前回、説明が漏れてしまったが・・・

/*    */

この「/*」と「*/」の間にある内容は「コメント」として無視される。

これは改行をいれても同じなので、下記のようにすると、トップページのh2タグに関する設定に関して、ここに記載された内容は無視される。

/*******トップページ記事見出しh2********************************/

/*.entry h2 a{

font-weight: 700;

font-size: 24px;

line-height: 1.4;

}*/

これを利用して、複数の設定を試してみるのも良い。

/*******トップページ記事見出しh2********************************/

.entry h2 a{

/*font-weight: 700;  元の設定をコメントアウト*/

font-weight: 900;  /*900で試しで試す*/

font-size: 24px;

line-height: 1.4;

}

こうしておけば、元の値を残したままで色々と変更を試す事が可能だ。

今回は、ここまでかな。

壁紙の動画は、色々と面倒なので、またの機会になります。

まだデータがありません。