投稿者:: わいひら

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

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

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

スタイル拡張でボックスの種類を増やして欲しい | 要望 | 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

かうたっくさん、いつもありがとうございます。

自己解決しました。

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

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

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

ｘｘｘ

うまく表示できず申し訳ありません。

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

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

それでも可能ですけど、けっこう面倒かもしれない…と思います。

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

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

https://github.com/yhira/cocoon/blob/master/lib/tinymce/html-tags.php#L40

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

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

例えば以下のように

https://notepad.pw/y7w1h7wc

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

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

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

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

かうたっくさん>コメントありがとうございます。

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

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

タブラベルの表記に関しては、英語か、日本語で僕も結構悩みました。
なので、結構日本語にしたい方もおられると思うので、カスタマイズ方法をまとめておきました。

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