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

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

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

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

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

 

\ 次世代のWordPressテーマ /

デザインに優れ、集客を後押しする機能が標準装備

 

吹き出しとは?

THE THORの会話吹き出し

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

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

 

MEMO

吹き出しの設定は、下記の方法で確認することができます。

  1. WordPressのダッシュボードから外観カスタマイズとクリックします。
  2. パーツスタイル設定[THE]吹き出し設定(個別ページ用)とクリックします。

吹き出しデザイン設定

 

カスタマイズ内容

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

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

PC表示

吹き出しカスタマイズのPC表示

スマホ表示

吹き出しカスタマイズのスマホ表示

 

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

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

  1. 子テーマの「style-user.css」を編集する。(外観/テーマの編集から変更できます)
  2. 追加CSSを編集する。(外観/カスタマイズ/追加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% - 100px);
}

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

/* --- スマホ時の設定 --- */
@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サイトがあなた好みに一歩近づきましたね。

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

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

 

\ 次世代のWordPressテーマ /

デザインに優れ、集客を後押しする機能が標準装備

ポチして頂くことで、ランキングの順位が上がります

人気ブログランキングへ
にほんブログ村 本ブログ 書評・レビューへ
Amazonでお得にお買い物
amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ!

チャージするたびに、プライム会員なら最大2.5%分通常会員なら最大2.0%分のAmazonポイントが貯まる。

\ TRY NOW!! /

\ こちらも読まれています! /