サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
10/05/2022 12:40 am
こんにちは。いつもお世話になっております。
こちらでお尋ねすることではないかもしれませんが、いろいろ調べたのですがどうしても分からなかったので、お尋ねさせてください。
サイト中の表などのタイトルに使うための、長四角の吹き出しのような形（canvaで作って添付しました）はどうやったら入手できるのか、教えて頂けませんでしょうか。
他の方々のサイトでは時々見かけるのですが…。
cocoonのマイクロバルーンの出っ張っている部分を左寄せにしたような形です。マイクロバルーンをカスタマイズすればよろしいのでしょうか？
それとも何か表のプラグインをインストールすれば、一緒についてくるものなのでしょうか？
恐れ入りますがアドバイスを頂けましたら助かります。
ちなみに私はカスタマイズは苦手です！
また、表はワードプレスに入っているものを、あまり気に入っていませんが、使っております。
宜しくお願い致します。
10/05/2022 7:04 pm
かおりさん
私は、あまりその手のものを使わないので、存じていないのですが…。
（おそらく使ったことがある、使おうと調べたことがある方でないと、ご存知ないかもしれないです。）
正直、「アバウトにこういうもの」と、ご提示いただくよりも、実際の参考サイトのURL等をお知らせていただく方が、調べやすいと思います。
それでも分からない可能性はありますけれど。
ちなみに、そのサイトがどういうプラグインを使っているかを調べる方法はいくつかあるみたいです。
どれくらい正確なのかは分かりませんし、そのサイトがWordPressでなければ、また違う話だとも思いますし。
（そのサイトがWordPressかどうかを調べるサービスもあるみたいですよ。）
以下は、URLを入力すると、テーマやプラグインを調べてくれるみたいです。
WordPress Theme Search
https://whatwpthemeisthat.com/
以下は、ChromeとFirefoxの拡張機能で、やはりプラグインを調べてくれるみたいです。
WordPress Theme and Plugins Detector
Chrome用
https://chrome.google.com/webstore/detail/wordpress-theme-detector/jdflfokckhmchfpokjmpcoblghjngjja
Firefox用
https://addons.mozilla.org/ja/firefox/addon/wp-theme-and-plugins-detector/
その手のサービスや拡張機能は、他にもあるようです。
検索すると、いくつか見つかりますよ。
10/05/2022 7:24 pm
ちなみに、Cocoonのマイクロバルーンのとがった部分？を移動したいということであれば、以下でいけると思います。
.micro-balloon::before,
.micro-balloon::after {
left: 10%;
}
数字は、お好みで調整してください。
10%だと、以下のような感じでした。
かおり reacted
Topic starter
10/05/2022 8:57 pm
mk2様
早速のアドバイスをどうもありがとうございます！
テーマやプラグインを調べられるURLってあるのですね、知りませんでした！
早速試してみたのですが、テーマしか分からず、プラグインは特定できませんでした。
でもmk2様が教えてくださったカスタマイズでうまくいったので、とりあえずマイクロバルーンのカスタマイズで対応させていただこうかなと思います。
すみませんが、甘えついでに、もう１つお尋ねさせてください（すみません！！）
マイクロバルーンのとがった部分を左側に動かせることは分かったのですが、下向きに長くカスタマイズすることは可能でしょうか？
つまり、左側に10%ほど動かし、同時に下向きに少し長くするような？？？
参考までに下手な手書きの絵を添付させて頂きました。
もしもそういうカスタマイズが可能ならば、教えて頂けると助かります。
お忙しいところすみません！
よろしくお願い致します。
10/05/2022 9:45 pm
かおりさん
早速試してみたのですが、テーマしか分からず、プラグインは特定できませんでした。
ということは、そのテーマの機能なのかもしれないですね。
HTMLのソースと、CSSを真似すれば、おそらくできるとは思います。
下向きに長くカスタマイズすることは可能でしょうか？
できると思います。
環境によって、微妙に違いがあると思いますので、その辺はご調整いただくとして・・・。
以下を追加するとできそうです。
.micro-balloon::before {
border-top-width: 30px;
}
.micro-balloon::after {
border-top-width: 28px;
}
少々オーバーに伸ばしていますので、数字は調整してください。
上記と、先程の左の移動であわせると、以下のような感じでした。
ただ、下に伸ばすと、下の要素と重なってしまうかもしれないです。
その場合は、下の間隔も調整する必要があると思います。
その場合は、下の間隔も調整する必要があると思います。
.article .micro-balloon {
margin-bottom: 2.0em;
}
この数字もお好みで調整してください。
（環境によって違うと思いますので。）
（環境によって違うと思いますので。）
下の要素との間隔が問題なければ、必要ないかと思います。
10/05/2022 11:23 pm
やってみました。
背景色があるといいように思えました。添付画像のオレンジの背景色は、ブロックの「色設定」でつけました。
以下の CSS を子テーマの style.css に追加します。コメントを書いていますので、お好みでご変更ください。尚、ブロックの「色設定」を反映させるようにしています。
.micro-balloon::before,
.micro-balloon::after {
/* 値を小さくすると左に寄ります。50%で真ん中。 */
left: 16%;
/* 変更の必要なし */
top: 100%;
}
/* 枠線と同じ色の三角形。「色設定」で背景色をつけた場合は背景色と同じ色の三角形。 */
.micro-balloon::before,
.has-background.micro-balloon::after {
/* 最初が高さ、2番目が幅、3番目と4番目は0にする */
border-width: 14px 12px 0 0;
/* 変更の必要なし */
margin: 0;
}
/* 背景色と同じ色の三角形。↑の三角形の上に配置される。 */
.micro-balloon::after {
/* 最初が高さ、2番目が幅、3番目と4番目は0にする */
border-width: 12.7px 10.5px 0 0;
/* 下にある三角形が枠線に見えるように調整する */
margin: -1px 0 0 1px;
}
This post was modified 2年前 by Akira
11/05/2022 12:46 am
既に回答されていました笑
/* 下寄り */
.micro-balloon.micro-bottom:before {
border-width: 0 0 10px 10px;
}
.micro-balloon.micro-bottom:after {
border-width: 0 0 8px 8px;
}
/* 上寄り */
.micro-balloon.micro-top:before{
border-width: 10px 10px 0 0;
}
.micro-balloon.micro-top:after {
border-width: 8px 8px 0 0;
}
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。