[ 解決済 ] VKBLOCKSのスタッフブロックのフォントについて

[imanabu]

■ 利用テーマとバージョン :OriginⅡ(Bootstrap4)

■ 質問内容：
お世話になります。

3月1日にLightning Pro、Lightning Skin Paleを購入させていただき、
四苦八苦しながらのサイト作成している初心者となりますが、ご教示頂ければ幸いです。

現在、会社向けのサイトを作成していますが、スタッフのページで躓いております。

VKBLOCKSのスタッフブロックを使用して作成はできますが、
名前、ふりがな、役職、プロフィールのフォントが明朝で表示されます。

参考記事や過去の問い合わせを確認させていただきましたが、
有益な回答は見受けられませんでしたので、ご教示いただきたく存じます。

フォーラムを参考にさせていただき、Google Chromeで調べたところ、

.vk_staff_text_name {
text-align: left;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 2.5rem;
　　font-family: “ＭＳ Ｐ明朝”,”MS PMincho”,”ヒラギノ明朝 Pro W3″,”Hiragino Mincho Pro”,”serif”;
line-height: 1;
margin-bottom: 0.5rem;
border: none;
padding: 0;
background-color: transparent;
display: inline;
}

.vk_staff_text_caption {
font-size: 14px;
　　font-family: “ＭＳ Ｐ明朝”,”MS PMincho”,”ヒラギノ明朝 Pro W3″,”Hiragino Mincho Pro”,”serif”;
display: block;
margin: 0 0 0.5rem 4px;
letter-spacing: 5px;
}

.vk_staff_text_role {
font-size: 14px;
　　font-family: “ＭＳ Ｐ明朝”,”MS PMincho”,”ヒラギノ明朝 Pro W3″,”Hiragino Mincho Pro”,”serif”;
line-height: 1.6em;
}

.vk_staff_text_profileTitle {
font-size: 18px;
　　font-family: “ＭＳ Ｐ明朝”,”MS PMincho”,”ヒラギノ明朝 Pro W3″,”Hiragino Mincho Pro”,”serif”;
padding-top: 0;
padding-left: 0;
padding-bottom: 2px;
margin-bottom: 1.2rem;
border-top: none;
border-bottom: 1px solid #ccc;
background: none;
}

となっておりました。

本文と同じ、もしくは、カスタマイザーのLightningフォント設定と同様の設定とすることは可能なのでしょうか？
（現在、本文テキストは「指定なし」と設定しています。）

もしくはこれらをCSSとして設定するにはどのようにすれば可能なのでしょうか？
font-family: “メイリオ”,Meiryo,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,Hiragino Sans,”Noto Sans JP”,sans-serif;
として、使用することは可能なのでしょうか？

追加CSS等に上記font-familyを設定しても反映されませんでした。
また、 !importantなどを付記してみましたがダメでした。

現在の環境は下記のとおりです。

Lightning Pro バージョン: 8.9.0
Lightning Pro Child 利用
VK Blocks Pro バージョン 1.0.14
デザインスキンは「OriginⅡ(Bootstrap4)」を使用しています。

OS Windws10（19042.867）
ブラウザ Google Chrome

どのように設定すればよいか？ご教示いただければ幸いです。

Attachments:

You must be logged in to view attached files.

[うなこ]

以下のCSSを追加CSSなどに追加していただき、お好きなフォントファミリー名を○○の中に入れてください。
font-family:unset; とすると、リセットします。

.vk_staff .vk_staff_text .vk_staff_text_name,
.vk_staff .vk_staff_text .vk_staff_text_caption,
.vk_staff .vk_staff_text .vk_staff_text_role,
.vk_staff .vk_staff_text .vk_staff_text_profileTitle{
font-family:○○○;
}

> カスタマイザーのLightningフォント設定と同様の設定とすることは可能なのでしょうか？
確かに、ここだけ明朝体になってしまうのはちょっと違和感がありますね、、。
議題にあげさせていただきます、ありがとうございます。

[imanabu]

うなこ様
ご返信ありがとうございます。

指定のとおり追加CSSに記述し、反映されました。
ありがとうございます。

このように指定しても反映されなかった。

.vk_staff_text_name{
font-family:○○○;
}

.vk_staff .vk_staff_text を追加することで反映された。

.vk_staff .vk_staff_text .vk_staff_text_name{
font-family:○○○;
}

今後の勉強のためにお伺いしたいのですが、
何が違うのかご教示いただけると幸いです。

もっと構造的な理解が必要なのかもしれませんが、
これからCSSを学ぶにあたり、何から手を付けるべきか？
と、悩み中です。

お手間をお返して恐縮ですが、お時間のある時にでも返信いただければありがたいです。

以上よろしくお願い致します。

[対馬 俊彦]

横から失礼いたします。

これからCSSを学ぶにあたり、何から手を付けるべきか？

以下のページがおすすめです。
このページを読んで、わからないことがあったらまたフォーラムで質問すればいいと思います。

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

何が違うのかご教示いただけると幸いです。

上記のページの「3.4. CSSの指定の強さ」をご覧ください。

[imanabu]

対馬様
ご返信ありがとうございます。

「できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説」

ここも目を通したんですけど、まだ自分のものになっていません。

ここの記事　「2.1. CSSがどうしても効かない場合」を読んで、

.vk_staff_text_name{
font-family:○○○ !important;
}」

と指定もしたんですが反映されず、質問に至りました。汗

うなこ様に回答いただき、言われたとおりの設置で反映はされましたが、なぜ？となっています。
そして、自分のやりたい事、やった事が「3.4. CSSの指定の強さ」を見ても理解できていません。

Chromeの検証モードで当該ブロックをみても、

<div class=”wp-block-vk-blocks-staff vk_staff vk_staff-layout-default”><div class=”vk_staff_text”><h3 class=”vk_staff_text_name”～

となっており、なぜ、

.vk_staff
.vk_staff_text

を指定しなければならないのか？（⇒そういうものだ！）

.vk_staff_text_name{
font-family:○○○;
}
　　　　↓

.vk_staff .vk_staff_text .vk_staff_text_name{
font-family:○○○;
}

3.3. 階層のあるCSSの指定
3.4. CSSの指定の強さ

このあたりの項の理解不足、そもそも予備知識が無さすぎるとは思いますので、
もっと理解を深めるために勉強しないとダメだと感じました。

ご指導ありがとうございます。

[対馬 俊彦]

.vk_staff .vk_staff_text .vk_staff_text_name は

クラス vk_staff の中の
　⇒ クラス vk_staff_text の中の
　　⇒ クラス vk_staff_text_name

という意味です。添付画像をご参照ください。

これに対し .vk_staff_text_name はクラス vk_staff_text_name であれば、
どこにあってもよいことになります。

3.3. 階層のあるCSSの指定
3.4. CSSの指定の強さ

住所に例えると、
「中央区」よりも、以下のより明確・具体的な指定の方が優先されるというイメージです。

「東京都」⇒「中央区」
「北海道」⇒「札幌市」⇒「中央区」
「新潟県」⇒「新潟市」⇒「中央区」

.vk_staff_text_name{
font-family:○○○ !important;
}

いま試したところ、この指定で反映されています。
もしかしたら、原因がタイプミスだったのかもしれません。

• この返信は3年、 1ヶ月前に対馬 俊彦が編集しました。

Attachments:

You must be logged in to view attached files.

[imanabu]

対馬様
お忙しい中、ご返信ありがとうございます。

デベロッパーツールにて

<div class=”wp-block-vk-blocks-staff vk_staff vk_staff-layout-default”><div class=”vk_staff_text”><h3 class=”vk_staff_text_name”～

クラス vk_staff などをパッと判断できるほどではないですが、
わかりやすい説明のおかげで、構造的に理解することができました。

CSS以外にももっとHTMLに関しても知識が必要だという事がわかりました。

＞もしかしたら、原因がタイプミスだったのかもしれません。

とてもお恥ずかしい話です。
自分も後で試してみます。

本当にありがとうございました。

[投稿者]

投稿