かおりさん

私は、あまりその手のものを使わないので、存じていないのですが…。
（おそらく使ったことがある、使おうと調べたことがある方でないと、ご存知ないかもしれないです。）

正直、「アバウトにこういうもの」と、ご提示いただくよりも、実際の参考サイトの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/

その手のサービスや拡張機能は、他にもあるようです。
検索すると、いくつか見つかりますよ。

ちなみに、Cocoonのマイクロバルーンのとがった部分？を移動したいということであれば、以下でいけると思います。

.micro-balloon::before,
.micro-balloon::after {
    left: 10%;
}

数字は、お好みで調整してください。

10%だと、以下のような感じでした。

mk2様

早速のアドバイスをどうもありがとうございます！

テーマやプラグインを調べられるURLってあるのですね、知りませんでした！
早速試してみたのですが、テーマしか分からず、プラグインは特定できませんでした。

でもmk2様が教えてくださったカスタマイズでうまくいったので、とりあえずマイクロバルーンのカスタマイズで対応させていただこうかなと思います。

すみませんが、甘えついでに、もう１つお尋ねさせてください（すみません！！）

マイクロバルーンのとがった部分を左側に動かせることは分かったのですが、下向きに長くカスタマイズすることは可能でしょうか？

つまり、左側に10%ほど動かし、同時に下向きに少し長くするような？？？

参考までに下手な手書きの絵を添付させて頂きました。

もしもそういうカスタマイズが可能ならば、教えて頂けると助かります。

お忙しいところすみません！
よろしくお願い致します。

かおりさん

投稿者:: @kaorishokuji-takuhai

早速試してみたのですが、テーマしか分からず、プラグインは特定できませんでした。

ということは、そのテーマの機能なのかもしれないですね。

HTMLのソースと、CSSを真似すれば、おそらくできるとは思います。

投稿者:: @kaorishokuji-takuhai

下向きに長くカスタマイズすることは可能でしょうか？

できると思います。

環境によって、微妙に違いがあると思いますので、その辺はご調整いただくとして・・・。

以下を追加するとできそうです。

.micro-balloon::before {
    border-top-width: 30px;
}
.micro-balloon::after {
    border-top-width: 28px;
}

少々オーバーに伸ばしていますので、数字は調整してください。

上記と、先程の左の移動であわせると、以下のような感じでした。

.article .micro-balloon {
    margin-bottom: 2.0em;
}

やってみました。

背景色があるといいように思えました。添付画像のオレンジの背景色は、ブロックの「色設定」でつけました。

以下の 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;
}

既に回答されていました笑

/* 下寄り */
.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;
}

mk2様
Akira様
chu-ya様

早速のアドバイスどうもありがとうございます！！

それぞれのCSSでうまくいきました！！

微修正の仕方まで詳しく教えてくださり、本当に助かりました！！

あとはコンテンツをなんとか頑張らねば(笑)

とても助かりました。ありがとうございました！！