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

VWSとは フォーラム VK Blocks・Pro [ 解決済 ] VKBLOCKSのスタッフブロックのフォントについて

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

  • このトピックには6件の返信、3人の参加者があり、最後にimanabuにより3年、 7ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #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.
    #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フォント設定と同様の設定とすることは可能なのでしょうか?
    確かに、ここだけ明朝体になってしまうのはちょっと違和感がありますね、、。
    議題にあげさせていただきます、ありがとうございます。

    #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を学ぶにあたり、何から手を付けるべきか?
    と、悩み中です。

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

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

    #49608

    横から失礼いたします。

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

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

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

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

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

    #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の指定の強さ

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

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

    #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.
    #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に関しても知識が必要だという事がわかりました。

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

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

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

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。