shizukukunさん

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

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

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

投稿者:: @shizukukun

テーマ名：Cocoon

バージョン：2.3.4

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

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

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

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

ただ・・・。

投稿者:: @shizukukun

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

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

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

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

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

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

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

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

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

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

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

 ｍｋ２さん

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

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

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

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

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

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

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; /*ボックス左上角丸*/
}

@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){
/*必要ならばここにコードを書く*/
}

@mk2_mk2さん 

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

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

◆やったこと

①環境情報バックアップ

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

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

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

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

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

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

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

shizukukunさん

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

投稿者:: @shizukukun

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

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

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

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

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

作業としては、

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

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

前略、@shizukukun さん

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

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

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

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

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

@mk2_mk2 さん

@leafytree さん

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

投稿者:: @shizukukun

投稿者:: @shizukukun

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

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

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

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

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

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

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

という意味でした。

ですが、

投稿者:: @mk2_mk2

作業としては、

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

こちらの手順と、

投稿者:: @leafytree

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

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

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

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

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

よろしくお願いします。

@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
----------------------------------------------

shizukukunさん

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

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

投稿者:: @shizukukun

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

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

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

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

@mk2_mk2さん

投稿者:: @mk2_mk2

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

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

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

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

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

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

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

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

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

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