WORDPRESS カテゴリ一覧表示した際の文字サイズの変更

Question

お世話になります。

カテゴリを選択した際のタイトルの大きさを変更したいです。

ためしたこと

F12をおして、VIVMUS　の部分を選択したのですが、

画像全体が選択されてしまい、フォント変更する事ができませんでした。

F12の中のCSSもみてみましたが、フォントがかいておらずレイアウト指定のようなものでした。

.vw-post-box--slide-1 .vw-post-box__link {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

やりたいこと

VIVMUS　の　文字サイズの変更ができるCSSコードをご教示ください。

お手数おかけいたしますが宜しくお願い致します。

Comments

[m.ts10806]

細かいですが赤いライン部分は「VIVA　MUS　DOLOR」のところを指していないような。

[m.ts10806]

該当部分とその周辺のhtml提示は可能でしょうか。
なんとなくですがデベロッパーツールでもきちんとその部分を選択できていないようにも思います。
デフォルトのサイズでない以上はどこかでサイズ指定があるはずです。

[koikogarey]

htmlは以下です。
<a class="vw-post-box__link" href="http://xxx.xx.j/vivamus-dolor-sapien-suscipit-ut-accumsan-sit/" itemprop="url" tabindex="0"></a>

正しく選択できていないですね。該当文字を選択しても、画像全体が選択されていまう状況です。

＞デフォルトのサイズでない以上はどこかでサイズ指定があるはずです。

デフォルトかどうかはわかりませんし、F12上でサイズ指定がないので質問しています。

[Sohaya]

お差し支えがなければ　該当カテゴリのURLをご提示ください。

[koikogarey]

Sohayaさん
ご連絡頂きましてありがとうございます。以下該当URLになります。ご査収ください。
http://asdfa21.ciao.jp/category/category-2/

[Sohaya]

F12キーで開発ツールを起動して　膨大な量のHTMLコードから見当をつけるのは
正確性に欠けるのでお勧めできません。

Chromeブラウザ上で修正したい要素の上で右クリックして
コンテキストメニュー下方にある「検証(I)」
（Firefoxはメニュー中ほどの「要素を調査(Q)」）を選ぶと
自動的に開発ツールが起動して　HTMLコードがスクロールし
右クリックした要素周辺を自動的に選択してくれるので
dfjileさんの作業時間がかなり短縮されます。
もうお試しになってますか。

[koikogarey]

ご連絡ありがとうございます。まだ試していない方法でした。自分なりに教えて頂いた方法で試してみたいと思います。取り急ぎ御礼まで申し上げます。

[koikogarey]

検証を押して調査してみましたが、私が質問に記載した方法と差異ありませんでした。試しに以下のようにフォントを指定してみましたが、反映されることはありませんでした。

.vw-post-box--slide-1 .vw-post-box__link {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
font-size: 26px;
}

[Sohaya]

正しいセレクタを探し直すために「検証(I)」「要素を調査(Q)」を再度ご案内したのですが
なぜ「.vw-post-box--slide-1 .vw-post-box__link」にこだわり続けるのかがよくわかりません。

「font-関連のスタイル指定が一つもない」ことは既に確認済みですので
＝このセレクタではない、別のセレクタを探す、ということです。

[koikogarey]

こだわっているつもりはありません。わからないので、このコードかなと仮定して調査をしていました。別のセレクタを探してみましたが以下が怪しいのかなと思いフォントサイズを変更しましたが反映されませんでした。768pxになっているのでpcではない気がしています。
@media (min-width: 768px)
.vw-post-box--slide-1 .vw-post-box__inner {
padding: 30px 60px;
font-size: 17px;
}

[Sohaya]

https://teratail.com/questions/165509#reply-247223
上記の件で「Page Ruler」が邪魔をしてセレクタを正しくポイントできなかったこと
ご記憶に新しいと思います。似たようなことが起こっているとお考えください。

タイトル写真（親要素）の全領域に
親要素と同じサイズいっぱいに広がったa要素（子要素）があるため
写真全体をリンクにしてクリックできるようになってる代わりに
他の子要素がポイントできなくなってるんです。

親要素が「div.vw-post-box--slide-1」、
子要素が「a.vw-post-box__link」です。

この子要素には「position: absolute;」と「z-index: 1;」が設定されています。

同じ親要素内で子要素同士が重なり合うことは “本来” ありませんが
「position: absolute;」を設定することで重ねることができるようになります。

「z-index: 1;」は重なる際の上下関係です。
基準は親要素と同じ、もしくはゼロで、大きいほど上に、小さいほど下になります。
つまり（他の子要素にz-indexが指定されていない限り）
「a.vw-post-box__link」が一番上にあるということになります。
※開発ツール上で「z-index」の値を「-9999」とかにしてやると　
　上下関係が入れ変わって右クリックで「検証(I)」した結果が変わります。

他の子要素は「a.vw-post-box__link」より上の行に記述されている
「div.vw-post-box__inner」だけです。
※下行にあるタグはすべてメタタグ（直接レイアウトに影響しない）なので割愛。

この「div.vw-post-box__inner」の中にお探しのタイトルタグ（h3）があります。

開発ツールで見るHTMLコードで行頭に▶の付いている行は折りたたまれていますので
▶をクリックしてHTMLコードを展開して詳細を確認してください。

他のものが重なってて直接触れなかったり、折りたたまれていて見えなかったり
いろいろありますので、見つけ出すのに少しずつ慣れていってください。

[koikogarey]

とても丁寧な回答ありがとうございました。了解しました。Sohayaさんの教えて頂いた方法で調べてみます。h3までの到達方法を自分で一回なぞってみます。

[yoshinavi]

Googleのデベロッパーツールでみると、フォントサイズはPC対応で42px、スマホ等で28pxになっていますが、この数値を変えたいとの理解で良いのでしょうか？

[koikogarey]

画像内の　VIVAMUSDOLOR　SAPIEN　SUSCIPITUT　ACCUMSANSIT　の文字の大きさを変更したいです。

[yoshinavi]

Googleのデベロッパーツールで該当箇所をクリックすれば、「momosiri」さんの回答どおり、どこのセレクタで変更すれば良いかまで出てくるので、任意の数値で試されると良いかと思います。

[koikogarey]

yashinaviさん　丁寧なアドバイスを頂きありがとうございます。自分でもう一度探ってみてmomosiriさんのご回答を参考にしたいと思います。回答ありがとうございます。

Answer 1

ソースを見てみると.vw-post-box__titleというセレクタで指定されているようですね

なので一番上の部分（赤線の部分）を変えるなら

.vw-post-box__title {
font-size: 50px!important;
}

で変更できると思います。（５０ピクセルと極端にしてますので適宜調整してくださいね）

Comments

[koikogarey]

返信頂きありがとうございました。自分でmomosiriさんが教えて頂いた内容まで到達できるよう含めてまずチェックしてみます。別途またご連絡いたしますがまずは御礼申し上げます。猫かわいいですね♪

[momosiri]

我が家の愛猫【モモ　♂　２歳】です。関係ない話ですみません

[koikogarey]

モモちゃん可愛いです。