現在「イノセンス」スキンを適用中です。

スタイル拡張でボックスの種類を増やして欲しい | 要望 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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

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


右近
 右近
(@右近)
ゲスト
結合: 3年前
投稿: 3
Topic starter  

よろしくお願いします

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

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


未解決
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

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


右近
 右近
(@右近)
ゲスト
結合: 3年前
投稿: 3
Topic starter  

例えばJINみたいなの

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

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


NAE
 NAE
(@NAE)
ゲスト
結合: 3年前
投稿: 20
 

横からすみません。

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

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

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

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


TanTaa
(@tantaa)
Trusted Member
結合: 3年前
投稿: 48
 

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

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

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

基本的なものを

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

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

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

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

 

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

 


りこ 件のいいね!
右近
 右近
(@右近)
ゲスト
結合: 3年前
投稿: 3
Topic starter  

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

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

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

タイトルは

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

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


hajimaru, TanTaaりこ 件のいいね!
りこ
(@lico)
Eminent Memberサイト
結合: 3年前
投稿: 24
 

こんばんは

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

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

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

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

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


TanTaa 件のいいね!
aiai
(@aiai)
New Member
結合: 3年前
投稿: 3
 

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

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

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

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

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


aiai
 aiai
(@aiai)
ゲスト
結合: 3年前
投稿: 25
 

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

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

希望の優先度としては

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

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

 


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 3年前
投稿: 4764
かうたっく - Facebook
 

希望の優先度としては

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

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

 

https://notepad.pw/7xeh206

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

</div>

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

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

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

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


aiai
 aiai
(@aiai)
ゲスト
結合: 3年前
投稿: 25
 

 

 

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

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

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

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

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

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 3年前
投稿: 4764
かうたっく - Facebook
 

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
(@aiai)
ゲスト
結合: 3年前
投稿: 25
 

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


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

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

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

https://gyazo.com/e52f3256ae63a6ac4b99eab4e9e523b6

テキストエディタの画面

https://gyazo.com/a46e9fc15c8c2245cccfa106cd0b701d

プレビュー画面

https://gyazo.com/5e719973355c13bb6e65e43b531ded27

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


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 3年前
投稿: 4764
かうたっく - Facebook
 

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

https://notepad.pw/7xeh206

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

</div>

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

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


aiai
 aiai
(@aiai)
ゲスト
結合: 3年前
投稿: 25
 

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

https://gyazo.com/978603582ea6e0242dfb7f927de82d69

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

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

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

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

 


ukon
 ukon
(@ukon)
ゲスト
結合: 3年前
投稿: 1
 

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

タイトルと趣旨が違うし

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

 


aiai
 aiai
(@aiai)
ゲスト
結合: 3年前
投稿: 25
 

 

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

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


共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年9ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年7ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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