[ 解決済 ] リストボックスにエックスサーバーのWEBフォントが適用されない
[ 解決済 ] リストボックスにエックスサーバーのWEBフォントが適用されない
- このトピックには11件の返信、3人の参加者があり、最後に
により2週、 6日前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.9.4■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
X-T9■ テーマのバージョン
1.37.4■ プラグインの種類・バージョン
プラグイン名：TypeSquare Webfonts for エックスサーバー（バージョン 2.0.9）■ 期待する動作
エックスサーバー株式会社が提供するWebフォント（モリサワフォント）を利用できるプラグイン導入したのですが、各所フォントが設定されたどおりに字体が変わったのですが、リストボックスの所は何も変更されません。何か方法がありますか？■ 自分で試した事
以前のフォーラムにおいて（2017年9月11日/最終更新日 : 2018年10月30日）、
『エックスサーバー / さくらサーバーのWebフォントを利用する』に解決策があり、そのとおり、
CSSに追加してあります。■ 症状が発生するブラウザ
Microsoft Edge■ 実際の症状
リストボックスにWebフォントが適用されない。SUGI 様
恐れ入りますが、「リストボックス」というのが何を指すのか分かりかねますので、該当ブロックのスクリーンショットを添付いただいてもよろしいでしょうか。
また、本件、プラグイン起因の問題とも考えられますので、エックスサーバー様にお問い合わせいただくこともあわせてご検討くださいませ。
よろしくお願いいたします。
質問内容からすると、記述した CSS よりも詳細度が高い CSS がどこかに記述されているような気がします。
SUGI 様
1点確認です。
エックスサーバー / さくらサーバーのWebフォントを利用する | Vektor Web Solutions
以下の内容をご確認いただき、対象ブロックの箇所を特定してCSS設定することは可能でしょうか？
フォントを変更する対象をどうやって指定するかは、下記の記事なども参照してみてください。
http://www.vektor-inc.co.jp/wordpress-tech/css_customize/Y.INABA 様のご質問についてお答えいたします。
私の表現がややこしくて申し訳ありません、リストボックスとは固定ページでプラスの記号をクリックすると
ブロック・パターン・メディアなどのパーツ類が表示されますが、その中のブロックの中にある『リスト』のことを
さしています。CSSですが、カスタムCSSで該当のセレクタに font-family で指定した場合、Xサーバーのプラグイン内でフォントの
設定変更をしたときは、リストの箇所のカスタムCSSも全て入力変更しなければならないことになるので、追加CSSで
リスト全体に指定した方が良いとは思うのですが、数年経つと、ある箇所のフォントをCSSで指定したことを忘れそう
なので、例えばフォントを指定するCSSの他に何かないのか？ と思っておりました。SUGI 様
ご教示ありがとうございます。
リストボックスとは固定ページでプラスの記号をクリックすると
ブロック・パターン・メディアなどのパーツ類が表示されますが、その中のブロックの中にある『リスト』のことを
さしています。通常の「リスト」ブロックですね。
リストブロック – サポートフォーラム – WordPress.org 日本語その場合、 ul タグ（順序なしリスト） もしくは ol タグ（順序付きリスト）、またその中の liタグ（項目を記述する要素） が該当しますので、
カスタマイザー＞追加CSSに以下付け加えてみてください。（フォント名は例です）.wp-site-blocks ul, .wp-site-blocks ol, .wp-site-blocks li, { font-family:"新ゴ B"; }上記が効かない場合は、
font-family:"新ゴ B" !important;と、フォント名の横に!importantの記載を追加してみてください。※既にご確認いただいていると思いますが、X-T9には
.containerや#contentは存在しません。
その代わり、フルサイト編集に特有の.wp-site-blocksクラス が自動で付与されますので、そちらをご利用ください。
（添付もご確認ください。X-T9無料版デモサイトを、デベロッパーツール付で表示させたものになります）——
CSSですが、カスタムCSSで該当のセレクタに font-family で指定した場合、Xサーバーのプラグイン内でフォントの
設定変更をしたときは、リストの箇所のカスタムCSSも全て入力変更しなければならないことになるので、追加CSSで
リスト全体に指定した方が良いとは思うのですが、数年経つと、ある箇所のフォントをCSSで指定したことを忘れそう
なので、例えばフォントを指定するCSSの他に何かないのか？ と思っておりました。単純に、HTMLソースやデベロッパーツールを確認する習慣を身につけていただければ、有効なコードは導くことができるかと思います。
今一度以下の記事をご確認くださいませ。
例えばフォントを指定するCSSの他に何かないのか？
Google フォントしか使えませんが、CSS を書かずにフォントを指定するやり方があります。
ベクトルの石川さんの記事が参考になります。
ダッシュボードで、外観 → エディター → スタイル → ブロック で
特定のブロック（例：リストブロック）のスタイルをサイト全体で指定できます。ブロックエディターのスタイル設定で、タイポグラフィにフォントを追加して
個々のブロックのフォント指定もできます。（添付画像参照）SUGI 様
上記CSSに誤記がありましたので、こちらをお使いください。
お手数をおかけいたします。.wp-site-blocks ul, .wp-site-blocks ol, .wp-site-blocks li { font-family:"新ゴ B"; }上記が効かない場合は、
font-family:"新ゴ B" !important;と、フォント名の横に!importantの記載を追加してみてください。また、対馬様が紹介いただいている方法についてですが、
Google フォントしか使えませんが
とご本人がおっしゃっているとおり、少なくとも「TypeSquare Webfonts for エックスサーバー」では使うことができません。
あらかじめご認識いただけますと幸いです。Y.INABA 様
ありがとうございました、ご助言のとおりに追加CSSによる設定をし、無事、Xサーバー提供のフォントをリストに使うことが出来ました。心から感謝申し上げます。シンプルなCSSの記述だったのも嬉しく思っております。
この間、対馬俊彦 様にもご協力いただき、ありがとうございました。残念ながら、リンクを挿入するとフォントが元の字体（デフォルトのフォント）に戻ることが分かりました。解消方法として正しいのか、偶然なのか不明ですが、
ブロックのカスタムCSSに下記を入力します。
.wp-site-blocks ul,
.wp-site-blocks ol,
.wp-site-blocks li
{ font-family:”新ゴ B” !important; }次に該当箇所のリンク有のテキストを左クリックし、リンクを編集を左クリック（選択）し、リンクの編集において追加CSSクラスに下記を入力します。
.wp-site-blocks ul,
.wp-site-blocks ol,
.wp-site-blocks li
{ font-family:”新ゴ B” !important; }その後、該当箇所のリンク有りのテキストを左クリックし、太字を適用させます。編集する画面での見た目は太文字となりますが、アップロードをしてページを見てみると、また、元に戻りXサーバーの提供フォントで表示されました。
面倒な作業となりますので、本当に良いか疑問がありますが、他の解消方法の情報があれば、どなたでも結構ですので、ご教授願いたいと思います。SUGI 様
リンクタグはaで問題ないかと思います。
すなわち、.wp-site-blocks li a { font-family:”新ゴ B” !important; }で問題ないかと思います。
—–
また、上の繰り返しになりますが、以下のページをご覧いただけますでしょうか？
同様の質問の繰り返しとなってしまうことを防ぐためにも、是非ともご習得のほどお願いいたします。
—–
また、やはりエックスサーバー様のプラグインの設定・調整がうまくいっていないようなので、恐れ入りますが今一度エックスサーバー様にもお問い合わせのほどよろしくお願いいたします。
追加CSSでできることにも限度があると思いますので……。
- このトピックに返信するにはログインが必要です。
