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

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

スタイル拡張でボックスの種類を増やして...
 
共有:
通知
すべてクリア

[解決済] スタイル拡張でボックスの種類を増やして欲しい

20 投稿
6 ユーザー
5 Reactions
4,987 表示
(@右近)
New Member
結合: 6年前
投稿: 3
Topic starter  

よろしくお願いします

Primary、Success、Info、Warning、Dangerボックスが用意されていますが

width90%くらいでセンターに白地ボーダー色だけのボックスが欲しいです


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 16988
 

何かデザインのサンプルとなるページとかはありますか?


   
(@右近)
New Member
結合: 6年前
投稿: 3
Topic starter  

例えばJINみたいなの

https://jin-theme.com/box/

シンプルな囲み枠が欲しいなー、と思いまして


   
 NAE
(@NAE)
Eminent Member
結合: 6年前
投稿: 20
 

横からすみません。

テーマ側で個別のデザインリクエストに対応するのは大変かなあと思います。

こちらのページを参考に、個別にカスタマイズされてはいかがでしょうか。

https://saruwakakun.com/html-css/reference/box


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 16988
 

リンクありがとうございます。

僕も、ボックススタイルはあと2種類(白抜き×色違いと、何か×色違い)ぐらいは追加しようと思っています。
全てのデザインを追加することできないので、NAEさんの参考ページにおまかせしてしまうことになると思います。

ただ、もし「こういうボックスへスタイルがあると助かる」というのがありましたら、当トピックにリクエストいただければ、幸いです。


   
(@tantaa)
Eminent Member Registered
結合: 7年前
投稿: 48
 

リクエストOKということなので、僕も便乗させて頂きます。

実は欲しいなぁと思っていました(笑)

ただ、囲みボックスは好き好みがありすぎるので、凝ったものは個人で追加するとして

基本的なものを

https://love-wave.com/css-waku/

このサイトの「普通の囲み枠」はシンプルで基本形なのでデフォルトで欲しいところです。

色合もサイトのものでいいと思います。←色の好みは個人差がある為

後は「タイトル付囲み枠」とかもあれば有り難いです。

 

いつもいつも有難うございます。

 


   
りこ reacted
(@右近)
New Member
結合: 6年前
投稿: 3
Topic starter  

おっ、需要あるみたいですね

カスタマイズすれば良いだけなんですが、Cocoonはできるだけデフォルトのまま使いたいと思いまして

白抜きのボックスはやっぱり欲しいですよねー


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 16988
 

とりあえず以下のページにある「超シンプル 普通の囲み枠」x(Cocoonの基本色分)は、一つは確定としたいともいます。
https://love-wave.com/css-waku/
あまり凝ったものだと、カスタマイズしたい方がCSSを打ち消すのに大変になるのでこれぐらいシンプルなのがちょうどよさそう。

あとは、シンプルな『タブっぽい 「タイトル付」 囲み枠』とかが需要が高そうかなと。

タイトルは

  • ポイント
  • 関連記事
  • 参考
  • ピックアップ
  • 公式

とかでしょうか。何か他に欲しい「ラベルタイトル」とかあれば書き込んでいただければ幸いです。


   
hajimaru, TanTaa and りこ reacted
(@lico)
Eminent Member Registered
結合: 7年前
投稿: 24
 

こんばんは

ごくごく普通の囲み枠ですが(笑)

参考にしていただき、ありがとうございます!

https://love-wave.com/css-waku/

使えそうなものがあるようでしたら、いくつでも使っていただけると嬉しいです。

どうぞ宜しくお願いします。


   
TanTaa reacted
 aiai
(@aiai)
New Member Registered
結合: 6年前
投稿: 3
 

こんばんは、私も便乗させてください!

ボックスの中をリスト表示できるようにしていただきたいです。(番号表示あり、なしとも)

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

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


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 16988
 

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

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

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


   
 aiai
(@aiai)
Eminent Member
結合: 6年前
投稿: 25
 

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

なるほど、そうなんですね。

希望の優先度としては

ボックス内をリスト表示可能 > ラベルタイトル手打ち

なので、ボックス内のリスト表示ができる、方がありがたいです。

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

希望の優先度としては

ボックス内をリスト表示可能 > ラベルタイトル手打ち

これはどのように表示されたか不明ですが、プラグインのアドクイックタグでしたら

 

https://notepad.pw/7xeh206

上▲開始タグ、下▼終了タグ。

</div>

と記入していたら、ビジュアル画面からリストを反転、テキストをクリックしビジュアル画面を再表示することで『リスト表示可能 > ラベルタイトル手打ち』どちらも可能ですよ。

※『テキスト』は消す必要ありますが。

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

プラグイン、adQuickTag用のボタンメニューが増えてしまいますが、ビジュアル・テキストのどちらでもタグの追加・タイトルラベルの手打ちは可能です。


   
 aiai
(@aiai)
Eminent Member
結合: 6年前
投稿: 25
 

 

 

と記入していたら、ビジュアル画面からリストを反転、テキストをクリックしビジュアル画面を再表示することで『リスト表示可能 > ラベルタイトル手打ち』どちらも可能ですよ。

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

とても申し訳ないのですが、タグやCSSなどまだ勉強し始めたところで、上記説明いただいたことが理解できません。

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

もしかしたら「手打ち」の言葉の使い方でミスリードしてしまったかもしれないので、もう一度やりたいことを述べさせていただきますと、

1)現在利用可能な”ボックス(アイコン)”と”ボックス(案内)”の中をリスト表示(番号表示あり、なしとも)できるようになってほしい

2)”ボックス(案内)”にラベルがつけられるようになるのなら、ラベルを選択の中から選ぶより自由テキストを”手打ち”できるといい

という意味の「手打ち」です。誤解を招いていたらすみませんでした。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

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


   
 aiai
(@aiai)
Eminent Member
結合: 6年前
投稿: 25
 

ありがとうございます、でもすみません、うまくいきません。
コードは 外観>カスタマイズ>追加CSSに入れ、adQuickTagには添付画像のように設定しました。


ビジュアルエディタで3行のテキストを打ち、番号付きリストにする
その3行をハイライト(反転ってハイライトのことですよね)、テキストエディタにして登録した”リストボックス(ポイント)をクリック

この手順の結果が以下です(順にビジュアルエディタ、テキストエディタ、プレビューの画面)
1行目しかボックスの中に入らず、ボックスラベルはエディタ上では存在しているのに、プレビューだとなくなっています。エディタ上でもラベル位置がリストの3行より下に来ています。
 

ビジュアルエディタの画面

https://gyazo.com/e52f3256ae63a6ac4b99eab4e9e523b6

テキストエディタの画面

https://gyazo.com/a46e9fc15c8c2245cccfa106cd0b701d

プレビュー画面

https://gyazo.com/5e719973355c13bb6e65e43b531ded27

なんどもお手をわずらわせてしまった挙句に申し訳ありませんが、どこが間違っているのか自分ではわからないので、自分でのカスタマイズは諦めて実装いただけるのを待った方がいいかのなと感じています。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

ちょっと違ってますねぇ。上述#2651の通りで開始タグに沢山いれちゃうます。

https://notepad.pw/7xeh206

上▲開始タグ、下▼終了タグ。

</div>

NotePadの方が開始タグです。管理画面上では青く反転させてください。

あとeditor-style.cssにもCSSを追記すれば分かりやすいですよ。


   
 aiai
(@aiai)
Eminent Member
結合: 6年前
投稿: 25
 

なるほど!上下の読み取りが間違ってました。ありがとうございます!

https://gyazo.com/978603582ea6e0242dfb7f927de82d69

思った通りの手順ではないですが、テキストエディタでちょこっと編集したら

ここまで表示できるようになりました。ありがとうございます。

すみません、もうひとつお聞きしていいでしょうか。

editor-style.cssってどこにあるのでしょう?

 


   
 ukon
(@ukon)
New Member
結合: 6年前
投稿: 1
 

1つのトピックにつき1つの質問

タイトルと趣旨が違うし

「カスタマイズ相談」のトピックでやった方がいいよ

 


   
 aiai
(@aiai)
Eminent Member
結合: 6年前
投稿: 25
 

 

「カスタマイズ相談」のトピックでやった方がいいよ 

すみません、そうします。ご指摘ありがとうございます。


   
共有:

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

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

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

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

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

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

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

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