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

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

タブ見出しボックスがプレビューの時に表...
 
共有:
通知
すべてクリア

[解決済] タブ見出しボックスがプレビューの時に表示されません。

15 投稿
4 ユーザー
19 Likes
377 表示
shizukukun
(@shizukukun)
Active Member Registered
結合: 1年前
投稿: 12
Topic starter  

はじめまして。初めて投稿させていただきます。

 

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

https://notepad.pw/share/s8r1l8mk9

相談内容:

カスタマイズしたタブ見出しボックスがプレビューの時に表示されません。

投稿画面では表示されていますが、プレビューの時だけ表示されません。

詳細画像は添付資料にZipファイルがございますのでご確認くださいませ。

 

「外観」→「テーマエディター」→「スタイルシート」に下記を貼り付けました。

 

/*************
タブ見出しボックス
*************/
.tab-caption-box-label {
line-height: 0;  /*タブ設定をリセット*/
padding: 24px 64px;  /*タブ内側余白*/
font-size: 16px;  /*タイトル文字の大きさ*/
font-weight: bold;  /*タイトル文字の太さ*/
border-radius: 4px 4px 0px 0px; /*タブ角丸*/
}

.tab-caption-box-content {
position: relative;  /*配置に関するもの(ここを基準に) */
top: 1px;  /*上から(1px)移動*/
border: 2px solid;  /*ボックス線*/
padding: 48px 24px;  /*ボックス内側余白*/
border-radius: 4px;  /*ボックス角丸*/
border-top-left-radius: 0px;  /*ボックス左上角丸*/
}
@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon
Version: 1.1.2
*/

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}

 

 

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

下記の3点を試しました。しかし変化はありませんでした。

①プラグインを全て無効化

②Advanced Editor Tools (旧名 TinyMCE Advanced)は無効化

③スキンを他のスキンに変更

 

 

 

環境情報:

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

サイト名:しずくくんのブログ

サイトURL: https://shizukukun-blog.com

ホームURL: https://shizukukun-blog.com

コンテンツURL:/wp-content

インクルードURL:/wp-includes/

テンプレートURL:/wp-content/themes/cocoon

スタイルシートURL:/wp-content/themes/cocoon-child

親テーマスタイル:/wp-content/themes/cocoon/style.css

子テーマスタイル:/wp-content/themes/cocoon-child/style.css

スキン:/wp-content/themes/cocoon/skins/skin-ganchan01/style.css

WordPressバージョン:5.8.2

PHPバージョン:7.4.25

ブラウザ:Mozilla/5.0 (X11; CrOS x86_64 14150.87.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.124 Safari/537.36

サーバーソフト:Apache

サーバープロトコル:HTTP/1.1

エンコーディング:gzip, deflate, br

言語:ja,en-US;q=0.9,en;q=0.8

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

テーマ名:Cocoon

バージョン:2.3.4

カテゴリ数:4

タグ数:10

ユーザー数:1

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

子テーマ名:Cocoon Child

バージョン:1.1.2

style.cssサイズ:1561バイト

functions.phpサイズ:203バイト

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

Gutenberg:1

AMP:0

PWA:0

Font Awesome:4

Auto Post Thumbnail:0

Retina:0

ホームイメージ:/wp-content/themes/cocoon/screenshot.jpg

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

ブラウザキャッシュ有効化:0

HTML縮小化:0

CSS縮小化:0

JavaScript縮小化:0

Lazy Load:0

WEBフォントLazy Load:0

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

利用中のプラグイン:

Akismet Anti-Spam 4.2.1

BackWPup 3.10.0

ConoHa WING コントロールパネルプラグイン 1.1

ConoHa WING 自動キャッシュクリア 1.0.0

Contact Form 7 5.5.2

Default featured image 1.7.1

Invisible reCaptcha 1.2.3

SiteGuard WP Plugin 1.6.0

WebSub (FKA. PubSubHubbub) 3.1.1

WP Multibyte Patch 2.9

XML Sitemaps 4.1.1

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

 

ブログ開設して1ヶ月です。超初心者で情報が少なくて申し訳ございません。よろしくお願いします。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4413
 

shizukukunさん

添付は画像をそのまま貼っていただきたいです。
そうすれば、プレビューされるので、何もしなくても閲覧できます。

複数枚の場合は、返信を分けてください。

私は今スマホですが、ダウンロードして、解凍して確認・・・というのは、ちょっと厳しいです。
(古いスマホなもので。)

投稿者:: @shizukukun

テーマ名:Cocoon

バージョン:2.3.4

おそらく、親テーマが古いことが原因かと思います。

WordPress 5.8ではブロックエディタ周りの仕様が変わりましたが、このテーマのバージョンではそれに対応していません。

テーマを最新バージョンへアップデートすることで、解消すると思います。

ちなみに、現在の最新バージョンは、2.3.7.2だったと思います。

 

ただ・・・。

投稿者:: @shizukukun

テンプレートURL:/wp-content/themes/cocoon

スタイルシートURL:/wp-content/themes

これは、ConoHa独自に改変したテーマですね。

これが原因でアップデートされないのだと思います。

後程、対応方法を記載したトピックを探して貼っておきます。

しばらくお待ちください。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4413
 

以下の返信とその下にも記載がありますので、ご確認のうえ、対応してみてください。

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

 

現在、ConoHaからも対応手順がアナウンスされていますが、ConoHaの開示した方法では作業しないでください。

テーマの設定やカスタマイズが、すべて消えてしまいます。


   
shizukukun reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4413
 

添付いただいた画像を解凍しましたので、貼っておきます。


   
shizukukun
(@shizukukun)
Active Member Registered
結合: 1年前
投稿: 12
Topic starter  

 mk2さん

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

またzipファイルの件、大変失礼いたしました。

ファイルの解凍、貼付いただきありがとうございました。

複数枚の時の対応方法も理解しました。

次回より、そのように対応致します。

 

進捗状況、また改めてご連絡させていただきます。


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

CSS で 2 点気になりました。

① CSS の追加場所

子テーマの style.css に CSS を追加する場合は、↓ のコメントより下に追加します。

/*必要ならばここにコードを書く*/

② 全角のスペース

ご提示された CSS をコピペしたところ、お書きになっているコメントの前に全角のスペースが入っています。全角のスペースは使えないため、半角スペースへの変更が必要です。

半角スペースに変更していますので、↓ の CSS をお使いください。尚、0px を 0 に変更もしています。

.tab-caption-box-label {
  line-height: 0; /*タブ設定をリセット*/
  padding: 24px 64px; /*タブ内側余白*/
  font-size: 16px; /*タイトル文字の大きさ*/
  font-weight: bold; /*タイトル文字の太さ*/
  border-radius: 4px 4px 0 0; /*タブ角丸*/
}

.tab-caption-box-content {
  position: relative; /*配置に関するもの(ここを基準に) */
  top: 1px; /*上から(1px)移動*/
  border: 2px solid; /*ボックス線*/
  padding: 48px 24px; /*ボックス内側余白*/
  border-radius: 4px; /*ボックス角丸*/
  border-top-left-radius: 0; /*ボックス左上角丸*/
}

   
shizukukun
(@shizukukun)
Active Member Registered
結合: 1年前
投稿: 12
Topic starter  

@akira さん

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

結論から先に申し上げますと、無事タブ見出しボックスがプレビューで表示されるようになりました!

半角スペースに変更されたCSSを貼り付けたことで表示されました。

下記のように変更しました(①の追加場所と合ってますでしょうか?)

 

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon
Version: 1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.tab-caption-box-label {
line-height: 0; /*タブ設定をリセット*/
padding: 24px 64px; /*タブ内側余白*/
font-size: 16px; /*タイトル文字の大きさ*/
font-weight: bold; /*タイトル文字の太さ*/
border-radius: 4px 4px 0 0; /*タブ角丸*/
}

.tab-caption-box-content {
position: relative; /*配置に関するもの(ここを基準に) */
top: 1px; /*上から(1px)移動*/
border: 2px solid; /*ボックス線*/
padding: 48px 24px; /*ボックス内側余白*/
border-radius: 4px; /*ボックス角丸*/
border-top-left-radius: 0; /*ボックス左上角丸*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}

 


   
shizukukun
(@shizukukun)
Active Member Registered
結合: 1年前
投稿: 12
Topic starter  

@mk2_mk2さん 

指定された記事を一通り読んでみました。

すみません、正直よくわかりませんでした・・・。

 

◆やったこと

①環境情報バックアップ

②スタイルシートバックアップ

③cocoonの設定をバックアップ(コードをダウンロード)

 

以上を踏まえた上で、下記のやり方でやった方が良いのでしょうか?

①他のテーマにしておいて、一旦子テーマと親テーマを削除

②子テーマ、親テーマを再ダウンロードする

 

違ってたら申し訳ございません。

お忙しい中恐縮ですが、よろしくお願いします。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4413
 

shizukukunさん

只今スマホですので、あまり長くは書けません。

投稿者:: @shizukukun

すみません、正直よくわかりませんでした

と言われてしまうとなかなか難しいです。

フォーラムでは、あれくらいまでしかご案内はできないかもしれません。

もし、作業が分からないのであれば、項番のどこが分からないなどを、教えていただかないとこちらからは何とも言えないと思います。

(漠然と分からないと言われてしまうと厳しいです。)

 

作業としては、

  1. 各種バックアップをとる
  2. 一旦親子テーマを削除(この際、WordPress公式テーマにする)
  3. 新しい親子テーマをインストール
  4. 項番1で取得したバックアップから、設定やカスタマイズを復元
  5. 手で戻す必要があるものは、必要に応じて手で再設定

 

という感じです。
(これに似たことはリンク先に書いてある気がしますので、これだと伝わらないかもしれませんが。)


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

前略、@shizukukun さん

以下のリンクの説明の方が時系列になっているので、参考になるかもしれません。

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4413
 

ちなみに、私が項番と言っているものは、リフィトリーさんがリンクしてくださったリンク先のことです。

私がリンクしたものから、そこにたどり着くはずです。

なぜそういうことが必要かが書いてあり、その先のリンクへもたどれますのでリンクしましたが、余計な情報もあって混乱するのかもですね。


   
shizukukun
(@shizukukun)
Active Member Registered
結合: 1年前
投稿: 12
Topic starter  

@mk2_mk2 さん

@leafytree さん

 

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

 

投稿者:: @shizukukun
投稿者:: @shizukukun

すみません、正直よくわかりませんでした

と言われてしまうとなかなか難しいです。

フォーラムでは、あれくらいまでしかご案内はできないかもしれません。

もし、作業が分からないのであれば、項番のどこが分からないなどを、教えていただかないとこちらからは何とも言えないと思います。

(漠然と分からないと言われてしまうと厳しいです。)

 

そうですよね。言葉足らずで大変失礼致しました。

「手順方法がどの部分からスタートさせれば良いのかがわからない」

という意味でした。

ですが、

投稿者:: @mk2_mk2

作業としては、

  1. 各種バックアップをとる
  2. 一旦親子テーマを削除(この際、WordPress公式テーマにする)
  3. 新しい親子テーマをインストール
  4. 項番1で取得したバックアップから、設定やカスタマイズを復元
  5. 手で戻す必要があるものは、必要に応じて手で再設定

 

こちらの手順と、

 

投稿者:: @leafytree

以下のリンクの説明の方が時系列になっているので、参考になるかもしれません。

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

 

こちらのリンク先の作業項目を確認しながら進めようと思います。

 

ですが、しばらくまとまった作業時間を確保するのが難しいと思います。

ゆっくりではありますが、進捗わかりましたらまたこちらにご連絡させていただきます。

よろしくお願いします。


   
shizukukun
(@shizukukun)
Active Member Registered
結合: 1年前
投稿: 12
Topic starter  

@mk2_mk2 さん

度々で申し訳ございません。

作業手順を確認しながら進めました。

バックアップ→親子テーマをアンインストール→再インストールしました。

下記環境情報です。

親テーマが「2.3.7.2」になってますが、

これで最新版になったという解釈でよろしいのでしょうか?

赤太字で表示しました。

 

----------------------------------------------
サイト名:しずくくんのブログ
サイトURL: https://shizukukun-blog.com
ホームURL: https://shizukukun-blog.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
スキン:/wp-content/themes/cocoon/skins/skin-ganchan01/style.css
WordPressバージョン:5.8.2
PHPバージョン:7.4.25
ブラウザ:Mozilla/5.0 (X11; CrOS x86_64 14150.87.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.124 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.7.2
カテゴリ数:4
タグ数:10
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:1454バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.2.1
BackWPup 3.10.0
ConoHa WING コントロールパネルプラグイン 1.1
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.5.3
Default featured image 1.7.1
Invisible reCaptcha 1.2.3
SiteGuard WP Plugin 1.6.0
WebSub (FKA. PubSubHubbub) 3.1.1
WP Multibyte Patch 2.9
XML Sitemaps 4.1.1
----------------------------------------------

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4413
 

shizukukunさん

スマホからですので、簡単に。

はい、最新バージョンだと思います。

投稿者:: @shizukukun

テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master

もう1つ大事なのは上記部分です。

標準のフォルダへインストールされました。
これで、今後バージョンアップがあれば、ダッシュボードから最新バージョンの適用ができるようになります。

ConoHa独自に改変したものは、異なるフォルダへインストールされてしまい、テーマのバージョンアップが適用されないのです。


shizukukun
(@shizukukun)
Active Member Registered
結合: 1年前
投稿: 12
Topic starter  

@mk2_mk2さん

 

投稿者:: @mk2_mk2

標準のフォルダへインストールされました。
これで、今後バージョンアップがあれば、ダッシュボードから最新バージョンの適用ができるようになります。

ConoHa独自に改変したものは、異なるフォルダへインストールされてしまい、テーマのバージョンアップが適用されないのです。

 

念の為、conohaのファイルマネージャーを確認してみました。

フォルダが親子ともに「master」に切り替わってました。

画像ご確認くださいませ。

今後はダッシュボードからアプデができるとのこと、承知しました。

 

当初は別の問い合わせだったにも関わらず、何から何までありがとうございました。

困っていたので本当に助かりました。

アドバイスいただきました皆様、

本当にありがとうございました。


   
共有:

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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