きのぷー
こんにちは、たかみかんブログへようこそ (*> ᴗ •*)ゞ
今回は、当サイトで使わせていただている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]これはダミーの ...
続きを見る