SUGI
フォーラムへの返信
-
投稿
-
対馬 俊彦 様
ご解答ありがとうございます。３つのCSSによって今までの質問事項だったものが全て思い通りに出来るようになりました。尊敬の念を抱くとともに、心より感謝申し上げます。
なお、WindowsとIOSでは円形の横幅が変わってしまうので、同じものを２つ作り、一つは大きな画面で表示、もう一つは小さな画面で表示させるようにし、PCとスマホの両方で真円で見えるようにしました。ステップブロックの中の記事はパターンで作成して挿入しましたので、記事の修正はパターンを１回修正するのみなので手間は掛からないようしましたが、それでも少し残念でした。
ただ、今回のCSSは素晴らしく、他の方の参考になれば良いと思っております。
対馬 俊彦 様
先の投稿で足りない部分がありましたので大変失礼致しました。
確かに全体の（STEPと番号を合わせた文字では）paddingにより、上下の位置は変わりましたので、そこは訂正させていただきます、大変申し訳ありませんでした。私の方で申し上げたかったのが、上の文字だけ上下移動・下の文字だけ上下移動したいという意味です。説明不足でお詫び申し上げます。対馬 俊彦 様
ご返答ありがとうございます。
円形の大きさの変え方を教えていただき、今後、活用させていただきます。ただ、今回の質問である文字の位置と文字の大きさは、PCのMicrosoft Edgeやスマホのsafariの表示には変化がありませんでした、円の大きさが変化したのみです。この他に何か情報があれば、ご教授下されば有難いです。Y.INABA 様
ご返答とともにブロックへのCSS追記内容をご教授いただきありがとうございます。
困ったことにブロックにCSSを追加しても、また、そのremの値を変えても、PCのMicrosoft Edgeやスマホのsafariの表示には全く変化がありません。
念の為、外観のエディタのスタイルのCSSに追記してみたのですが、この場合もPC・スマホの両方とも表示に変化が見られないです。何か私の操作でいけないところがあるのでしょうか？Y.INABA 様
ご回答ありがとうございます。
私の説明が足りず、お手間を取らせて申し訳ありません。本文の方ではなく、円形の中の”STEP”と”番号”になります。
私の方でもスクリーンショットをアップしますが、文字の位置だけではなく、
文字の大きさも何とかならいかな～と思っております。無事、出来ました、ありがとうございました。!importantは、一度、教わっていたのですが、ついつい以前のフォーラムを鵜呑みにしてしまいました。今後は忘れずに対処しようと思います。ありがとうございました。
Y.INABA 様
遅くまでありがとうございました。
国の機関のサイトなので、外部委託だと思いますし、いろいろ駆使され作成されたものなのでしょう。これで諦めがつきました、気分も晴れました、本当にありがとうございました。
Y.INABA 様
ご親切にどうもありがとうございます。
一つ目の確認についてですが、こちらに別回線はないので、Wifiから4Gに切り替えてiphoneとipadで確かめたのですが、今までと変わらず、私のサイトはヘッダーが少し下に動き、海上保安庁のサイトは固定されていました。
二つ目の確認についてですが、iphoneとipadともにiOS26.4.2で最新バージョンでした。
三つ目の確認についてですが、WordPressをログアウトしてからMicrosoft EdgeとGoogle Chromeの両方で確かめたのですが、画面を狭めた状態でマウスを上下に早めにスクロールした場合、私のサイトも海上保安庁のサイトはヘッダーは固定されたままでした。
四つ目についてですが、iphoneの画面をスクリーンショットした画像です。先でご覧いただいたパターンライブラリからの「ヘッダー_お問い合わせ_スクロール時に追従」の画面です。これは親指を上から下へスワイプし、ヘッダーに行き着いたところの箇所になりますが、そのヘッダーが画面の１／３ぐらいまで下がった状態で撮ったものです。
他に気になる事があれば、何なりとおっしゃってください。
Y.INABA 様
私のテストページをご覧いただき、本当にありがとうございます。
Y.INABA 様の iPhoneのSafariではヘッダーがぶれていなかったのですね。そうすると私のSafariに問題があるか、それにしても海上保安庁のホームページのヘッダーは全くぶれずにヘッダー固定されているのを見ると、自分のサイトに問題があるとも思いますし、ますます不明に陥ります。
Y.INABA 様からの確認の件ですが、Safariに広告をブロックする類の拡張機能は入っていませんでした。また、Chromeでは（一番上にURLが表示される為、少しぶれますが）ヘッダーは固定されていました。
Y.INABA 様
またまた、ありがとうございます。
返信#121528では、私が全文を読まず、CSS追加だけで済むと思った勘違いです、お手間を取らせて申し訳ありませんでした。ただ、２と３を追加しても結果は変わらずでした。
返信#121562で、Y.INABA様が「ヘッダー_お問い合わせ_スクロール時に追従」で私の意図通りになりそうな挙動の確認が出来てらっしゃることが不思議です。ひょっとしたら、私の iphone でそのような現象なのでしょうか？テストとして使っているページをお教え致します。WordPressアンインストール後なので中身のないサイトなのですが、一応、ウイルスチェックをしてご覧いただければ幸いです。
Y.INABA 様
ご回答ありがとうございます。
確認事項の [解決済] ヘッダーとグローバルメニューの固定については、CSSを追加することは試してみましたが、変化はありませんでした。
パターンライブラリから「ヘッダー_お問い合わせ_スクロール時に追従」については、WordPressをアンインストール後、X-T9テーマをインストールしてから上記パターンを貼り付けたのですが、こちらも思っていたとおりの結果はでませんでした。
固定表示については、元々フルサイトインストーラーから、X-T9 ビジネス版を加工していたのですが、そのヘッダー部分を固定表示にしてみたのですが、こちらも変化ありませんでした。
私自身も情報を集めてみますが、他のご教授もございましたら宜しくお願い申し上げます。
残念ながら、リンクを挿入するとフォントが元の字体（デフォルトのフォント）に戻ることが分かりました。解消方法として正しいのか、偶然なのか不明ですが、
ブロックのカスタム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サーバーの提供フォントで表示されました。
面倒な作業となりますので、本当に良いか疑問がありますが、他の解消方法の情報があれば、どなたでも結構ですので、ご教授願いたいと思います。Y.INABA 様
ありがとうございました、ご助言のとおりに追加CSSによる設定をし、無事、Xサーバー提供のフォントをリストに使うことが出来ました。心から感謝申し上げます。シンプルなCSSの記述だったのも嬉しく思っております。
この間、対馬俊彦 様にもご協力いただき、ありがとうございました。Y.INABA 様のご質問についてお答えいたします。
私の表現がややこしくて申し訳ありません、リストボックスとは固定ページでプラスの記号をクリックすると
ブロック・パターン・メディアなどのパーツ類が表示されますが、その中のブロックの中にある『リスト』のことを
さしています。CSSですが、カスタムCSSで該当のセレクタに font-family で指定した場合、Xサーバーのプラグイン内でフォントの
設定変更をしたときは、リストの箇所のカスタムCSSも全て入力変更しなければならないことになるので、追加CSSで
リスト全体に指定した方が良いとは思うのですが、数年経つと、ある箇所のフォントをCSSで指定したことを忘れそう
なので、例えばフォントを指定するCSSの他に何かないのか？ と思っておりました。
