MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【空 様】WordPressカスタマイズで改行幅だけ変えられません

はじめまして。
現在、有料のテーマを利用してHPを代理で作っています。
自由にカスタマイズしても良いというテーマなので、色々とカスタマイズをしながら作っているのですが、どうしても改行幅だけが変えられません。

行間は、コードを書き加えることで変えられたのですが、同じように改行幅も、コードを書き加えてみたところ、何故か改行幅だけが変わりませんでした。

他にも色々と試してみたのですが、どうしても改行幅だけを変えることができません。

お手上げ状態となってしまい、他の方から何か新しい意見がもらえたら、それがヒントとなり方法が見つかるかもしれないと質問させて頂きました。

よろしくお願いします。


>空 さま
ご相談ありがとうございます。

「行間」「改行幅」という表現がちょっと分かりませんが、通常「行間」はCSSのline-heightを指すでしょう。

どこをどう調整したいかについては、margin padding line-height について調べてみましょう。

pタグなどブロックレベル要素のタグは、タグを一つの箱と考えてみてください。

まず、その箱に borderを設定してみましょう。

borderの外側の余白をmargin、内側の余白をpaddingと考えます。(なのでpaddingにはbackgroundが適用される)

line-heightというのは、文字そのものの高さの事です。line-height:2;なら、1文字が2文字分の高さを持つと考えると良いでしょう。

あとは、CSSの優先順位についてです。

CSSはプログラムの上から実行され、同じ記述なら下にあるもの程優先されますが、クラス(.) やID(#)が付くと優先順位が変わってきます。(他、importantという指定もありますが、なるべく使わないのが吉です)

例えば貴サイトには .post p{} という記述があります。これはdiv class=”post” の中にあるpタグ に対する指定となりますが、同じ指定方法をすると後から読まれるCSSが優先されます。
これが「変えられない」原因となっているかもしれません。

これを打ち消し、別のCSSを読み込ませないなら、
1.後から読まれる位置に記述する
2.セレクタ指定を追加する
という方法があります。

2にも色々な方法があります。
a. クラスやIDを追加する
b. pタグにクラスを追加する
c. !importantを使う
などです。

【a】
例えば多くのWordPressテーマは記事コンテンツ部分をid=”content”で囲うものが多いです。
#content .post{} といった指定をすれば上書きできるでしょう。

【b】
カスタムしたい場所が任意の場所なら、p class=”hoge” と独自のクラスを設け、 .post p.hoge {} にすれば記事内の任意のpタグのみカスタムできます。

いずれも、WordPressのテーマカスタマイズ(特に子テーマカスタマイズ)においては大切な考え方です。

是非色々と調べてみてくださいね!
参考にして頂ければ幸いです。

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA