質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

解決済

2回答

1574閲覧

Wordpressテーマでデフォルトで設定されている文字の大きさを変更したい。

kimukimu009

総合スコア33

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

0グッド

0クリップ

投稿2020/02/27 05:01

■できないこと:
あるテーマを利用したWordpressのトップページの中のサイトのタイトルの文字の大きさが
変更できない。

■具体的な事象と仮説:
1.テーマをインストール

2.設定→一般→サイトのタイトルで、
「Aサイトのタイトル」としてタイトルを設定

3.WEBサイトを表示させる。
テーマのトップページの中のある部分に、「Aサイトのタイトル」という文字が
表示されている。

4.Aサイトのタイトルの文字の大きさを変更する為に、
outerHTMLをデベロッパツールで調べた上で、テーマ内のcss編集を以下の様に
追記する。

 しかしながら、

h2.content01-title headline-font-type{ font-size:20px; }

.content01-title headline-font-type{ font-size:20px; }

とやっても、タイトルの文字の大きさは変わらない。

■理由として考えられること(仮説):
デベロッパーツールで、copy→outerHTMLとしてみた場合、
以下のHTMLとしてテーマが表示されている。
つまり、テーマのプログラム(デフォルトの設定)で、
強制的に、42pxが設定されていると考えられる。

<h2 class="content01-title headline-font-type" style="font-size: 42px;">Aサイトのタイトル</h2>

■しりたいこと:
このような場合に、サイトのタイトルの文字の大きさを変える方法はあるのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dit.

2020/02/27 05:13

テーマの提示はできますか?
kimukimu009

2020/02/27 05:16

TDCのSTORYというものです。 どのような情報が必要ですか?
kimukimu009

2020/02/27 07:31

ありがとうございます。 ご指摘の通り、管理画面の中の42pxを修正したところ、パソコンの表示だけが切り替わりました。 現在他の方法を探っておりますので今しばらくお待ちください。情報は共有させていただきます。
kimukimu009

2020/02/28 03:04

ありがとうございます! dit.様からのご指摘、解答方法提示により、解決いたしました。 以下、うまくいった内容をまとめます。 テーマ内の管理画面から、サイトのタイトルの文字の大きさを指定する場所(42pxに設定) があったが、PCしか反映されず、モバイルの場合は、反映されない。 → テーマの編集(style.css、responsive.css)を行うことによって解決させることができると考えられる。 しかしながら、テーマを直接編集するのではなく、外観-カスタマイズ-追加CSSに、記述することによって、強制的に、style.css、responsive.cssに記述されているものを、上書きすることによって、実現させた。 .content01-title { font-size: 42px; /* 好きな数値に */ } @media only screen and (max-width: 767px) { .content01-title { font-size: 22px; /* 好きな数値に */ } } 本当に、お時間を割いていただき、ありがとうございました。
dit.

2020/02/28 05:33

解決できたようで何よりです。 また、すでにご存じかもしれませんがテーマを直接編集することは得策ではありません。 「子テーマ」を使いそちらをカスタマイズするようにしてみてください。 うまくいかなくても子テーマだけ消せばいいので気が楽です。
kimukimu009

2020/02/28 05:35

かしこまりました。 本当に、ありがとうございました。 感謝いたします。
guest

回答2

0

ベストアンサー

無料テーマなら手元のWPに入れて検証してみようと思ったのですが有料テーマですね。
試しに配布元のデモサイトを見てみましたが、モバイル版の時にはstyle="font-size: 42px;"は消えているようです。(幅を狭めるだけではだめで、デベロッパーツールでモバイルに切り替えたら変わりました。)
JavaScriptかPHPで切り替えているかもしれませんがこれ以上は私には追えませんでした。

…と、修正依頼欄に書こうとしたのですが、ここ直せばいいのでは?
イメージ説明


以下追記
PCでの閲覧時はテーマのカスタマイズ画面から指定した数値に上書きされると思いますが、それ以外の端末ではここが該当しそうですね。
style.css

css

1.content01-title { 2 font-size: 42px; 3 line-height: 1.4; 4 margin-bottom: 15px; 5 text-align: center; 6}

responsive.css

css

1@media only screen and (max-width: 767px) { 2 .content01-title { 3 font-size: 22px; 4 line-height: 1.5; 5 margin-bottom: 3px; 6 } 7}

外観-カスタマイズ-追加CSSに以下を記述して試してみてください。

css

1.content01-title { 2 font-size: 42px; /* 好きな数値に */ 3} 4@media only screen and (max-width: 767px) { 5 .content01-title { 6 font-size: 22px; /* 好きな数値に */ 7 } 8}

投稿2020/02/27 06:02

編集2020/02/27 23:49
dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kimukimu009

2020/02/27 06:37

わざわざ、ありがとうございました。 見てみます。
dit.

2020/02/27 06:45

テーマの紹介ページを見ただけなので管理画面のどこにあたるのかはわかりませんが、いろいろな場所を確認してみてください。
guest

0

style属性でやられちゃってたらもう、テーマを編集するかjs使うしかないですかね

しかしタグの属性値にfont-sizeの指定が入るっていうのは
何らかの形で管理画面で文字の大きさを指定できる手段が
用意されているという可能性が高いので
管理画面をもう少し調査してみるといいかもしれません

投稿2020/02/27 05:35

編集2020/02/27 06:00
KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kimukimu009

2020/02/27 05:48

ありがとうございます。 テーマ編集と、管理画面についてもう少し調査を進めてみます。 よろしくお願いいたします。
kimukimu009

2020/02/28 03:06

貴重なお時間を割いていただき、ありがとうございました。 管理画面でも、設定が可能でしたが、PCしか反映されませんでした。 その結果、テーマの編集(style.css、responsive.css)を行うことによって解決させることができると考えられましたが、テーマを直接編集するのではなく、外観-カスタマイズ-追加CSSに、記述することによって、強制的に、style.css、responsive.cssに記述されているものを、上書きすることによって、実現させました。 どうもありあがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問