【テキストパーツ】複合（アイコンなし）の使い方

 

複合（アイコンなし）の設置方法

投稿画面のエディターで複合パーツを設置する場所にカーソルを移動して【テキストパーツ】の【複合（アイコンなし）】から使用するパーツを選んでクリックします。

例として【はてなマーク】を設置します。

 はてなマークデフォルト
[st-minihukidashi webicon="st-svg-question-circle" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]つまづきポイント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

このようなタグがエディター画面に挿入されます。

複合と同じくふきだし部分が1行目のタグで、メモ部分が2行目のタグになっています。

 

デフォルトのままで表示するとこのようになります。

パーツ名は『はてなマーク』ですがふきだしには『つまづきポイント』という文が初めから書き込まれています。

 

 

複合（アイコンなし）のカスタマイズ方法

ふきだしのアイコンを変更

【はてなマーク】をデフォルトのまま挿入するとこのように表示されます。

 

タグの1行目の『webicon="st-svg-question-circle"』がふきだしのアイコンを指定している部分です。

アイコンを【Webアイコン（クラス）】の【ギフト】に変更すると・・・

 ギフトに変更
[st-minihukidashi webicon="st-svg-gift" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]つまづきポイント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

このようになります。

 

 

ふきだしのテキストを変更

ふきだしのテキストは1行目の開始タグと終了タグの間に入力します。

『つまづきポイント』を『プレゼント』に変更すると・・・

 プレゼントに変更
[st-minihukidashi webicon="st-svg-gift" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

このようになります。

 

 

テキストを入力

メモ部分に文章を入れます。

メモ部分に表示させる文章は2行目の開始タグと終了タグの間に入力します。

『わたしからあなたへ心を込めて・・・』と入力すると・・・

 テキスト入力
[st-minihukidashi webicon="st-svg-gift" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]わたしからあなたへ心を込めて・・・[/st-mybox]

このようになります。

 

 

ふきだしの文字の大きさを変更

1行目のタグの『fontsize="90"』の数値を変えるとふきだしの文字の大きさが変わります。

『fontsize="150"』にしてみると・・・

 文字の大きさ
[st-minihukidashi webicon="st-svg-gift" fontsize="150" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]わたしからあなたへ心を込めて・・・[/st-mybox]

このようになります。

 

 

ふきだしの色を変更

1行目のタグの『bgcolor="#03A9F4"』がふきだしの色の指定です。

『bgcolor="#03A9F4"』を【ショートコード補助】の【HTMLカラーコード】から赤薄にしてみると・・・

 ふきだしの色
[st-minihukidashi webicon="st-svg-gift" fontsize="150" fontweight="bold" bgcolor="#ffebee" color="#fff" margin="0 0 0 0"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]わたしからあなたへ心を込めて・・・[/st-mybox]

このようになります。

 

 

ふきだしの文字の色を変更

1行目のタグの『color="#fff"』がふきだしの文字の色の指定です。

『color="#fff"』を【ショートコード補助】の【HTMLカラーコード】から赤濃にしてみると・・・

 ふきだしの色
[st-minihukidashi webicon="st-svg-gift" fontsize="150" fontweight="bold" bgcolor="#ffebee" color="#e53935" margin="0 0 0 0"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]わたしからあなたへ心を込めて・・・[/st-mybox]

このようになります。

 

 

ふきだしの位置を調整

ふきだしを大きくしたらメモとの間がなくなりました。

ふきだしを少し上と右へずらしてみます。

ふきだしの周りの余白を1行目のタグの『margin="0 0 0 0"』で指定します。

4つの数字は左からふきだしの上・右・下・左の余白の指定になります。

左と下に余白を入れたいので『margin="0 0 20px 40px"』としてみましょう。

 ふきだしの位置
[st-minihukidashi webicon="st-svg-gift" fontsize="150" fontweight="bold" bgcolor="#ffebee" color="#e53935" margin="0 0 20px 40px"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]わたしからあなたへ心を込めて・・・[/st-mybox]

このようになります。

 

 

メモの色を変更

メモの色を変えてみましょう。

2行目のタグの『bgcolor="#ffebee"』で指定します。

【ショートコード補助】の【HTMLカラーコード】から緑薄にしてみると・・・

 メモの色
[st-minihukidashi webicon="st-svg-gift" fontsize="150" fontweight="bold" bgcolor="#ffebee" color="#e53935" margin="0 0 20px 40px"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8F5E9" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]わたしからあなたへ心を込めて・・・[/st-mybox]

このようになりました。

 

 

メモに枠線を追加

メモに枠線を付ける事が出来ます。

2行目のタグの『bordercolor="#43A047"』で色を指定します。

次に同じく2行目の『borderwidth=""』で枠線の太さを指定します。

色を緑、枠線の太さを『borderwidth="3"』に変更してみると・・・

 枠線
[st-minihukidashi webicon="st-svg-gift" fontsize="150" fontweight="bold" bgcolor="#ffebee" color="#e53935" margin="0 0 20px 40px"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="#43A047" bgcolor="#E8F5E9" borderwidth="3" borderradius="5" titleweight="bold" fontsize=""]わたしからあなたへ心を込めて・・・[/st-mybox]

このようになります。

枠線の色を指定しても枠線の太さを指定しないと枠線は表示されません。

 

 

メモの形を変更

2行目のタグの『borderradius="5"』の数値を変えると四角から長円まで、四隅の丸みを変更する事ができます。

 メモの形丸
[st-minihukidashi webicon="st-svg-gift" fontsize="150" fontweight="bold" bgcolor="#ffebee" color="#e53935" margin="0 0 20px 40px"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="#43A047" bgcolor="#E8F5E9" borderwidth="3" borderradius="40" titleweight="bold" fontsize=""]わたしからあなたへ心を込めて・・・[/st-mybox]

『borderradius="5"』を『borderradius="40"』にするとこのようになります。

 

 メモの形角
[st-minihukidashi webicon="st-svg-gift" fontsize="150" fontweight="bold" bgcolor="#ffebee" color="#e53935" margin="0 0 20px 40px"]プレゼント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="#43A047" bgcolor="#E8F5E9" borderwidth="3" borderradius="0" titleweight="bold" fontsize=""]わたしからあなたへ心を込めて・・・[/st-mybox]

『borderradius="0"』にするとこのようになります。

 

 

 

複合（アイコンなし）一覧

 

 

 

【複合（アイコンなし）】⇒【自由なメモ】

 自由なメモ
[st-minihukidashi webicon="st-svg-file-text-o" fontsize="90" fontweight="bold" bgcolor="#FFC107" color="#fff" margin="0 0 0 0"]自由なメモ[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#FFFDE7" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

 

【複合（アイコンなし）】⇒【ココがポイント】

 ココがポイント
[st-minihukidashi webicon="st-svg-hand-o-right" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがポイント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

 

【複合（アイコンなし）】⇒【ココがおすすめ】

 ココがおすすめ
[st-minihukidashi webicon="st-svg-circle-o" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがおすすめ[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

 

【複合（アイコンなし）】⇒【ココがダメ】

 ココがダメ
[st-minihukidashi webicon="st-svg-times" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがダメ[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

 

【複合（アイコンなし）】⇒【ココに注意】

 ココに注意
[st-minihukidashi webicon="st-svg-exclamation-circle" fontsize="90" fontweight="bold" bgcolor="#ef5350" color="#fff" margin="0 0 0 0"]ココに注意[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#ffebee" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

 

【複合（アイコンなし）】⇒【もっと詳しく】

 もっと詳しく
[st-minihukidashi webicon="st-svg-search" fontsize="90" fontweight="bold" bgcolor="#66BB6A" color="#fff" margin="0 0 0 0"]もっと詳しく[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8F5E9" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

 

【複合（アイコンなし）】⇒【はてなマーク】

 はてなマーク
[st-minihukidashi webicon="st-svg-question-circle" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]つまづきポイント[/st-minihukidashi]
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""][/st-mybox]

 

 

 

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

スタイル一覧はこちら

 

AFFINGER6 EX　公式ページ

AFFINGER6　公式ページ

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