ワードプレスのテーマ変更で吹き出しが無くなる現象をCSSで修正したい。

初心者で質問の仕方なども悪くすみませんが宜しくお願い致します。

前提・実現したいこと

ワードプレスでブログを引っ越ししたいと思っておりますが、引っ越しを機会にDIVERというテーマからaffinger5(wing)に変更しようとしています。

当該ブログでは会話形式の吹き出しを多用しているのですが、DIVER → affinger5に変更すると吹き出し機能が変わるからか上手く表示されません。

数がそれなりにある為、追加CSSにて追記して吹き出しを成立できるようにしたいと思っているのですが、うまくいっていません。

発生している問題

DIVER → affinger5に変更すると吹き出し機能が変わるからか上手く表示されません。
吹き出しが無くなり、画像がそのまま表示されています。

以下、DIVERで入力しているコードのコピーです。一部削除しております。

<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div>
<div>
<div class="voice clearfix left n_bottom">
<div class="icon">

<img data-src="https://fu.../wp-content/uploads/....jpg" class=" lazyloaded" scale="0" src="https://fu....jpg" />
<div class="name">...</div>
</div>
<div class="text sc_balloon left white">......</div>
</div>
</div>
<div></div>
<div></div>
<div>
<div class="voice clearfix right n_bottom">
<div class="icon">

試したこと・入力している追加CSSコード

affinger5で使うために私が人から聞きながら作ってみたコードでは治りませんでした。

これをベースにする必要はありませんが、うまく会話を復活する方法をご教授いただければ幸いです。

.sbp-l {
    margin-right: 100px;
}

.sbp-r {
    flex-direction: row-reverse;
    margin-left: 100px;
}
.speech-wrap {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
}
.speech-person {
    width: 12%;
    min-width: 12%;
}
.speech-icon img {
    border-radius: 50%;
    border: 2px solid #ccc;
    width: 100%;
  margin:0;
}
.speech-name {
    text-align: center;
    font-size: 13px;
}
div.speech-balloon p {
    padding: 0;
}
.sbp-l .speech-balloon {
    margin-left: 20px;
}

div.speech-balloon {
    height: 100%;
    position: relative;
    padding: 10px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 6px;
    word-break: break-all;
}
.speech-balloon::before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -12px;
    top: 10px;
    border-right: 12px solid #ccc;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}
.speech-balloon::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -9px;
    top: 10px;
    border-right: 12px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.sbp-r .speech-balloon {
    margin-right: 20px;
}
.sbp-r .speech-balloon::before {
    right: -12px;
    left: auto;
    border-left: 12px solid #ccc;
    border-right: none;
}
.sbp-r .speech-balloon::after {
    right: -9px;
    left: auto;
    border-left: 12px solid #fff;
    border-right: none;
}

補足情報（FW/ツールのバージョンなど）

使用中のワードプレスバージョン
WordPress 5.2.5を使用

使用中のプラグイン
Akismet Anti-Spam
Classic Editor
Customizer Export/Import
Google XML Sitemaps
Jetpack by WordPress.com
Table of Contents Plus
TinyMCE Advanced
WebSub/PubSubHubbub

どうぞよろしくお願い致します。

m.ts10806

2020/02/14 21:43

[WordPress]もタグに追加してください。 [CSS]だけだと答える人いないと思います。

Lhankor_Mhy

2020/02/15 00:25

「うまくいっていません。」とのことですが、具体的にはどうなっていますか？また、どのような結果を期待しているのですか？結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3