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カスタマイズ依頼

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

H2タグに指定した文字色が反映されませ...
 
共有:
通知
すべてクリア

[解決済] H2タグに指定した文字色が反映されません

11 投稿
3 ユーザー
1 Reactions
4,750 表示
(@hkz76)
Active Member Registered
結合: 7年前
投稿: 9
Topic starter  

わいひらさん、こんにちは。Cocoonのテーマとても使いやすく重宝しています(^^

質問なのですが、記事を作成する時に「H2タグ」の部分に(例えば)以下のようにフォントカラーを設定しても、下書き投稿のビジュアルエディタの部分には色は反映されるのですが、公開すると文字色が反映されず、グレーになってしまいます。

=== 下書き投稿では以下のように記述 ===

<h2><span style="color: #993300;">テキストテキスト</span></h2>

 

=== 公開記事のソースでは以下のようになっている ===

<h2><span id="toc2">テキストテキスト</span></h2>

====

H3タグは、上記のように色を指定してもちゃんと反映されるのですが、H2タグは反映されずに困ってしまっています。

H2タグに指定した色を反映させる為には何か設定が必要になるのでしょうか?

稚拙な質問で恐縮ですが、教えて頂けると助かりますので、よろしくお願いしますm(__)m

 

----------------------------------------------
サイト名:ザ・チェンジ
サイトURL: https://thechange.jp
ホームURL: https://thechange.jp
コンテンツURL: https://thechange.jp/wp-content
インクルードURL: https://thechange.jp/wp-includes/
テンプレートURL: https://thechange.jp/wp-content/themes/cocoon-master
スタイルシートURL: https://thechange.jp/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.9.6
PHPバージョン:7.1.4
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:0.6.2.2
カテゴリ数:25
タグ数:1341
ユーザー数:8
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.3
----------------------------------------------
利用中のプラグイン:
AdRotate 4.12
Akismet Anti-Spam 4.0.3
All In One SEO Pack 2.6
Broken Link Checker 1.11.5
Contact Form 7 5.0.2
EWWW Image Optimizer 4.2.1
My Category Order 3.3.2
Revision Control 2.3.2
Search Regex 1.4.16
TinyMCE Advanced 4.7.11
WP Multibyte Patch 2.8.1
----------------------------------------------


   
引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

H2タグに指定した色を反映させる為には何か設定が必要になるのでしょうか?

設定は必要ないです。

試してませんがh2タグのstyle属性が消えてしまうのは不便ではあるかと思いますが、別案として。

<h2><span style="color: #993300;">テキストテキスト</span></h2>

スマホから検索したらAMP対応されてるので style="color: #993300; ←のようなスタイル属性はh2タグに限らず、AMPページでは全て反映されません。

※AMPエラーが出るなどの理由でテーマ側で出力しないようしてくれてます。※通常ページはそのような処理はされません。

AMPでも通常ページでもどちらも反映する書きかたでしたらHTMLは以下の通り。

<h2><span class="brown">テキストテキスト</span></h2>

その上で以下のようにCSSにスタイルを追記。

.brown {
	color: #993300;
}

全ての記事内h2タグを上記の色にするなら、HTMLには何も書かずに

.article h2 {
	color: #993300;
}

とstyle.css・amp.cssに追記したら、色を変更をしたい時一括で変更できるし、AMPでも反映するので良いと思います。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

以前の、目次のコピペ対策としてH2内のタグは削除する仕様にしてしまいました。

目次が上手く動かない | 不具合報告 | Cocoon フォーラム

なので、H2見出しに直接スタイルを書くのではダメでしょうか。

<h2 style="color: #993300;">テキストテキスト</h2>

ただいずれにせよ、AMPページだとstyle属性は削除されるので表示されないとは思います。


   
返信引用
(@hkz76)
Active Member Registered
結合: 7年前
投稿: 9
Topic starter  

かうたっくさん、わいひらさん、返信ありがとうございます(^^

なるほど、CSSに追記するという手段もあるのですね。そしてH2見出しに直接スタイルを書くというアドバイスありがとうございます。

ちなみに、言葉足らずでスミマセン。。。

AMPページでH2タグのstyle属性は削除される(配色がなくなる)のは理解しているのですが、通常のPCや(AMPではない)スマホで見た時にもstyle属性は削除されておりまして、、、

※ こちら、わいひらさんのレスから途中のバージョンからH2内のタグは削除する仕様になったことを知りました。(その前のverからcocoonを使っていた為、あれ?と思ったのです)

さらに困った事にCocoonにテンプレートを変更する前は、記事ごとにH2タグの色を変えていて、H2タグがすべて共通の配色ではないのです(^^;

※ 素人でもTinyMCE AdvancedからHタグにも文字色が設定できるのが楽すぎまして。。。

察するにあまり一般的な使い方ではないのだろうなぁ、、、という認識に至ったのですが、例えば私のように、記事ごとにH2タグの配色を変えている場合のCocoonでの対応策などはありますでしょうか? 

過去記事数がそこそこな数ありまして、何か良い策があればとても助かりますので、ご指南よろしくお願いしますm(__)m


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

察するにあまり一般的な使い方ではないのだろうなぁ、、、という認識に至ったのですが、例えば私のように、記事ごとにH2タグの配色を変えている場合のCocoonでの対応策などはありますでしょうか?

  • 記事毎にあるカスタムCSS(管理画面の記事下にある)にスタイルを書くのが良いと思います。

https://gyazo.com/4e33bb740dbfda7eef05cbdac6a1fd39

カスタムCSSが見当たらないとき、表示オプション(管理画面記事上)を開いてカスタムCSSにチェックをいれると表示されます。

https://gyazo.com/d19bd57f71a9e9bab9994189f0181a6e

CSSを追記したらHTMLタグの変更を

<h2><span style="color: #993300;">
<h2>
  • ページ内検索で見つけて削除
  • プラグインなどで一括置換を全記事分する

などです。

------------

スタイルCSSに追記したい場合

  • それか記事IDを指定して、記事毎のh2タグを装飾

https://your-domain.com/wp-admin/post.php?post= 17392&action=edit

この場合17392が記事IDで、指定方法は以下の通りです。

.postid-17392

.postid-17392 .article h2 {
	color: #993300;
}

とCSSに追記する感じか。その後h2タグ内のspanを削除。カスタムCSSを導入してないテーマに変更予定がある場合など…。

-----------------

その他タグでしたら上記#post-3569のとおり、タグ変更+style追記。

.brown {
	color: #993300;
}
  • 今後style属性を控えてみる
  • 頻繁に使用する色のHTMLタグをプラグインAdQuickタグに追記
  • 色が多すぎて面倒なら似たはブラウン・ライトブラウン程度に統一
  • 追加したタグはCSSで指定

はじめは面倒に感じますけど、やってしまうと管理が簡単だと思います。

プラグインを使いカスタムCSSに追記するなど200記事ほどなら、四苦八苦しながらでもその単純作業は『たぶん』2時間もかからない気もします。やるまでが面倒かもですが。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

カスタムCSSを導入してないテーマに変更予定がある場合

これはないですね(笑)

『変更の可能性を考慮した場合』でした^^;


   
返信引用
(@hkz76)
Active Member Registered
結合: 7年前
投稿: 9
Topic starter  

かうたっくさん、早速の返信ありがとうございます(^^

なるほど、各記事ごとに個別にカスタムCSSに書いたり、プラグインAddQuickタグに追記すれば、反映する事ができるのですね。

今後の記事に関してはAddQuickをインストールして使うのが現実的なのかなと思う反面、過去記事に関しては、他のすてにCocoonに変更済みのサイトも合わせると全部で3万記事近くあり、配色も記事毎に合わせていて色が多すぎるもので、手動でやるのは流石に限界があるなと(^^:

しかしながらCocoonは本当に使いやすくて良いテーマで、重宝する機能もたくさんあって気に入っているので、出来る事ならこのテーマを使い続けたいと思っており、基本このテーマでなんとか出来る事を探したいと考えているのですが、過去記事の変更も含めて、他に方法はあったりしませんでしょうか?

すでに色々知恵をお借りしておきながら恐縮ではありますが、もしあれば教えて頂けますと嬉しいですので、よろしくお願いしますm(__)m


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

記事の多いサイトはh2タグのその機能#3571のない状態に子テーマ側で追記すれば良いと思いますよ。

コミット履歴みたいなのが各ページ0.6.?ページ下にあるので、そこで変更の履歴を確認してfunctions.phpに追記する感じです。

失敗したらエラーが出るのでバックアップをとり、テスト環境で試してからアップロードするなど試してみると良いかと思われます。

 


   
返信引用
(@hkz76)
Active Member Registered
結合: 7年前
投稿: 9
Topic starter  

かうたっくさん、アドバイスありがとうございます!

記事の多いサイトはh2タグのその機能#3571のない状態に子テーマ側で追記すれば良いと思いますよ。

おぉ!!!その手がありましたか☆確かにそうですよね(^^

 

過去記事のボリュームと今後の使い勝手を踏まえて、かうたっくさんのアドバイスを元にこの方法で進めたいと思い、バージョン履歴から変更点や、変更したファイル名の箇所などはわかったのですが、肝心の子テーマのfunctions.phpへの書き込みについて、色々調べてはみたものの、PHPなどをほとんど解らない初心者な為、何をどのように記述をすれば良いのか解らずに、困ってしまっています。

 

ですので、もし何か書き方の参考になるURLなどがありましたら、教えて頂けますと幸いですのでよろしくお願いしますm(__)m

Cocoonでの変更履歴

https://github.com/yhira/cocoon/commit/b97d4e4f4f260d50e5899d55301cfc62eb7c3e4c?diff=unified

 

変更したファイル

https://github.com/yhira/cocoon/blob/b97d4e4f4f260d50e5899d55301cfc62eb7c3e4c/lib/toc.php

の212行目

※ 子テーマのfunctions.phpの場所やFTPでのバックアップ、修正等はわかるのですが、PHPの書き方が初心者にはハードルが高く何度もすみません(^^;


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

子テーマの、functions.phpに以下のコードをコピペする形で追記すればできるかと思います。おそらく。
https://gist.github.com/yhira/e5a05865f1cce17498aa8268d6e37059

ただし、これを行った場合、今後目次機能に機能追加があったとしても、反映されませんのでご了承ください。


   
返信引用
(@hkz76)
Active Member Registered
結合: 7年前
投稿: 9
Topic starter  

おぉぉおおお!わいひらさん、お忙しい中コードを書いてくださいありがとうございます!!

今試してバッチリ反映されました、めちゃくちゃ助かりましたm(__)m

そして、かうたっくさんも様々なパターンのアドバイスを下さり本当に有難うございます!

お二人の協力に感謝です(^^


   
返信引用
共有:

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

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

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

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

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

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

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

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