まるもじの設置方法
【タグ】→【テキストパーツ】→【まるもじ（小）】もしくは・・・
【タグ】→【テキストパーツ】→【まるもじ（大）】と辿ります。
プルダウンメニューの中から使いたいまるもじをクリックします。
【まるもじ（小）】の【オレンジ】をクリックすると・・・
まるもじのタグ
[st-marumozi webicon="" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""][/st-marumozi]
エディターには上記のタグが挿入されます。
何も設定しないで【まるもじ（小）】の【オレンジ】を設置するとこのように表示されます。
まるもじのカスタマイズ方法
テキストを入力
まるもじの中に文字を表示させるには開始タグと終了タグの間に文字を入力します。
『これは何かな？』と入力すると・・・
テキスト
[st-marumozi webicon="" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""]これは何かな？[/st-marumozi]
これは何かな？
このように表示されます。
改行
[st-marumozi webicon="" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""]
はてな？
これは何かな？
なんだろな？
[/st-marumozi]
はてな？
これは何かな？
なんだろな？
改行して複数行にする事も出来ます。
アイコンの挿入
まるもじはアイコンを挿入する事が出来ます。
『webicon=""』のダブルクォーテーションの間にカーソルを移動します。
【タグ】をクリックすると開くプルダウンメニューの【ショートコード補助】から【Webアイコン（クラス）】をクリックします。
挿入したいアイコンをクリックします。
例として【はてな】をクリックすると・・・
shortcode
[st-marumozi webicon="st-svg-question-circle" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""]これは何かな？[/st-marumozi]
これは何かな？
タグではてなのアイコンが指定されて、まるもじにアイコンが挿入されました。
まるもじの色を変更
『bgcolor="#FFB74D"』が色を指定しているコードです。
『bgcolor="#FFB74D"』の色コードを削除して『bgcolor=""』とします。
『bgcolor=""』のダブルクォーテーションの間にカーソルを移動します。
【タグ】の【ショートコード補助】から【HTMLカラーコード】をクリックします。
変更したい色をクリックします。
緑をクリックすると・・・
色変更
[st-marumozi webicon="st-svg-question-circle" bgcolor="#4CAF50" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""]これは何かな？[/st-marumozi]
これは何かな？
このようになりました。
文字の色を変更
文字の色は『color="#fff"』で指定します。
まるもじの色を変更した時と同じ要領で色を指定します。
『color=""』としてから橙をクリックすると・・・
文字の色変更
[st-marumozi webicon="st-svg-question-circle" bgcolor="#4CAF50" bordercolor="" color="#FFC107" radius="30" margin="0 10px 0 0" myclass=""]これは何かな？[/st-marumozi]
これは何かな？
このようになりました。
まるもじに枠線を付ける
まるもじの周りに枠線を付ける事が出来ます。
『bordercolor=""』で枠線の色を指定します。
赤濃を指定すると・・・
枠線
[st-marumozi webicon="st-svg-question-circle" bgcolor="#4CAF50" bordercolor="#e53935" color="#FFC107" radius="30" margin="0 10px 0 0" myclass=""]これは何かな？[/st-marumozi]
これは何かな？
このようになります。
まるもじの形を変更
『radius="30"』の数値を変えると四隅の丸の半径を変える事が出来ます。
角
[st-marumozi webicon="st-svg-question-circle" bgcolor="#4CAF50" bordercolor="#e53935" color="#FFC107" radius="10" margin="0 10px 0 0" myclass=""]これは何かな？[/st-marumozi]
これは何かな？
『radius="10"』と指定するとこのようになります。
角
[st-marumozi webicon="st-svg-question-circle" bgcolor="#4CAF50" bordercolor="#e53935" color="#FFC107" radius="0" margin="0 10px 0 0" myclass=""]これは何かな？[/st-marumozi]
これは何かな？
『radius="0"』と指定すると四角になります。
こうなると『まるもじ』とは言えませんが・・・。
表示位置を変更
これは何かな？
画像と一緒に表示させてみました。
『margin="0 10px 0 0"』で指定すると、まるもじの周りに余白を挿入する事が出来ます。
数値は左から順番に『上 右 下 左』に挿入する余白のピクセル数を指定します。
まるもじの左に20ピクセル、下に10ピクセルの余白を入れてみましょう。
余白
[st-marumozi webicon="st-svg-question-circle" bgcolor="#4CAF50" bordercolor="#e53935" color="#FFC107" radius="30" margin="0 10px 10px 20px" myclass=""]これは何かな？[/st-marumozi]
これは何かな？
このようになります。
まるもじ一覧
アイコンや色のカスタマイズの参考にしてください
参考
タグのカスタマイズ項目
- webicon="アイコンの種類"
- bgcolor="背景の色"
- bordercolor="ボーダーの色"
- color="文字の色"
- radius="四隅の丸み（px）"
- margin="余白（上px 右px 下px 左px）"
【まるもじ（小）】⇒【基本】
基本
[st-marumozi webicon="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="30" margin="0 10px 0 0" myclass=""][/st-marumozi]
【まるもじ（小）】⇒【オレンジ】
オレンジ
[st-marumozi webicon="" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""][/st-marumozi]
【まるもじ（小）】⇒【ピンク】
オレンジ
[st-marumozi webicon="" bgcolor="#F48FB1" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""][/st-marumozi]
【まるもじ（小）】⇒【ブルー】
ブルー
[st-marumozi webicon="" bgcolor="#4FC3F7" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""][/st-marumozi]
【まるもじ（小）】⇒【うすい注意】
うすい注意
[st-marumozi webicon="st-svg-exclamation-circle" bgcolor="#ffebee" bordercolor="" color="#ef5350" radius="30" margin="0 10px 0 0" myclass=""][/st-marumozi]
【まるもじ（小）】⇒【注意】
注意
[st-marumozi webicon="st-svg-exclamation-circle" bgcolor="#ef5350" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""][/st-marumozi]
【まるもじ（大）】⇒【基本】
基本
[st-marumozi-big webicon="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="30" margin="0 10px 10px 0" myclass=""][/st-marumozi-big]
【まるもじ（大）】⇒【オレンジ】
オレンジ
[st-marumozi-big webicon="" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0" myclass=""][/st-marumozi-big]
【まるもじ（大）】⇒【ピンク】
ピンク
[st-marumozi-big webicon="" bgcolor="#F48FB1" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0" myclass=""][/st-marumozi-big]
【まるもじ（大）】⇒【ブルー】
ブルー
[st-marumozi-big webicon="" bgcolor="#4FC3F7" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0" myclass=""][/st-marumozi-big]
【まるもじ（大）】⇒【はてな】
はてな
[st-marumozi-big webicon="st-svg-question-circle" bgcolor="#4FC3F7" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0" myclass=""][/st-marumozi-big]
【まるもじ（大）】⇒【チェック】
チェック
[st-marumozi-big webicon="st-svg-check-circle" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0" myclass=""][/st-marumozi-big]
【まるもじ（大）】⇒【うすい注意】
うすい注意
[st-marumozi-big webicon="st-svg-exclamation-circle" bgcolor="#ffebee" bordercolor="" color="#ef5350" radius="30" margin="0 10px 10px 0" myclass=""][/st-marumozi-big]
【まるもじ（大）】⇒【注意】
注意
[st-marumozi-big webicon="st-svg-exclamation-circle" bgcolor="#ef5350" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0" myclass=""][/st-marumozi-big]
みなさんもまるもじをご自身のサイトに合ったデザインにカスタマイズしてみましょう
