拡張スタイル「タブボックス」のラベルを日本語化するカスタマイズ方法 

ちょっと私の知識不足で理解が追いついてないところがあるので時間があるときに勉強させていただきます！

わいひらさん＞ありがとうございます。ひとまず私のやりたいことは出来たので大丈夫です！

これだけでも非常に嬉しいのですが、チェック/コメント/ポイント等の文字が手軽に変更できると嬉しいと思いました。

これは、ショートコードを用いれば容易なんですが、ビジュアルエディターで見づらいショートコードを使ってまで実装すべきかどうかで迷っています。

40～84行目にタグを追加して、デザインをCocoonのモノと同じにすれば、4色分だけで色んな文字列を管理画面の投稿編集のビジュアルエディタから可能です。

（編集理由：変なHTMLの文字列削除）

例えば以下のように

https://notepad.pw/y7w1h7wc

エディタ用CSSにstyleを書いたらかなり分かりやすいかもです？

あとはstyle.css・amp.cssも必要であれば装飾を書けば、ビジュアルエディタ上で文字列の変更は簡単です。

ビジュアルエディターの「スタイル」と書かれた、ドロップダウンリストで利用する方法では出来ないような気がします。

と言う事ですが、タグってところを編集したら可能だと思います。

以下のようなイメージです。

<div class="blank-box bb-tab bb-yomitai bb-yellow">ｘｘｘ</div

自己解決しました。

例えば子テーマのstyle.cssに以下追加してテキスト編集で入力して

.bb-yomitai::before {
content: "\f06a 合わせて読みたい";
}

以下のような感じでテキスト入力で打ち込めば出来ました◎

ｘｘｘ

ラベルタイトルも自分で手打ちできるといいのですが、難しいのでしょうか。

これはちょっと、ビジュアルエディターの「スタイル」と書かれた、ドロップダウンリストで利用する方法では出来ないような気がします。
他テーマとかだと、ショートコードとかを利用しされているのではないでしょうか。

けれどいろいろ、参考にさせていただきます。

スタイル拡張でボックスの種類を増やして欲しい | 要望 | Cocoon フォーラム#post-2618

以前このようにコメントされてますが、気長にお待ちいただけたら。

とりあえずの代替策としてですが

投稿者:: かうたっく

adQuickTagのブラグインは入れていたので、書いていただいたタグを開始・終了にして試してみましたが、希望する表示にはなりませんでした。

CSSを入れてないのでそのコードだけでは表示されないです。

adQuickTagにそのコードを入れてるなら、以下のようなCSSを追加してください。

.title-box {
    /* border: 1px solid #d8d8d8; */
    background-color: #fef3ff;
    border-radius: 3px;
    width: 90%;
    margin: 0 auto;
    padding: 1em;
    margin-bottom: 2.2em;
    position: relative;
    display: block;
    overflow: visible;
    /* z-index: 1; */
}

.box-title {
    content: "";
    font-weight: bold;
    /* font-size: 100%; */
    background: #f999ff;
    border-radius: 3px;
    color: #fff;
    padding: 0 14px;
    top: -15px;
    position: absolute;
    left: 20px;
}

style.cssや必要であればエディタ用・amp用にも。

イメージ画像は以下の通りです。色がわからなかったのでピンク系を入れてます。今みたら、title　#58b3bb　box　#ecf4f8　かもです。

https://gyazo.com/27bac8e5c1ded120dd80e7cfdc209109

html

https://notepad.pw/7xeh206

嬉しい機能の一つです。

https://wp-cocoon.com/tab-box-style/

これだけでも非常に嬉しいのですが、チェック/コメント/ポイント等の文字が手軽に変更できると嬉しいと思いました。

同じような方もいらっしゃいましたので気長にお待ちしております。
https://kamigamolife.com/work/cocoon-tabbox/

こちらを応用して「あわせて読みたい」なんてのもできそう。チャレンジしてみよう٩(๑❛ᴗ❛๑)۶

 

早速作ってみました♪がcocoonを更新したら、表示されなくなり(cssが上書きされたので当たり前ですが・・・再度やってみましたが出来ませんでしたorz)