CSSで編集できない部分があって困っている場合。

WordPressでテーマの編集をする歳、
ブログの「見た目」はスタイルシートで
(位置や幅、margin,paddingなど)
変更するのが普通ですが、
WP初心者にはなかなか難しいのが

「どこを変更すればどこに反映されるのか」

ということの理解。

そこで今回は、
「コード編集に少し慣れてきて
だいたいのことは解ってきたのに、
cssの変更を加えたい部分の
ソースが見つからない!」
という問題について。

 

phpで指定する

「見た目はstyle.cssで」という先入観があった僕は
これを理解するまでに時間がかかりました。笑

例えば位置を微調節したいとき(marginの調節)、
スタイルシートであれば、

#head {
 margin: 0 auto;
 width: 980px;
 }

のようにある程度決まっている形に
少し手を加えればいいのですが、

それに対して
変更を加えたい部分のソース自体が見つからない場合、
それぞれのphpで直接指定します。

ホーム画面であればindex.php、
記事の部分はsingle.phpなど、
(テーマによって名前は少し違いますが)

ここで配置している

<div>~~~~~
~~~~~~~

のような部分に、

<div style=" height: 205px; margin-top: 5px;">~~~~~
~~~~~~~

と書き加えることで編集ができます。
書き方は近くにあるそれらしい文を真似ます。

 

まとめ

コードの書き方はいくつかパターンがあります。
例えば上記のように直接指定したり、
<div class=”○○○”>でクラス名をつけて
style.cssの適当な場所に

.○○○ {
margin~~~~~~
~~~~~~~~~~~
}

と書き加えても同じです。

書き方も正解は一つじゃないことが多いので、
(一つの場合もあります。笑)
近くにあるコードを真似て
自分で書き加えてみて反映されるか試す

といった作業を繰り返していくうちに
理解も深まっていくものです。

それに理解できたとき
すごく達成感があります(・ω・)笑

 

ということで今回は
マイナーな問題だとは思いますが
cssの編集したい部分のソースが見つからない場合
の対処法でした(´-ω-`)ペコ