下に出る吹き出しの名前の位置とかを変更する（PORIPUtearsユーザー限定）

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
[kjk_temp id=”2523″]

この記事では
下に出る吹き出しの名前の位置を変更する方法を説明。

CUSTOM　POINT

長い名前でもキレイに表示できます。

こんな感じで変更

Before

落ち込みMENくん

もし人生がカメラならボクはレンズキャップをしたままなのさ。

After

落ち込みMENくん

もし人生がカメラならボクはレンズキャップをしたままなのさ。

こんなところを変更

[kjk_balloon id=”13″]ちなみにオレ（くまの吹き出し）は、ふきだしクリエイターをカスタマイズしたやつやよ[/kjk_balloon]

ふきだしクリエイターについて

プラグインの吹き出しクリエイターを使ってみたら最高だった

[kjk_temp id=”3320″]

[kjk_temp id=”3368″] [kjk_temp id=”7237″]

カスタマイズの準備

下に出る吹き出しのショートコード

名前
吹き出しの中の言葉

このコードをビジュアルエディタに貼り付ければ、下に出る吹き出しが表示されます。

注意

下に出る吹き出しはPORIPUtearsのみの機能です。

[kjk_temp id=”3370″]

カスタマイズコードの追加

CSSコード（コメントあり）

/*--------------------------------------
  PORIPUtears　下に出る吹き出し
--------------------------------------*/
.saysprp {/*画像とふきだしを含めた全体*/
    position: relative;/*基準にする*/
}
.saysprp .faceicon span {/*名前部分*/
    position: absolute;/*自由に動けるように*/
    top: 80px;/*上から80px*/
    left: 100px;/*左から100px*/
    color: #999999;/*文字色*/
    font-size: 12px;/*文字のサイズ*/
    line-height: 20px;/*文字の高さ*/
    font-weight: 500;/*文字の太さ*/
}
.saysprp .fuki {/*吹き出し*/
    border: 2px solid #eaedf2;/*枠線*/
    margin: 1em 0 1.5em;/*外側の余白*/
}
.saysprp .fuki:before {/*吹き出しの三角部分*/
    left: 40px;/*左からの位置*/
}
.saysprp .fuki:after {/*吹き出しの尖ったアレ*/
    border-bottom-color: #eaedf2;/*枠線*/
    top: -11px;/*上からの位置*/
    left: 40px;/*左からの位置*/
}
@media only screen and (max-width: 480px){/*スマホ表示*/
.saysprp .faceicon span {/*名前の部分*/
    top: 60px;
    left: 80px;
}
.saysprp .fuki:before {/*吹き出しの三角部分*/
    left: 28px;
}
.saysprp .fuki:after {/*吹き出しの三角部分*/
    left: 28px;
}}

CSSコード（コメントなし）

/*--------------------------------------
  PORIPUtears　下に出る吹き出し
--------------------------------------*/
.saysprp {
    position: relative;
}
.saysprp .faceicon span {
    position: absolute;
    top: 80px;
    left: 100px;
    color: #999999;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
}
.saysprp .fuki {
    border: 2px solid #eaedf2;
    margin: 1em 0 1.5em;
}
.saysprp .fuki:before {
    left: 40px;
}
.saysprp .fuki:after {
    border-bottom-color: #eaedf2;
    top: -11px;
    left: 40px;
}
@media only screen and (max-width: 480px){
.saysprp .faceicon span {
    top: 60px;
    left: 80px;
}
.saysprp .fuki:before {
    left: 28px;
}
.saysprp .fuki:after {
    left: 28px;
}}

CSSコード（コメントなし　短縮版）

/*--------------------------------------
  PORIPUtears　下に出る吹き出し
--------------------------------------*/
.saysprp {position: relative;}
.saysprp .faceicon span {position: absolute;top: 80px;left: 100px;color: #999999;font-size: 12px;line-height: 20px;font-weight: 500;}
.saysprp .fuki {border: 2px solid #eaedf2;margin: 1em 0 1.5em;}
.saysprp .fuki:before {left: 40px;}
.saysprp .fuki:after {border-bottom-color: #eaedf2;top: -11px;left: 40px;}
@media only screen and (max-width: 480px){
.saysprp .faceicon span {top: 60px;left: 80px;}
.saysprp .fuki:before, .saysprp .fuki:after {left: 28px;}}

[kjk_temp id=”3406″]

[kjk_temp id=”3422″]

[kjk_ab id="4"]