きのぷー
こんにちは、たかみかんブログへようこそ (*> ᴗ •*)ゞ
今回は、当サイトで使わせていただているWORDPRESSテーマ「AFFINGER6EX（アップグレード版）」で使える記事作成パーツをまとめてみました。今回は「タグ〜テキストパーツ編」です。是非最後までお付き合いください(＾∀＾)ノ
早速行ってみましょう！
デザイン
クリップメモ
ショートコードで作成します。自分でカスタマイズすることも可能です。
メモ
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]（メモ）ここに本文を入力[/st-cmemo]
外部リンク
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-external-link" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"]（外部リンク）ここに本文を入力[/st-cmemo]
ブックマーク
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-bookmark" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"]（ブックマーク）ここに本文を入力[/st-cmemo]
おしらせ
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-bullhorn" iconcolor="#FFEB3B" bgcolor="#FFFDE7" color="#000000" iconsize="100"]（お知らせ）ここに本文を入力[/st-cmemo]
はてな
ホントの都会の流行り、きのぷーさんが教えてほしいんご
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-question-circle" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="100"]（はてな）ここに本文を入力[/st-cmemo]
コメント
あは♪いまの私、アイドルっぽいですか！照れるんご！
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-comments" iconcolor="#F48FB1" bgcolor="#FCE4EC" color="#000000" iconsize="100"]（コメント）ここに本文を入力[/st-cmemo]
コード
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-code" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]（コード）ここに本文を入力[/st-cmemo]
ポイント
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-lightbulb-o" iconcolor="#FFA726" bgcolor="#FFF3E0" color="#000000" iconsize="100"]（ポイント）ここに本文を入力[/st-cmemo]
ユーザー
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-user" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="100"]（ユーザー）ここに本文を入力[/st-cmemo]
初心者
都会の流行り、みんなを見て学ぶんご。まずは…きゃはっ☆
ソースコード（クリックして下さい）
[st-cmemo fontawesome="st-svg-bigginer_l" iconcolor="#9CCC65" bgcolor="#F1F8E9" color="#000000" iconsize="100"]（初心者）ここに本文を入力[/st-cmemo]
注意文（グレー）
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-exclamation-circle" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]（注意文グレー）ここに本文を入力[/st-cmemo]
注意文
んご…都会で流行ってるって聞いたのにな～。おかしいんご…
ソースコード（クリックして下さい）
[st-cmemo webicon="st-svg-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="100"]（注意文）ここに本文を入力[/st-cmemo]
ミニふきだし
ショートコードで作成します。自分でカスタマイズすることも可能です。
[st-minihukidashi bgcolor="#f3f3f3" color="#000000" margin="0 0 20px 0"]（基本）ここに本文を入力[/st-minihukidashi]
[st-minihukidashi bgcolor="#FFB74D" color="#fff" margin="0 0 20px 0"]（オレンジ）ここに本文を入力[/st-minihukidashi]
[st-minihukidashi bgcolor="#F48FB1" color="#fff" margin="0 0 20px 0"]（ピンク）ここに本文を入力[/st-minihukidashi]
[st-minihukidashi bgcolor="#4FC3F7" color="#fff" margin="0 0 20px 0"]（ブルー）ここに本文を入力[/st-minihukidashi]
[st-minihukidashi bgcolor="#7CB342" color="#fff" margin="0 0 20px 0"]（グリーン）ここに本文を入力[/st-minihukidashi]
『アイドルばなるず』じゃ可愛くないですもん。やですっ
[st-minihukidashi bgcolor="#f44336" color="#fff" margin="0 0 20px 0"]（レッド）ここに本文を入力[/st-minihukidashi]
ソースコード（クリックして下さい）
[st-div class="" margin="0 0 15px 0" padding="0 0 0 0" add_style=""][st-minihukidashi webicon="" fontsize="" fontweight="bold" bgcolor="#f3f3f3" color="" margin="0" radius="" position="" add_boxstyle=""]ふきだしテキスト[/st-minihukidashi][/st-div][st-mybox title="" fontawesome="" color="" bordercolor="" bgcolor="#f3f3f3" borderwidth="" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="0 0 25px 0"]（＋マイボックス）ここに本文を入力
[/st-mybox]
クリップメモとふきだしの複合
自由なメモ
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#FFC107" color="#fff" margin="0 0 0 -6px"]自由なメモ[/st-minihukidashi]</div>
[st-cmemo webicon="st-svg-file-text-o" iconcolor="#FFC107" bgcolor="#FFFDE7" color="#000000" iconsize="200"]ここに本文を入力[/st-cmemo]
ココがポイント
その……まだお手伝いもあるし……
今日はいったん、戻ります……んご……。
よいしょ……。
…………あの。
ファスナー、閉めてほしいんご……。
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがポイント[/st-minihukidashi]</div>
[st-cmemo webicon="st-svg-hand-o-right" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]ここに本文を入力[/st-cmemo]
ココがおすすめ
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがおすすめ[/st-minihukidashi]</div>
[st-cmemo webicon="st-svg-thumbs-o-up" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]ここに本文を入力[/st-cmemo]
ココがダメ
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがダメ[/st-minihukidashi]</div>
[st-cmemo webicon="st-svg-thumbs-o-down" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]ここに本文を入力[/st-cmemo]
ココに注意
りんご1個に含まれるビタミンCは…りんご1個分だよ！
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#ef5350" color="#fff" margin="0 0 0 -6px"]ココに注意[/st-minihukidashi]</div>
[st-cmemo webicon="st-svg-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="200"]ここに本文を入力[/st-cmemo]
さらに詳しく
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#66BB6A" color="#fff" margin="0 0 0 -8px"]さらに詳しく[/st-minihukidashi]</div>
[st-cmemo webicon="st-svg-search" iconcolor="#66BB6A" bgcolor="#E8F5E9" color="#000000" iconsize="200"]ここに本文を入力[/st-cmemo]
女性コメント
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#F06292" color="#fff" margin="0 0 0 -9px"]◯才女性[/st-minihukidashi]</div>
[st-cmemo webicon="st-svg-user" iconcolor="#F06292" bgcolor="#FCE4EC" color="#000000" iconsize="200"]ここに本文を入力[/st-cmemo]
男性コメント
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#42A5F5" color="#fff" margin="0 0 0 -9px"]◯才男性[/st-minihukidashi]</div>
[st-cmemo webicon="st-svg-user" iconcolor="#42A5F5" bgcolor="#E3F2FD" color="#000000" iconsize="200"]ここに本文を入力[/st-cmemo]
複合（アイコンなし）
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi webicon="st-svg-file-text-o" fontsize="90" fontweight="bold" bgcolor="#FFC107" color="#fff" margin="0 0 0 0"]自由なメモ[/st-minihukidashi]</div>
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#FFFDE7" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]ここに本文を入力[/st-mybox]
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi webicon="st-svg-hand-o-right" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがポイント[/st-minihukidashi]</div>
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]ここに本文を入力[/st-mybox]
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi webicon="st-svg-circle-o" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがおすすめ[/st-minihukidashi]</div>
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]ここに本文を入力[/st-mybox]
まあ誰でもいいやん、どうせみんな一緒におしおきやから。うっひっひっひ
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi webicon="st-svg-times" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがダメ[/st-minihukidashi]</div>
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]ここにテキストを入力[/st-mybox]
この9人でいられるときが、一番輝けるの！ひとりでいるときよりも、ずっと、ずっと
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi webicon="st-svg-exclamation-circle" fontsize="90" fontweight="bold" bgcolor="#ef5350" color="#fff" margin="0 0 0 0"]ココに注意[/st-minihukidashi]</div>
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#ffebee" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]ここにテキストを入力[/st-mybox]
いい？アイドルっていうのは笑顔を見せる仕事じゃない！笑顔にさせる仕事なの！それをよーく自覚しなさい！
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi webicon="st-svg-search" fontsize="90" fontweight="bold" bgcolor="#66BB6A" color="#fff" margin="0 0 0 0"]もっと詳しく[/st-minihukidashi]</div>
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8F5E9" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]ここにテキストを入力[/st-mybox]
自分のことを優れているなんて思っている人間は、ほとんどいないってこと。だから努力するのよ。みんな。そうやって少しずつ成長して、成長した周りの人をみてみんな頑張って…ライバルみたいな関係なのかもね、友達って
ソースコード（クリックして下さい）
<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi webicon="st-svg-question-circle" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]つまづきポイント[/st-minihukidashi]</div>
[st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]ここにテキストを入力[/st-mybox]
丸い背景の文字（小サイズ）
丸い背景の文字が作れます。「見出しタグの前などに使用するとポイントになりお薦め」とのこと。自分でカスタマイズすることも可能。
ポイント見出しに使うとこんな感じ
<h4>[st-marumozi webicon="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 0 0"]ポイント[/st-marumozi]見出しに使うとこんな感じ</h4>
おおはらベーカリー
[st-marumozi webicon="" bgcolor="#f3f3f3" color="#000000" radius="30" margin="0 10px 10px 0"]（基本）ここにテキストを入力[/st-marumozi]
おおはらベーカリー
[st-marumozi webicon="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]（オレンジ）ここにテキストを入力[/st-marumozi]
おおはらベーカリー
[st-marumozi webicon="" bgcolor="#F48FB1" color="#fff" radius="30" margin="0 10px 10px 0"]（ピンク）ここにテキストを入力[/st-marumozi]
おおはらベーカリー
[st-marumozi webicon="" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"]（ブルー）ここにテキストを入力[/st-marumozi]
おおはらベーカリー
[st-marumozi webicon="st-svg-exclamation-circle" bgcolor="#ffebee" color="#ef5350" radius="30" margin="0 10px 10px 0"]（うすい注意）ここにテキストを入力[/st-marumozi]
おおはらベーカリー
[st-marumozi webicon="st-svg-exclamation-circle" bgcolor="#ef5350" color="#fff" radius="30" margin="0 10px 10px 0"]（注意）ここにテキストを入力[/st-marumozi]
丸い背景の文字（大サイズ）
こちらは丸い背景で大きめの文字となります。自分でカスタマイズが可能。
かしこい かわいい エリーチカ
[st-marumozi-big webicon="" bgcolor="#f3f3f3" color="#000000" radius="30" margin="0 10px 10px 0"]（基本）ここにテキストを入力[/st-marumozi-big]
かしこい かわいい エリーチカ
[st-marumozi-big webicon="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]（オレンジ）ここにテキストを入力[/st-marumozi-big]
かしこい かわいい エリーチカ
[st-marumozi-big webicon="" bgcolor="#F48FB1" color="#fff" radius="30" margin="0 10px 10px 0"]（ピンク）ここにテキストを入力[/st-marumozi-big]
かしこい かわいい エリーチカ
[st-marumozi-big webicon="" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"]（ブルー）ここにテキストを入力[/st-marumozi-big]
かしこい かわいい エリーチカ
[st-marumozi-big webicon="st-svg-question-circle" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"]（はてな）ここにテキストを入力[/st-marumozi-big]
かしこい かわいい エリーチカ
[st-marumozi-big webicon="st-svg-check-circle" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]（チェック）ここにテキストを入力[/st-marumozi-big]
かしこい かわいい エリーチカ
[st-marumozi-big webicon="st-svg-check-circle" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]（うすい注意）ここにテキストを入力[/st-marumozi-big]
かしこい かわいい エリーチカ
[st-marumozi-big webicon="st-svg-exclamation-circle" bgcolor="#ef5350" color="#fff" radius="30" margin="0 10px 0 0"]（注意）ここにテキストを入力[/st-marumozi-big]
カスタムフォント
ショートコードでフォントをカスタマイズできます
んごおおー！
[st-designfont myclass="" webicon="" fontsize="150" fontweight="bold" color="#000" textshadow="" webfont="" margin="0 0 20px 0"]ここにテキストを入力[/st-designfont]
んごおおー！
[st-designfont myclass="" webicon="" fontsize="150" fontweight="bold" color="#fff" textshadow="#424242" webfont="on" margin="0 0 20px 0"]ここにテキストを入力[/st-designfont]
ステップ
「購入の流れ」などの活用に便利。カラーなどがカスタマイザーのオプションで変更可
step
1お湯を入れる
キャッピピピ～ン♪
step
23分待つ
きゃっるるる～ん♪……えへっ、きゅん♪
step
3完成です
へへっ！やーりぃ！
ソースコード（クリックして下さい）
[st-step step_no="1"]step1[/st-step]
ここに本文を入力
[st-step step_no="2"]step2[/st-step]
ここに本文を入力
[st-step step_no="3"]step3[/st-step]
ここに本文を入力
ポイント
フォントサイズと太さ、背景色はカスタマイズ可能。
まっこまっこり～ん♪
[st-point fontsize="" fontweight="bold" bordercolor=""]ここにテキストを入力[/st-point]
ラベル
PC（960px以上）、Tab（955px〜600px）のレスポンシブ表示。ラベルの文字は変更できます。
おすすめ
[st-label label="おすすめ" bgcolor="#FBC02D" color="#FFFFFF"]<img src="#" />[/st-label]
流れる文字
流したい文字を<p>〜</p>タグで括らないと文字が流れないようです。
盛岡市は岩手県の県庁所在地で、歴史と自然が調和する街です。わんこそばや石割桜などが名物。
<div class="st-marquee"><p>盛岡市は岩手県の県庁所在地で、歴史と自然が調和する街です。わんこそばや石割桜などが名物。</p></div>
関連ウェブサイト
-
-
AFFINGER6EX（アップグレード）版の記事作成パーツ（スタイル編）
テキスト装飾 太字 <span class="huto">たかみかんブログ</span> 赤字 <span class="hutoaka">たかみかんブログ< ...
続きを見る
-
-
AFFINGER6EX（アップグレード）版の記事作成パーツ（ボックスデザイン編）
ボックスデザイン バナー風ボックス バナー風デザインを作成するショートコード。flexボックスを使用した様々なデザインを作成できます。背景画像を指定することでバナーのようなボタンを作成することも可能で ...
続きを見る
-
-
AFFINGER6EX（アップグレード）版の記事作成パーツ（カスタムボタン編）
カスタムボタン（ノーマル） 自由なボタンを作成します。幅や色、アイコンなどボタンごとに自由なカスタマイズが可能です。 基本 ソースコード（クリックして下さい） [st-mybutton url="#" ...
続きを見る
-
-
AFFINGER6EX（アップグレード）版の記事作成パーツ（会話ふきだし、ランキング、レイアウト編）
会話ふきだし 「会話ふきだし」は最大8つまで設定でき、1クリックで呼び出すことが可能です。（※「 r 」で反対向きになります） ソースコード（クリックして下さい） [st-kaiwa1]これはダミーの ...
続きを見る
