[ 解決済 ] VKBLOCKSのスタッフブロックのフォントについて
VWSとは › フォーラム › VK Blocks・Pro › [ 解決済 ] VKBLOCKSのスタッフブロックのフォントについて
[ 解決済 ] VKBLOCKSのスタッフブロックのフォントについて
-
投稿者投稿
-
2021年3月17日 4:27 PM #49580
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 P明朝”,”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 P明朝”,”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 P明朝”,”MS PMincho”,”ヒラギノ明朝 Pro W3″,”Hiragino Mincho Pro”,”serif”;
line-height: 1.6em;
}.vk_staff_text_profileTitle {
font-size: 18px;
font-family: “MS P明朝”,”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.2021年3月17日 10:52 PM #49601
うなこモデレーター以下の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フォント設定と同様の設定とすることは可能なのでしょうか?
確かに、ここだけ明朝体になってしまうのはちょっと違和感がありますね、、。
議題にあげさせていただきます、ありがとうございます。2021年3月18日 7:53 AM #49602
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を学ぶにあたり、何から手を付けるべきか?
と、悩み中です。お手間をお返して恐縮ですが、お時間のある時にでも返信いただければありがたいです。
以上よろしくお願い致します。
2021年3月18日 9:47 AM #49608横から失礼いたします。
これからCSSを学ぶにあたり、何から手を付けるべきか?
以下のページがおすすめです。
このページを読んで、わからないことがあったらまたフォーラムで質問すればいいと思います。何が違うのかご教示いただけると幸いです。
上記のページの「3.4. CSSの指定の強さ」をご覧ください。
2021年3月18日 3:37 PM #49619
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の指定の強さこのあたりの項の理解不足、そもそも予備知識が無さすぎるとは思いますので、
もっと理解を深めるために勉強しないとダメだと感じました。ご指導ありがとうございます。
2021年3月18日 4:17 PM #49622.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年、 7ヶ月前に対馬 俊彦が編集しました。
Attachments:
You must be logged in to view attached files.2021年3月18日 5:12 PM #49627
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に関しても知識が必要だという事がわかりました。
>もしかしたら、原因がタイプミスだったのかもしれません。
とてもお恥ずかしい話です。
自分も後で試してみます。本当にありがとうございました。
-
投稿者投稿
- このトピックに返信するにはログインが必要です。