ヘッダーの文字サイズ変更に関して
初めて投稿させて頂いております。
現在、他社のHPの作り替えの為に無料版のNishikiProを使用して、デザイン等の作成をしております。
その中でヘッダーの文字サイズのみ変更したいのですが対応方法が分からずここでご質問させて頂きました。
宜しくお願い致します。
6 Replies
投稿ありがとうございます！
サイト全体の文字サイズを変更する機能はありますが、特定の箇所の文字サイズのみ変更する場合は CSS を書いて適用する対応になるかなと思います。
CSS の書き方、適用の方法はいくつかあります。
・テーマに搭載されている「追加 CSS」を使う（https://support.animagate.com/manual/wp-nishiki-add-css/）
・ワードプレス本体に搭載されている「追加 CSS」を使う
・CSS を適用するプラグインを作って有効化する
などがあります。ご参考いただけますと幸いです。
不明点がありましたらお気軽にご質問ください。
返信が遅くなり、申し訳ございません。
また、ご回答頂きましてありがとうございます。
本件、承知致しました。
早速ではございますが何点かご質問させて頂いてもいいでしょうか。
①テーマに搭載されている「追加CSS」とWordPress本体に搭載されている「追加CSS」の編集箇所は変わってくるのでしょうか。
上記で記載頂いたURLがページが見つかりませんと表記がございましたのでお教え頂けますと幸いです。
②以前色々調べていた際にCSSで編集するしかないと思いどのようなCSSを「追加CSS」に追記したらいいのか調べてコピペで何回か試したのですが反映されませんでした。
追加CSSが反映されない可能性としては表記が間違っている可能性が高いでしょうか。
それとも、テーマによっては反映出来ないCSSがあるのでしょうか。
今までWeb系の業務を行っておらず初歩的な質問で申し訳ございません。
また、上記の質問方法が合っているのかわかりませんがご回答頂けますと幸いです。
宜しくお願い致します。
一応、グローバルメニューの大きさが「追加CSS」で変更出来るようでしたら上司と相談して、NishikiProを購入し他社のHPを作成・運用していこうと考えております。
宜しくお願い致します。
度々、申し訳ございません。
「SiteOrigin CSS」というプラグインで何とか対応できそうです。
これで問題なければ購入させて頂こうと思っております。
また、ご質問させて頂く事もあるかと思いますが宜しくお願い致します。
@yuka は レベルが 1 に あがった！
ご返信ありがとうございます！
順番に回答いたしますね。
①テーマに搭載されている「追加CSS」とWordPress本体に搭載されている「追加CSS」の編集箇所は変わってくるのでしょうか。はい、変わります。使いやすい方を選ぶのがいいと思いますが、両方使ってもいいですし、どちらか片方だけ使うのもいいと思います。テーマに搭載されている「追加CSS」はフロント/管理画面/両方と適用範囲を3パターンから選べますので、より柔軟な書き方ができると思います。
上記で記載頂いたURLがページが見つかりませんと表記がございましたのでお教え頂けますと幸いです。URLを貼り付ける際に不要な文字列が入っていたようです。すみません！正しいURLは https://support.animagate.com/manual/wp-nishiki-add-css/ です。
②以前色々調べていた際にCSSで編集するしかないと思いどのようなCSSを「追加CSS」に追記したらいいのか調べてコピペで何回か試したのですが反映されませんでした。CSSと使用しているテーマの理解度にかなり関係すると私は思っています。 同じCSSを書いたとしても、テーマによって使用されているタグやclassやidが違えば、適用されない可能性は十分にあります。 これはCSSの詳細度に関係してくる話になりますので、詳しくは以下のページを参考ください。 https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
今までWeb系の業務を行っておらず初歩的な質問で申し訳ございません。全く問題ありません！ CSSの書き方は慣れの部分も大きいと思いますので、難易度の低いものから挑戦していくのが個人的にはおすすめです😀
サポトピア
Nishiki Pro：フロント画面/管理画面/両方の 3 パターン対応で使い分けも可能。「追加 CSS」機能の解説
フロント画面/管理画面/両方など、シーンに合わせて CSS を追加できます。プロパティの入力補助付き。
MDN Web Docs
詳細度 - CSS: カスケーディングスタイルシート | MDN
詳細度 (Specificity) は、ある要素に最も関連性の高い CSS 宣言を決定するためにブラウザーが使用するアルゴリズムで、これによって、その要素に使用するプロパティ値が決定されます。詳細度のアルゴリズムは、CSS セレクターの重みを計算し、競合する CSS 宣言の中からどのルールを要素に適用するかを決定します。
できれば・・・ですが、今回のCSSに限らず、ワードプレス本体またはテーマに同等の機能があればプラグインを導入するのは避けた方がいいと思います。プラグインは手軽に導入はできますが、管理コストが増えてしまうので・・・！
ご丁寧にご返信頂きましてありがとうございます！
本当にド素人の為、どのようにCSSを記述したらいいのか分からずプラグインを使用してしまいました、、、
自分で出来るようになればそこは便利かと思いますのでCSSをもっと勉強しようと思います。
一応、管理予定のHPは1件のみですのでCSSを勉強しつつこのまま進めてみようと思います。
また、ご質問させて頂く事があるかと思いますがその際は何卒宜しくお願い致します。