Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

ホーム画面ではなく、投稿記事(H1)タ...
 
共有:
通知
すべてクリア

[解決済] ホーム画面ではなく、投稿記事(H1)タイトルのフォントサイズのみを大きくしたい。

32 投稿
3 ユーザー
1 Reactions
2,437 表示
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

不具合・カスタマイズ対象ページのURL: https://forextrader-kenta.com/

相談内容:CSS初心者で申し訳ありません。ホーム画面ではなく、投稿記事(H1)タイトルのフォントサイズのみを大きくしたいです。

解決のために試したこと:ネットに転がっているCSSを子テーマのstyleシートに張り付けたが反応なし。例、

article h1 {
  font-size:20px;
}

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。    「無効化完了」
環境情報:----------------------------------------------
サイト名:ケンケンの情熱FX
サイトURL: https://forextrader-kenta.com
ホームURL: https://forextrader-kenta.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.9.2
PHPバージョン:7.4.25
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.2.4
カテゴリ数:11
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:2128バイト
functions.phpサイズ:204バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.2.2
All-in-One WP Migration 7.57
Contact Form 7 5.5.6
Google Analytics for WordPress by MonsterInsights 8.5.0
Hello Dolly 1.7.2
LIQUID SPEECH BALLOON 1.1.7
PS Auto Sitemap 1.1.9
Really Simple SSL 5.3.1
Search Regex 2.4.1
SiteGuard WP Plugin 1.6.1
Site Kit by Google 1.71.0
Table of Contents Plus 2106
TablePress 1.14
TypeSquare Webfonts for エックスサーバー 1.2.4
WordPress Popular Posts 5.5.1
WP-Optimize - Clean, Compress, Cache 3.2.3
WPForms Lite 1.7.3
Yoast SEO 18.4.1
----------------------------------------------

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。


   
引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

スマホからなもので確認ができないのですが・・・。

また、サイトに投稿がないようで、実際の状態も確認できないです。

お問い合わせ内容を拝見した感じだと、「article」の前に「.」(ドット)がないのだと思われます。

「article h1」の部分は、「.article h1」だとCSSがあたると思います。

 

【追記】

もしかすると、font-sizeは他のものがあたっているのかしら?

PCがないので調べることができないもので、もし上記であたらないようでしたら、他の方をお待ちください。

とりあえず仮にでも、1つ投稿があると実際の状態を、他の方が確認できると思います。

子テーマにある程度CSSをお書きのようですので、それらの影響の可能性もあるかもしれないですし。

すみません、中途半端な回答で。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

今、私のローカル環境で確認しました。

やはり「.」(ドット)が必要みたいですね。
特にカスタマイズ等なさっていない、標準の状態であればですが。
(親テーマは別のclassを指定しているようですけど。)

 


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

別件ですが。

WordPressの日本語環境では、以下のプラグインは必須と言えます。
(海外製のCMSのため、日本語等のマルチバイト文字の扱いが得意ではないそうです。)

WP Multibyte Patch
https://ja.wordpress.org/plugins/wp-multibyte-patch/

インストールなさることを強くお勧めします。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

mk2様

ご指南ありがとうございます。上記のプラグインをインストールさせてもらいました。

また、本題のcssの前にドットを入れてみましたが変化はないです。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

私の特にカスタマイズなどしていない、まっさらなローカル環境では、ドット追加で適用されます。

適用されないのであれば、別の要因の可能性があると思われます。

実際の投稿を拝見しないと分からないかもしれないです。

私は出先ですので、しばらく確認はできないですけど。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

あとは、「.entry-title」にしてみるとかでしょうか。

ただ、優先度で勝てるかは分からないです。

実際の状態を確認させていただくのが、最適かと思われます。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

了解です。実はまだ記事を書けていないので期限などなければ待っていただくことは可能でしょうか?


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

特に期限はありませんので、その際でも問題ないと思います。

また、今ならばPCが使用できますので、テスト記事などを一時的にアップしていただいて、確認させていただく感じでも良いです。

16時くらいまでならば、確認できます。

 

【追記】

子テーマのスタイルシートの末尾に「CSS」という文字があるようです。
削除しておいた方がよいと思います。

 

【追記2】

ちなみに「投稿記事(H1)タイトルのフォントサイズのみ」と仰っていますが、固定ページは除外ということでよろしいでしょうか。

であれば、もう少し詳しくCSSのセレクタを書く必要がありそうに思います。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

簡易にテスト投稿しました。おかしいところがあれば指摘お願いします。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

何か、投稿タイトルh1用のCSSを書いていただいてよろしいでしょうか。

当たっているかどうか確認したいです。

先程私が書いたものでも構いません。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

.article h1を子テーマのstyleに貼り付けました!


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

font-size:100px;にしました


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

ありがとうございます。

CSSは、当たっています。

font-sizeに20pxをご指定だと思います。

しかし、親テーマのデフォルトが26pxでした。

よって、それ以上の大きさにしないと、大きくならないです。

 

今100pxにしました?

エラーになってますね。

Unknown property nameのエラーが出てます。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

「font-size」の直前にゴミが入っています。

スペースにしてください。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

ありがとうございます
もう一度28pxに変更するのでエラーになっていないか見ていただきたいです!


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

エラーです。
また違うゴミが入っています。

 
いったん、「font-size」の前の部分を、スペースで置き換えてください。
コピペをすると、たぶんゴミが入ります。
 
特にExcelなどからの場合。
 

   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

手書きで入力しました。もう一度お願いします


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

今、前の余白を削除なさったと思います。

今の状態で当たっています。

もう少し大きなサイズにすると分かりやすいと思います。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

例えば、私の手元で64pxにすると、以下のような感じになります。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

64にしたところ文字が大きくなったことを自分で確認できました!


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

良かったです。

これで良さそうですね。

ちなみに、今のCSSだと、固定ページのタイトルh1も大きくなってしまいますけど、それで良いでしょうか。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

自分のスタイルシートではゴミがあるか分からなかったのですが、どのように確認していますか?


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

何らかのテキストエディタでご確認いただくのが良いかと思います。

別の方がお勧めなテキストエディタがあったのですが・・・
ちょっと探さないと分からないです。

styleシートに関しては、文字コードを「UTF-8」で書いておくのが良いと思います。

よって、テキストエディタで、文字コードを「UTF-8」にしておいて、編集する必要があります。

他の文字コードで書いたり、もしくは他の文字コードのものから貼りつけたりすると、ゴミが入ります。

 

ちなみに、私は子テーマをFirefoxで直接確認しました。
Firefoxは通常は使っていないのですが、この手のエラーが出た時はFirefoxで見ています。

ただ、Firefoxで確認すると、日本語が化けます。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

ありがとうございます やってみます! 今後ともよろしくお願いいたします。


   
mk2 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

ゴミが入る件は、以下が参考になると思います。

https://wp-cocoon.com/community/postid/35073/

 

では、離席しますね。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

meryをインストールしました。一旦、mery(utf-8)で書いたcssを子テーマに貼り付けるという認識で合っていますか?


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさん

子テーマのスタイルシートは、現状どうやって編集なさっていますか。

 

テキストエディタを使用する場合は、

  1. FTPでダウンロード
  2. テキストエディタで編集
  3. FTPでアップロード

上記のような手順が、ポピュラーなのかと思います。

WordPressのテーマエディタは、突然エラーが出て編集できなくなったりするんですよね。
今はどうか分かりませんけれど、私は使っていないもので。

 


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

ちなみに、FTPソフトがなくても、サーバー側で提供されているファイルマネージャーで、ダウンロード・アップロードできるものもあると思います。

 


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamanobancyoさんは、エックスサーバーをご利用のようですね。

エックスサーバーのファイルマネージャは、以下に使い方が載っているようです。

https://www.xserver.ne.jp/manual/man_tool_file.php

ダウンロードやアップロードもできるようです。

 

すみません、そろそろ時間が限界ですので、離席します。


   
返信引用
(@yamanobancyo)
Active Member Registered
結合: 3年前
投稿: 13
トピックスターター  

ありがとうございます


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、yamanobancyoさん

Windowsでは、「Mery」というテキストエディタがシンプルでよく利用しています。

https://wp-cocoon.com/community/postid/38104/


   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました