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

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

投稿入力画面で見出し装飾が表示されなく...
 
共有:
通知
すべてクリア

[解決済] 投稿入力画面で見出し装飾が表示されなくなりました

29 投稿
4 ユーザー
12 Likes
2,693 表示
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

初めまして。

5月からブログを開設しcocoonを使わせていただいております。

ド素人なので、簡易な言葉でご説明いただけると助かります。

よろしくお願いいたします。

 

今朝から急に、投稿入力画面での見出し表示がおかしくなっています。

ただ、その状態でプレビュー表示にすると通常通りの装飾が表示されます。

既に投稿済みの記事にも変わった様子はなく、入力画面のみおかしいようです。

投稿には問題無いのですが、少々不便なので解決出来たらと思いトピックを上げさせていただきました。

 

★見出しは以下のようにカスタマイズしています。

/* 見出しカスタマイズ */
/* H2 */
.article h2{
background:none;
padding: 0;
background: #fff0f5;
box-shadow: 0px 0px 0px 5px #fff0f5;
border: dashed 2px#ffb6c1;
padding: 0.2em 0.5em;
color: #7b6459;
}

/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #7b6459;/*文字色*/
 background: transparent; /*背景透明に*/
border-left: solid 5px #ffb6c1;/*左線*/
}

/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
color: #7b6459;/*文字色*/
}

.article h4:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #ff1493; /*アイコン色*/
}

/* H5 */
.article h5{
border-bottom:none;
padding: 0;
position: relative;
border-top: solid 2px #ff1493;
border-bottom: solid 2px #ff1493;
background: #fff0f5;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
color: #7b6459;/*文字色*/
}

.article h5:after {
/*タブ*/
position: absolute;
 font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ POINT';
background: #ff1493;
color: #ffffff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
position: relative;/*相対位置*/
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
 color: #7b6459; /*文字色*/
}

.article h6:before {
font-family: "Font Awesome 5 Free";
content: "\f1b0";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #ff938b;/*アイコン色*/
}

 

★環境は以下です。

----------------------------------------------
サイト名:スパソロ!
サイトURL: https://mainagi.com
ホームURL: https://mainagi.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.4.1
PHPバージョン:7.3.16
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.4.1
カテゴリ数:11
タグ数:8
ユーザー数:1
----------------------------------------------
子テーマ名:cocoon child
バージョン:0.0.5
style.cssサイズ:6506バイト
functions.phpサイズ:204バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2020/05/flower201261776_TP_V.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.1.8
Head, Footer and Post Injections 3.1.6
----------------------------------------------


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

投稿画面の不具合は、難しいことが多いので、私のようなロースキルの出番ではないかもしれませんが、環境情報を、拝見しますと、なぜか、子テーマのバージョンが異常に古いようです。

 

それと、今回の不具合と関連性があるかどうかは、わからないのですが、このバージョンの古い子テーマは、どこからダウンロードされたのでしょうか?

もしかしたら、Conoha さんからですか?


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

子テーマのRTLサポートの記述が、違うような気がします。

RTLサポート


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

mainagiさんのサイトの子テーマでは、

@charset "UTF-8";

/*!
Theme name:cocoon child
Template:  cocoon-master
version:   0.0.5
/*

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く/*

このようになっていますが、

新しい子テーマの記述は、

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

このようになっています。

コメントアウトの閉じタグが逆ですよね。

大文字小文字やスペースも違うようですし。

 

それと、投稿画面の表示と、関係があるかどうかは、わかりません。


   
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@leafytree さま

ご返信ありがとうございます。

正直よく分からないままDLしております。。。

流れ的には以下の通りです。

 

Conohaで表示されたものをDL

 ↓

そのまま設定やカスタマイズ等を始める

 ↓

途中で、カスタマイズするのは子テーマでやらなければいけないということを知る

 ↓

絶望したとき、わいひらさんのマニュアルで「テーマ設定の復元(レストア)方法」を、見つける

https://wp-cocoon.com/how-to-theme-settings-restore/

 ↓

Wordpress内でcocoonの子テーマだけをDLしようとしたところ、親テーマもDLしろ的な表示が出る

 ↓

再度親テーマと子テーマを一緒にDL(記憶が定かではありませんが、テーマで「cocoon」で検索したかと思います)

 ↓

子テーマに、親テーマのバックアップファイルをインストールし、設定の復元

 ↓

親テーマで行っていた設定やカスタマイズがそのまま反映されていたので、そのまま使用中

 

なので、わたしのインストール済みという外観テーマは添付のように親テーマがふたつある状態です。。。

 


   
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@leafytree さま

度々ありがとうございます。

この頂いたCSSはそのままコピーして上書きしてみてもよろしいでしょうか。

 

実はこの冒頭部分、おそらく自分が消してしまったのか、記載されていなかったんです。

それで、カスタマイズする際に他者様のブログにこの上部のCSSがあり、自分のには無かったので、

そのブログに書いてあったCSSをそのまま入力してみました。

ちなみに画像だったのでコピペが出来ず、見様見真似で打ち込んだ次第です。。。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@mainagi さん

投稿者:: @mainagi

この頂いたCSSはそのままコピーして上書きしてみてもよろしいでしょうか。

自己責任となりますが、手入力したのであれば、間違っている可能性は高いですね。

 

新しい方は、私のサイトのものをコピーしたものです。


   
わいひら reacted
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@leafytree さま

ありがとうございます、コピペして修正させていただきました。

気になっていたところだったので、正しいものに書き換えられて助かりました!

 

ただ、不具合の方はそのまま残っているようです。。。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@mainagi さん

もし、心配だったら、このサイトから子テーマをダウンロードして、その中の 「style.css」のファイルをテキストエディタで開いてみれば、同じ記述がありますよ。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@mainagi さん

先ほどのRTLの件と、投稿画面の不具合の関連性については、私には、わかりません。

 

ただ、投稿画面自体もHTMLでWebサイトとして表示されています。

 

ブラウザのキャッシュをクリアしてみても、損は、ないかと思います。

 

もちろん、関連性がなければ、直ることはないですが・・

 

あと、親テーマが2つあること自体が、普通ではありませんね。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@mainagi さん

いままで、1年ほど、このフォーラムを読んでいますが、不具合の原因は、プラグインに起因していることが多いです。

 

もちろん、プラグイン意外の不具合であることもなくはないのですが、先ずは、原因の切り分け作業として、プラグインを停止して、不具合が再現されるかどうかを確認し、されなければ、プラグインをひとつずつ有効化して、どのプラグインが影響しているのかを見極めます。

 

プラグインを全部停止しても、不具合が直らないときは、別の原因を考えます。


   
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@leafytree さま

本当にいろいろありがとうございます。

 

キャッシュのクリア

→やりましたがダメでした。

 

親テーマ2個問題

→これはどうしたらいいのでしょうか。。。全部一からやり直す他無いでしょうか。。。

 

プラグイン

→まさに、昨日コンタクトフォームにアップデートマークがついていたので更新したところでした。

これか!と思い停止してみましたが、だめでした。。。

プラグインは4つ使用中のようで、4つ全て解除、ひとつずつ解除など、コンタクトフォームのみ解除など

いろいろなパターンを試してみましたがどれも直りませんでした。。。

 

お時間取らせてしまって申し訳ありません。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@mainagi さん

もう少し、詳しく調べたいのですが、ちょっと小用があります。

 

私はこのフォーラムではスキルが低い方ですので、他の方が原因に気づくかもしれません。

 

わいひらさんも、19時30分前後には、フォーラムに来てくださるかと推測します。

 

その頃に、時間を空けておくといいかもしれません。

 

2つの親テーマの件も、その時に何か、書き込んでくださるかと思います。


   
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@leafytree さま

承知しました。

いろいろご親切にありがとうございましたm(__)m


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@mainagi さん

CSSの記述もちょっと気になるところがあります。

とりあえず、外しますね。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14154
 

ここまでの流れからして、大変言いにくいのですが申し訳ないですが、サポート対象外のものにもありますように、独自カスタマイズの不具合の原因究明はサポートの対象外とさせていただいています。
というのも、全く同じ不具合環境が保証されたものを用意できないからです(今回は管理画面なので状態の調査もできない…)。

カスタマイズは自己責任となりますので、こちらのトラブルシューティングで行うようなことしか分からないです。
https://wp-cocoon.com/faq-css-trouble/


   
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@yhira さま

はじめまして、ご連絡ありがとうございます。

cocoon使わせていただきありがとうございます。

 

そうなんですね。。。

投稿には問題無いので、とりあえずこのまま様子を見ておこうかと思います。

 

もう一つだけ、親テーマが2つになってしまっている件については何か対処したほうがよろしいでしょうか。

特に問題なければこのままにしておいてもいいのでしょうか?


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@mainagi さん

念のため、一応確認なのですが・・

 

Cocoon設定の「エディター」タブの設定で、「エディターにテーマスタイルを反映させる」のところは、チェックが入っていますでしょうか?

 


   
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@leafytree さま

再度ありがとうございます。チェックは入ってました。

サポート対象外だということも確認せず質問してしまったにもかかわらず

いろいろ考えてくださって本当にありがとうございます。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@mainagi さん

責任を持ってください、と言われちゃうと困るのですが・・

 

やはり、親テーマが2つ、というのは、おかしいので、どちかを削除して、そのあとに、ダッシュボードの「更新」のところで、最新版にアップデートする、というのはどうでしょうか?

 

アップデートのお知らせが付いている方を残した方が良いような気がします。

 

ただ、結果については、前述のように、責任は持てません。


   
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@leafytree さま

ありがとうございます!!

cssのコピペとバックアップをしてから、親テーマ(更新マークがついていない方)を削除してみました。

残した方をアップデートし、子テーマで更新をかけました。

特に問題なさそうです!

相変わらず投稿入力画面の不具合はそのままですが、

ずっと気になっていたのでスッキリしました^^


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@mainagi さん

私もmainagiさんのサイトにアクセスしてみましたが、普通に表示されています。

 

やはり、投稿画面の不具合については、なかなか難しいようですね。

 

投稿画面の不具合については、しばらく放置していたら、元にもどった、などというケースもあります。

 

気休めにしかならないかもしれませんが・・

 

あとは、FTPソフトで、Cocoonの公式サイトからダウンロードしたテーマをインストールし直すとかでしょうか。

 

ただ、いまのところ、大きな障害は、ないようですので、慣れてきたら、いろいろ調べてみてもいいかもしれません。

 

あと、プラグインで入れておいた方が良いものですが、2byte文字である日本語の利用に欠かせない、

WP Multibyte Patch

セキュリティー関連のプラグインを何か入れておいた方が良いかもしれません。

私は、

SiteGuard WP Plugin

を使っています。

画像関連では、画像のファイルサイズを最適化してくれる、

EWWW Image Optimizer

も使っています。

 

追伸:とても美しいデザインのサイトですね。


   
わいひら reacted
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@leafytree さま

何から何まで、本当にありがとうございました(;;)

プラグインというのも正直よくわからずにいたのですが、本日教えていただいてから少し調べていて、

セキュリティは何か入れておいた方がいいなと思っていたところでした!

教えていただいた3つのもの、入れてみます。

 

使いながら勉強していけばいいか!と、見切り発車で始めてしまったので

まだまだ勉強しなければいけないことがたくさんあって、あっという間に時間が過ぎていきます。。。

 

今日は本当にたくさんのことを分かりやすく教えていただき、ありがとうございました!!

サイトもほめていただけてとっても嬉しかったです^^

 


   
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1179
 

子テーマの style.css にお書きの CSS で気になった部分を書いてみます。ただ、CSS を修正しても投稿入力画面の不具合は直らないかもしれません。

.article h2{
background:none;
padding: 0;
	background: #fff0f5;
  box-shadow: 0px 0px 0px 5px #fff0f5;
  border: dashed 2px#ffb6c1;
  padding: 0.2em 0.5em;
  color: #7b6459;
}

border: dashed 2px#ffb6c1; の 2px と #ffb6c1 との間に半角スペースを入れる。

.article h5{
border-bottom:none;
padding: 0;
	position: relative;
  border-top: solid 2px  #ff1493;
  border-bottom: solid 2px  #ff1493;
  background: #fff0f5;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
  color: #7b6459;/*文字色*/
}

border-bottom: solid 2px #ff1493; の 2px と #ff1493 の間のスペースが全角スペースではないか確認する。

また、border-top: solid 2px #ff1493; も同じく、2px の後のスペースが全角スペースではないか確認する(おそらく、こちらは半角スペースが 2 つ入っているとは思います)。

.blogcard-type .blogcard-label{
  background-color:#deb887; !important
}

!important が出てしまっている。また、 https://mainagi.com/?p=159 を見る限り、!important は不要。そのため、background-color: #deb887; に修正する。

This post was modified 3年前 2回 by Akira

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

気になるところがある、と書いておいて、その後、書き忘れていたら、Akiraさんが書いてくださった!


   
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1179
 

CSS を修正しても不具合が直らない場合は、デベロッパーツールのスクリーンショットを頂けると解決の糸口になるかもしれません。

Chrome でのやり方は、こんな感じです。

  1. 投稿入力画面の見出しの上で右クリックをし、「検証」をクリックする。
  2. すると、デベロッパーツールが起ち上がり、見出しの HTML がハイライトされている(添付画像の ① の青い部分)。
  3. デベロッパーツールの右側で見出しに適用されている CSS が分かる(添付画像の ②)。この CSS が分かれば、解決できるかもしれません。
This post was modified 3年前 2回 by Akira

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

AKiraさんが、ハイテクなら、私は、ローテクで、Cocoon設定の「エディター」タブの設定で、「エディターにテーマスタイルを反映させる」のチェックを一旦外して、変更をまとめて保存のボタンで確定し、再び、「エディターにテーマスタイルを反映させる」のチェックを入れて、変更をまとめて保存ボタンで、確定する、というのを試してみても、料金は、かかりません。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14154
 
投稿者:: @mainagi

もう一つだけ、親テーマが2つになってしまっている件については何か対処したほうがよろしいでしょうか。

特に問題なければこのままにしておいてもいいのでしょうか?

特に問題なければ、そのままでも特に悪影響はないと思います。
気になるようでしたらFTPでthemesフォルダーを開いて、cocoon-master以外のCocoon親テーマぽいフォルダーを削除すればよいかと思います。
cocoon-masterが正真正銘の親テーマフォルダなので、これは削除してはいけません。


   
mainagi
 mainagi
(@mainagi)
Active Member
結合: 3年前
投稿: 11
Topic starter  

@akira さま

@leafytree さま

@yhira さま

 

こんばんは。

連名でのご返信で失礼いたします。

また、せっかくご回答いただいていたのに閲覧が遅くなり申し訳ございません。

 

akiraさまが書いてくださったcssを直してみたところ、不具合が修正されました!!!!

本当にありがとうございます(;;)

自分のcssの書き方が悪いだけだったのに(しかもサポート外)、こんな公の場に書き込んでしまい、ご迷惑とお手数をお掛けしました。

本当に本当に助かりました!

 

素人でもわかりやすい説明をしていただき、感謝しかありません。

「解決」ボタンを押させていただきました。

この度はありがとうございましたm(__)m

 


   
共有:

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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