サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年4月9日 20:01
よろしくお願いします
Primary、Success、Info、Warning、Dangerボックスが用意されていますが
width90%くらいでセンターに白地ボーダー色だけのボックスが欲しいです
2018年4月9日 22:51
何かデザインのサンプルとなるページとかはありますか？
2018年4月10日 18:23
横からすみません。
テーマ側で個別のデザインリクエストに対応するのは大変かなあと思います。
こちらのページを参考に、個別にカスタマイズされてはいかがでしょうか。
2018年4月10日 20:30
リンクありがとうございます。
僕も、ボックススタイルはあと2種類（白抜き×色違いと、何か×色違い）ぐらいは追加しようと思っています。
全てのデザインを追加することできないので、NAEさんの参考ページにおまかせしてしまうことになると思います。
ただ、もし「こういうボックスへスタイルがあると助かる」というのがありましたら、当トピックにリクエストいただければ、幸いです。
2018年4月10日 22:21
リクエストOKということなので、僕も便乗させて頂きます。
実は欲しいなぁと思っていました(笑）
ただ、囲みボックスは好き好みがありすぎるので、凝ったものは個人で追加するとして
基本的なものを
https://love-wave.com/css-waku/
このサイトの「普通の囲み枠」はシンプルで基本形なのでデフォルトで欲しいところです。
色合もサイトのものでいいと思います。←色の好みは個人差がある為
後は「タイトル付囲み枠」とかもあれば有り難いです。
いつもいつも有難うございます。
りこ reacted
トピックスターター 2018年4月10日 22:56
おっ、需要あるみたいですね
カスタマイズすれば良いだけなんですが、Cocoonはできるだけデフォルトのまま使いたいと思いまして
白抜きのボックスはやっぱり欲しいですよねー
2018年4月11日 23:29
とりあえず以下のページにある「超シンプル 普通の囲み枠」x（Cocoonの基本色分）は、一つは確定としたいともいます。
https://love-wave.com/css-waku/
あまり凝ったものだと、カスタマイズしたい方がCSSを打ち消すのに大変になるのでこれぐらいシンプルなのがちょうどよさそう。
あとは、シンプルな『タブっぽい 「タイトル付」 囲み枠』とかが需要が高そうかなと。
タイトルは
- ポイント
- 関連記事
- 参考
- ピックアップ
- 公式
とかでしょうか。何か他に欲しい「ラベルタイトル」とかあれば書き込んでいただければ幸いです。
2018年4月12日 00:51
こんばんは
ごくごく普通の囲み枠ですが（笑）
参考にしていただき、ありがとうございます！
https://love-wave.com/css-waku/
使えそうなものがあるようでしたら、いくつでも使っていただけると嬉しいです。
どうぞ宜しくお願いします。
TanTaa reacted
2018年4月27日 19:40
こんばんは、私も便乗させてください！
ボックスの中をリスト表示できるようにしていただきたいです。（番号表示あり、なしとも）
ラベルタイトルも自分で手打ちできるといいのですが、難しいのでしょうか。
よろしくお願いいたします。
2018年4月27日 22:01
ラベルタイトルも自分で手打ちできるといいのですが、難しいのでしょうか。
これはちょっと、ビジュアルエディターの「スタイル」と書かれた、ドロップダウンリストで利用する方法では出来ないような気がします。
他テーマとかだと、ショートコードとかを利用しされているのではないでしょうか。
けれどいろいろ、参考にさせていただきます。
2018年4月28日 16:11
これはちょっと、ビジュアルエディターの「スタイル」と書かれた、ドロップダウンリストで利用する方法では出来ないような気がします。
他テーマとかだと、ショートコードとかを利用しされているのではないでしょうか。
なるほど、そうなんですね。
希望の優先度としては
ボックス内をリスト表示可能 ＞ ラベルタイトル手打ち
なので、ボックス内のリスト表示ができる、方がありがたいです。
2018年4月28日 19:00
希望の優先度としては
ボックス内をリスト表示可能 ＞ ラベルタイトル手打ち
これはどのように表示されたか不明ですが、プラグインのアドクイックタグでしたら
上▲開始タグ、下▼終了タグ。
</div>
と記入していたら、ビジュアル画面からリストを反転、テキストをクリックしビジュアル画面を再表示することで『リスト表示可能 ＞ ラベルタイトル手打ち』どちらも可能ですよ。
※『テキスト』は消す必要ありますが。
これはちょっと、ビジュアルエディターの「スタイル」と書かれた、ドロップダウンリストで利用する方法では出来ないような気がします。
プラグイン、adQuickTag用のボタンメニューが増えてしまいますが、ビジュアル・テキストのどちらでもタグの追加・タイトルラベルの手打ちは可能です。
2018年4月28日 23:14
と記入していたら、ビジュアル画面からリストを反転、テキストをクリックしビジュアル画面を再表示することで『リスト表示可能 ＞ ラベルタイトル手打ち』どちらも可能ですよ。
かうたっくさん、ありがとうございます。
とても申し訳ないのですが、タグやCSSなどまだ勉強し始めたところで、上記説明いただいたことが理解できません。
adQuickTagのブラグインは入れていたので、書いていただいたタグを開始・終了にして試してみましたが、希望する表示にはなりませんでした。
もしかしたら「手打ち」の言葉の使い方でミスリードしてしまったかもしれないので、もう一度やりたいことを述べさせていただきますと、
１）現在利用可能な”ボックス（アイコン）”と”ボックス（案内）”の中をリスト表示（番号表示あり、なしとも）できるようになってほしい
２）”ボックス（案内）”にラベルがつけられるようになるのなら、ラベルを選択の中から選ぶより自由テキストを”手打ち”できるといい
という意味の「手打ち」です。誤解を招いていたらすみませんでした。
2018年4月29日 00:11
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 かもです。
2018年4月29日 16:12
ありがとうございます、でもすみません、うまくいきません。
コードは 外観＞カスタマイズ＞追加CSSに入れ、adQuickTagには添付画像のように設定しました。
ビジュアルエディタで３行のテキストを打ち、番号付きリストにする
その３行をハイライト（反転ってハイライトのことですよね）、テキストエディタにして登録した”リストボックス（ポイント）をクリック
この手順の結果が以下です（順にビジュアルエディタ、テキストエディタ、プレビューの画面）
１行目しかボックスの中に入らず、ボックスラベルはエディタ上では存在しているのに、プレビューだとなくなっています。エディタ上でもラベル位置がリストの３行より下に来ています。
ビジュアルエディタの画面
https://gyazo.com/e52f3256ae63a6ac4b99eab4e9e523b6
テキストエディタの画面
https://gyazo.com/a46e9fc15c8c2245cccfa106cd0b701d
プレビュー画面
https://gyazo.com/5e719973355c13bb6e65e43b531ded27
なんどもお手をわずらわせてしまった挙句に申し訳ありませんが、どこが間違っているのか自分ではわからないので、自分でのカスタマイズは諦めて実装いただけるのを待った方がいいかのなと感じています。
2018年4月29日 20:23
ちょっと違ってますねぇ。上述#2651の通りで開始タグに沢山いれちゃうます。
上▲開始タグ、下▼終了タグ。
</div>
NotePadの方が開始タグです。管理画面上では青く反転させてください。
あとeditor-style.cssにもCSSを追記すれば分かりやすいですよ。
2018年4月29日 21:09
なるほど！上下の読み取りが間違ってました。ありがとうございます！
https://gyazo.com/978603582ea6e0242dfb7f927de82d69
思った通りの手順ではないですが、テキストエディタでちょこっと編集したら
ここまで表示できるようになりました。ありがとうございます。
すみません、もうひとつお聞きしていいでしょうか。
editor-style.cssってどこにあるのでしょう？
2018年4月29日 21:19
1つのトピックにつき1つの質問
タイトルと趣旨が違うし
「カスタマイズ相談」のトピックでやった方がいいよ
2018年4月30日 09:12
「カスタマイズ相談」のトピックでやった方がいいよ
すみません、そうします。ご指摘ありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。