キャラの画像サイズの変更

  • M

    キャラの吹き出しについてです。
    [chat face="○○○.png" name="□□□" align="left" border="gray" bg="gray" style="maru"]

    このコードのキャラの円を大きくするためのコードが、以下に記載されているかと思います。
    https://jin-theme.com/manual/fukidashi-icon/

    このコードをコピペして、CSSに貼って色々数字変更したのですが、円が大きくなりません。
    CSSは全く詳しくない為、コードのどこを変更したら円が大きくなるのか、教えて頂けないでしょうか？

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :

    0 1 件の返信

  • @mbpyd325 さん

    こんにちは！

    こちらで検証してみますので、該当する記事のURLをご共有いただけますか...？？
    （追加CSSにコードをコピペしたままの状態にしておいていただけると助かります）

    よろしくお願いいたします！

    0
  • M

    私はCSSに非常に弱いのですが、balloon-iconのサイズを変更してみました。
    （セリフのサイズも変えないとダメなのでしょうか？）
    貼り付けたCSSは以下になります。

    /吹き出しのアイコンを大きくする/
    .balloon-box {
    padding-bottom: 20px;
    }

    @media (min-width: 768px){

    .balloon-icon {
    width:120px;
    height:120px;
    }

    .balloon-icon img{
    width:120px;
    }

    .balloon-right .balloon-serif{
    margin: 0 125px 40px 125px;
    }

    .balloon-left .balloon-serif{
    margin: 0 125px 40px 125px;
    }

    .icon-name{
    width: 100px;
    top: 105px;
    font-size: 12px;
    }
    }

    @media (max-width: 767px)
    {

    .balloon-icon {
    width:100px;
    height:100px;
    }

    .balloon-icon img{
    width:100px;
    }

    .balloon-right .balloon-serif{
    margin: 0 98px 30px 0px;
    }

    .balloon-left .balloon-serif{
    margin: 0 0px 30px 98px;
    }

    .icon-name{
    width: 80px;
    top:82px;
    font-size: 11px;
    }
    }

    適当なURLを記載しますので、お手数ですが確認の方、宜しくお願いします。。
    https://poikatsu-walker.com/tokyu-card-jal-tokyu-card-difference/

    0 1 件の返信

  • @mbpyd325 さん

    URLありがとうございます！

    追加CSSの先頭に貼り付けると反映されるので、
    反映されない原因の1つは追加CSS内のどこかのコードに不備があるんじゃないかと思います。。

    追加CSSの先頭に↓のコードを貼り付けてみてもらえますか...？？

    .balloon-box {
padding-bottom: 20px;
}

.balloon-icon.maru {
border-radius: 50px;
}

@media (min-width: 768px){
    
.balloon-icon {
width:100px;
height:100px;
}

.balloon-icon img{
width:100px;
}
    
.balloon-right .balloon-serif{
margin: 0 125px 40px 125px;
}

.balloon-left .balloon-serif{
margin: 0 125px 40px 125px;
}
    
.icon-name{
width: 100px;
top: 105px;
font-size: 12px;
    }
}

@media (max-width: 767px)
{
    
.balloon-icon {
width:80px;
height:80px;
}

.balloon-icon img{
width:80px;
}
    
.balloon-right .balloon-serif{
margin: 0 98px 30px 0px;
}

.balloon-left .balloon-serif{
margin: 0 0px 30px 98px;
}
    
.icon-name{
width: 80px;
top:82px;
font-size: 11px;
}   
}

    （一部コードを修正してあります）

    0
  • M

    円が大きくなりました！
    先頭に貼り付けて解決することもあるのですね。
    回答ありがとうございました！

    0 1 件の返信

  • @mbpyd325 さん

    ご報告ありがとうございます！

    0