『THE THOR』の吹き出しをカスタマイズ【画像を大きくしてみた】

こんにちは！ 吹き出しの大きさもバッチリのネイネイ(@NEYNEYx2)です。

この記事では、WordPressテーマ『THE THOR（ザ・トール）』の吹き出しの画像を大きくカスタマイズする方法のご紹介をしていきます。

THE THOR（ザ・トール）で吹き出しをカスタマイズする時の参考にしてください。

 

 

 

吹き出しとは？

THE THOR（ザ・トール）では、会話吹き出しが上記の図のように「背景吹き出し」と「ボーダー吹き出し」の2種類が用意されていています。

また、会話吹き出しは、左側と右側どちらにも表示することができます。

 

 

カスタマイズ内容

下記が、吹き出しの大きさをカスタマイズした画像になります。

吹き出しの画像の大きさをPC表示のときは60pxから85pxに変更、スマホ表示のときは60pxから75pxに変更しています。

 

THE THOR（ザ・トール）の吹き出しをカスタマイズ

ここでは、説明したカスタマイズ内容をCSSファイルにコピペしていきます。 CSSファイルへのコピペは下記のどちらか、お好みな方で編集ください。

それでは、準備が整いましたら下記のCSSコードを、CSSファイルにコピペしてください。

/* ------------------------------------- */
/* ---------- 吹き出しカスタム ---------- */
/* ------------------------------------- */

.content .balloon .balloon__img-right div {
    width: 85px; /* imgの大きさ */
    height: 85px;
    margin-bottom: 5px;
    border: 3px solid #f5f5f5;
}

.content .balloon .balloon__img-left div {
    width: 85px; /* imgの大きさ */
    height: 85px;
    margin-bottom: 5px;
    border: 3px solid #f5f5f5;
}

.content .balloon .balloon__img {
    width: 85px; /* コメントの位置 */
    height: 85px;
}

.content .balloon .balloon__name {
    font-size: 1.2rem; /* 名前 */
}

.content .balloon-boder .balloon__text {
    margin-top: 10px; /* コメント上下位置 */
    max-width: calc(100% - 105px);
}

.content .balloon .balloon__text {
    margin-top: 10px; /* コメント上下位置 */
    max-width: calc(100% - 105px);
}

/* --- スマホ時の設定 --- */
@media only screen and (max-width: 480px){
.content .balloon .balloon__img-right div {
    width: 75px; /* imgの大きさ */
    height: 75px;
    margin-left: auto;
}

.content .balloon .balloon__img-left div {
    width: 75px; /* imgの大きさ */
    height: 75px;
}

.content .balloon .balloon__img-right {
    margin-left: 5px;
}

.content .balloon .balloon__img-left {
    margin-right: 5px;
}

.content .balloon-boder .balloon__text {
    max-width: calc(100% - 90px);
}

.content .balloon .balloon__text {
    max-width: calc(100% - 90px);
}
}

 

以上で、吹き出しの大きさカスタマイズは完了です。

 

キャッシュの削除

カスタマイズをして、内容がうまく反映されない場合はキャッシュの削除をしてみましょう。

実際はカスタマイズ内容が反映されているのに、古いキャッシュを見てしまっている場合に有効な方法です。

まとめ

どうですか？　吹き出しをカスタマイズすることができましたか。これで、Webサイトがあなた好みに一歩近づきましたね。

この記事を通して、少しでもあなたの参考になったら幸いです。

それでは、まったです。　(‘◇’)ゞ