【テキストパーツ】ミニふきだしの使い方

ミニふきだしの設置方法

【タグ】→【テキストパーツ】→【ミニふきだし】と辿ります。

プルダウンメニューの中から使いたいふきだしをクリックします。

 

例として【オレンジ】をクリックすると・・・

 ミニふきだしオレンジのタグ
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#FFB74D" color="#fff" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""][/st-minihukidashi]

このタグがエディターに挿入されて・・・

このように表示されます。

 

 shortcode
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#FFB74D" color="#fff" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""]オレンジのミニふきだし[/st-minihukidashi]

開始タグと終了タグの間にふきだしの中に表示させる文字を入力します。

このように表示されます。

 

 

ミニふきだしのカスタマイズ

ミニふきだしの色を変更

 基本デフォルト
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#f3f3f3" color="#000000" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

基本のミニふきだしをそのまま使うと下のように表示されます。

 

 

『bgcolor="#f3f3f3"』がふきだしの色を指定しています。

 色をカスタマイズ
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#039BE5" color="#000000" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

『bgcolor="#f3f3f3"』を青濃の『bgcolor="#039BE5"』に変更すると・・・

 

このように変わります。

 

 

文字色の変更

『color="#000000"』が文字の色の指定です。

『color="#000000"』を黒薄の『color="#FAFAFA"』に変更すると・・・

 文字色をカスタマイズ
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

このように表示されます。

 

 

アイコンを追加

『webicon=""』でアイコンを追加することが出来ます。

【Webアイコン（クラス）】の【矢印下2】を追加してみます。

 アイコンを追加
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="" fontweight="" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

このようになりました。

 

 

ふきだしの位置を調整

ふきだしと写真の間が開いています。

写真の近くにふきだしを表示したいですね。

『margin="0 0 20px 0"』の数値を変更するとふきだしの位置を変える事が出来ます。

この数値を指定して、ふきだしの周りの余白を調整します。

 

デフォルトでは下に20pxのマージンを取っています。

この余白を無くしてみます。

『margin="0 0 20px 0"』を『margin="0 0 0px 0"』に変更すると・・・

 位置を調整
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="" fontweight="" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 0px 0" radius="" position="" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

このようになります。

 

ED79は真ん中の赤い機関車なのでふきだしを右へ移動します。

右へ動かすという事はふきだしの左に余白を入れればいいので・・・

『margin="0 0 0px 0"』を『margin="0 0 0px 200px"』に変更します。

 位置を調整
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="" fontweight="" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 0px 200px" radius="" position="" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

ふきだしが右へ移動してED79の上に表示されました。

 

 

ふきだしのしっぽの位置を変更

デフォルトでは左下に出ているふきだしのしっぽ。

これは『position=""』で変える事が出来ます。

『position=""』は左で『position="on"』にすると中央になります。

 しっぽの位置
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="" fontweight="" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 0px 200px" radius="" position="on" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

ふきだしのしっぽが中央になりました。

 

 

ふきだしの形を変更

『radius=""』に数値を設定するとふきだしの形が変わります。

 ふきだしの形
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="" fontweight="" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 0px 200px" radius="" position="on" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

『radius="30"』に設定すると両側は丸になります。

 

『radius="20"』のふきだしの形です。

 

『radius="10"』のふきだしの形です。

 

『radius="0"』にすると四角になります。

 

 

文字のサイズを変更

『fontsize=""』でふきだしの文字の大きさを指定します。

『fontsize=""』を『fontsize="200"』にしてみます。

 フォントサイズ
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="200" fontweight="" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 0px 200px" radius="" position="on" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

 

 

文字の太さを変更

『fontweight=""』でふきだしの文字の太さを指定します。

『fontweight=""』で指定できるのは、一番細い物が100で、順に200、300、400、500、600、700、800、900という9つの数値が指定できます。

初期値は『normal』で、これは数値の400を指定した文字と同じ太さになります。

太字として使われる『bold』は700です。

『fontweight=""』を『fontweight="700"』にしてみます。

 フォントウエイト
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="200" fontweight="700" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 0px 200px" radius="" position="on" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

このようになります。

 

 

ミニふきだしの設定がデフォルトの時は『fontsize=""』『radius=""』です。

『fontsize=""』の時は『radius=""』と『radius="30"』は同じ形で両側は丸でした。

『fontsize="200"』で『radius=""』の数値を変えてみると・・・

 
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="200" fontweight="700" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 0px 200px" radius="30" position="on" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

『radius="30"』のふきだしの形です。

 

『radius="20"』のふきだしの形です。

 

『radius="10"』のふきだしの形です。

 

『radius="0"』のふきだしの形です。

 

フォントサイズがデフォルトの時は『radius="30"』も『radius="20"』も丸でしたが、フォントサイズを大きくすると『radius="20"』で角丸になります。

文字をもっと大きくすると『radius="30"』でも角丸になるか試してみます。

 
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="300" fontweight="700" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 0px 100px" radius="30" position="on" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

こうなりました。

『radius=""』に数値を設定すると角がその数値のピクセル数を半径にした円になります。

数値を設定しないで『radius=""』のままだと『radius="30"』と同じ円になります。

 

最後に『fontsize="300"』でも両側を丸くしてみます。

『radius="50"』に設定すると・・・

 
[st-minihukidashi webicon="st-svg-angle-double-down" fontsize="300" fontweight="700" bgcolor="#039BE5" color="#FAFAFA" margin="0 0 0px 100px" radius="50" position="on" myclass="" add_boxstyle=""]この機関車はED79です[/st-minihukidashi]

 

この大きさでも円になりました。

 

 

ミニふきだし一覧

 

 

【ミニふきだし】⇒【基本】

 基本
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#f3f3f3" color="#000000" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""][/st-minihukidashi]

 

【ミニふきだし】⇒【オレンジ】

 オレンジ
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#FFB74D" color="#fff" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""][/st-minihukidashi]

 

【ミニふきだし】⇒【ピンク】

 ピンク
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#F48FB1" color="#fff" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""][/st-minihukidashi]

 

【ミニふきだし】⇒【ブルー】

 ブルー
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#4FC3F7" color="#fff" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""][/st-minihukidashi]

 

【ミニふきだし】⇒【グリーン】

 グリーン
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#7CB342" color="#fff" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""][/st-minihukidashi]

 

【ミニふきだし】⇒【レッド】

 レッド
[st-minihukidashi webicon="" fontsize="" fontweight="" bgcolor="#f44336" color="#fff" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""][/st-minihukidashi]

 

【ミニふきだし】⇒【+マイボックス】

 +マイボックス
[st-div class="" margin="0 0 15px 0" padding="0 0 0 0" add_style=""][st-minihukidashi webicon="e" fontsize="" fontweight="bold" bgcolor="#f3f3f3" color="" margin="0" radius="" position="" myclass="" add_boxstyle=""]ふきだしテキスト[/st-minihukidashi][/st-div][st-mybox title="" webicon="" color="" bordercolor="" bgcolor="#f3f3f3" borderwidth="" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="0 0 25px 0"]

 

 

 

テキストパーツ一覧へ戻る

スタイル一覧はこちら

 

AFFINGER6 EX　公式ページ

AFFINGER6　公式ページ

エックスサーバー　公式ページ