ものづくり推進部

AFFINGER5の記事作成パーツ(タグ編①)

2020年4月9日

AFFINGER5の記事作成パーツ(タグ編)
きのぷー
先日ご紹介した「WING」の記事作成パーツ紹介第2弾。今日はタグ編です。ボリュームがあるので、2回に分けて紹介します。

販売元サイト

デザイン

クリップメモ

※ショートコードで作成。カスタマイズ可能。

立派なアイドルになるんご!

コード

[st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"](メモ)ここに本文を入力[/st-cmemo]

山形弁はなるべく出さないようにしてるんご…

コード

[st-cmemo fontawesome="fa-external-link" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"](外部リンク)ここに本文を入力[/st-cmemo]

まだ気持ちがふわふわしてるんご

コード

[st-cmemo fontawesome="fa-bookmark" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"](ブックマーク)ここに本文を入力[/st-cmemo]

ほら、きのぷーさんも!んごってつけてみるんご!

コード

[st-cmemo fontawesome="fa-bullhorn" iconcolor="#FFEB3B" bgcolor="#FFFDE7" color="#000000" iconsize="100"](お知らせ)ここに本文を入力[/st-cmemo]

ホントの都会の流行り、きのぷーさんが教えてほしいんご

コード

[st-cmemo fontawesome="fa-question-circle" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="100"](はてな)ここに本文を入力[/st-cmemo]

あは♪いまの私、アイドルっぽいですか!照れるんご!

コード

[st-cmemo fontawesome="fa-comments" iconcolor="#F48FB1" bgcolor="#FCE4EC" color="#000000" iconsize="100"](コメント)ここに本文を入力[/st-cmemo]

……違う?んんー……難しいんご……。

コード

[st-cmemo fontawesome="fa-code" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="150"](コード)ここに本文を入力[/st-cmemo]

私、アイドルできてるんご!

コード

[st-cmemo fontawesome="fa-lightbulb-o" iconcolor="#FFA726" bgcolor="#FFF3E0" color="#000000" iconsize="100"](ポイント)ここに本文を入力[/st-cmemo]

お仕事、緊張してきたんご…

コード

[st-cmemo fontawesome="fa-user" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="150"](ユーザー)ここに本文を入力[/st-cmemo]

都会の流行り、みんなを見て学ぶんご。まずは…きゃはっ☆

コード

[st-cmemo fontawesome="st-svg-bigginer_l" iconcolor="#9CCC65" bgcolor="#F1F8E9" color="#000000" iconsize="100"](初心者)ここに本文を入力[/st-cmemo]

ちょっとぐらいの風には負けないんご…!

コード

[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"](注意文グレー)ここに本文を入力[/st-cmemo]

んご…都会で流行ってるって聞いたのにな~。おかしいんご…

コード

[st-cmemo fontawesome="fa-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]

クリップメモとふきだしの複合

複合(アイコンあり)

自由なメモ

父ちゃんとお母ちゃんに、相談させてほしいんご!

コード

<div class="st-editor-margin" style="margin-bottom: -5px;">
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#FFC107" color="#fff" margin="0 0 0 -6px"]自由なメモ[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-file-text-o" iconcolor="#FFC107" bgcolor="#FFFDE7" color="#000000" iconsize="200"]
<p>ここに本文を入力</p>
[/st-cmemo]

ココがポイント

その……まだお手伝いもあるし……
今日はいったん、戻ります……んご……。
よいしょ……。
…………あの。
ファスナー、閉めてほしいんご……。

コード

<div class="st-editor-margin" style="margin-bottom: -5px;">
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがポイント[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-hand-o-right" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]
<p>ここに本文を入力</p>
[/st-cmemo]

ココがおすすめ

反対されなかったんご!アイドルになるんご!

コード

<div class="st-editor-margin" style="margin-bottom: -5px;">
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがおすすめ[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-thumbs-o-up" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]
<p>ここに本文を入力</p>
[/st-cmemo]

ココがダメ

目立つの、得意じゃないんご…

コード

<div class="st-editor-margin" style="margin-bottom: -5px;">
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがダメ[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-thumbs-o-down" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]
<p>ここに本文を入力</p>
[/st-cmemo]

ココに注意

りんご1個に含まれるビタミンCは…りんご1個分だよ!

コード

<div class="st-editor-margin" style="margin-bottom: -5px;">
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#ef5350" color="#fff" margin="0 0 0 -6px"]ココに注意[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="200"]
<p>ここに本文を入力</p>
[/st-cmemo]

さらに詳しく

私がお相手するんご!あかりんご、歌うんご!

コード

<div class="st-editor-margin" style="margin-bottom: -5px;">
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#66BB6A" color="#fff" margin="0 0 0 -8px"]さらに詳しく[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-search" iconcolor="#66BB6A" bgcolor="#ffebee" color="#E8F5E9" iconsize="200"]
<p>ここに本文を入力</p>
[/st-cmemo]

◯才女性

負けちゃったんご…んご、んごぉ~……。

コード

<div class="st-editor-margin" style="margin-bottom: -5px;">
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#F06292" color="#fff" margin="0 0 0 -9px"]◯才女性[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-user" iconcolor="#F06292" bgcolor="#FCE4EC" color="#000000" iconsize="200"]
<p>ここに本文を入力</p>
[/st-cmemo]

◯才男性

あかりんご、ちょっとしなびてるんご……。

コード

<div class="st-editor-margin" style="margin-bottom: -5px;">
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#42A5F5" color="#fff" margin="0 0 0 -9px"]◯才男性[/st-minihukidashi]</div>
[st-cmemo fontawesome="fa-user" iconcolor="#42A5F5" bgcolor="#E3F2FD" color="#000000" iconsize="200"]
<p>ここに本文を入力</p>
[/st-cmemo]

複合(アイコンなし)

自由なメモ

アイドルあかりんご、まだまだ……やるんご!

<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi fontawesome="fa-file-text-o" fontsize="90" fontweight="bold" bgcolor="#FFC107" color="#fff" margin="0 0 0 0"]自由なメモ[/st-minihukidashi]</div>
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#FFFDE7" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]
<p>ここに本文を入力</p>
[/st-mybox]

ココがポイント

りんごのアイドルになっちゃったんご!

<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi fontawesome="fa-hand-o-right" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがポイント[/st-minihukidashi]</div>
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]
<p>ここにテキストを入力</p>
[/st-mybox]

ココがおすすめ

ウソつくとワシワシするよ!

<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi fontawesome="fa-circle-o" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがおすすめ[/st-minihukidashi]</div>
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]
<p>ここにテキストを入力</p>
[/st-mybox]

ココがダメ

まあ誰でもいいやん、どうせみんな一緒におしおきやから。うっひっひっひ

<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi fontawesome="fa-times" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがダメ[/st-minihukidashi]</div>
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]
<p>ここにテキストを入力</p>
[/st-mybox]

ココに注意

この9人でいられるときが、一番輝けるの!ひとりでいるときよりも、ずっと、ずっと

<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi fontawesome="fa-exclamation-circle" fontsize="90" fontweight="bold" bgcolor="#ef5350" color="#fff" margin="0 0 0 0"]ココに注意[/st-minihukidashi]</div>
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#ffebee" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]
<p>ここにテキストを入力</p>
[/st-mybox]

もっと詳しく

いい?アイドルっていうのは笑顔を見せる仕事じゃない!笑顔にさせる仕事なの!それをよーく自覚しなさい!

<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi fontawesome="fa-search" fontsize="90" fontweight="bold" bgcolor="#66BB6A" color="#fff" margin="0 0 0 0"]もっと詳しく[/st-minihukidashi]</div>
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8F5E9" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]
<p>ここにテキストを入力</p>
[/st-mybox]

つまづきポイント

自分のことを優れているなんて思っている人間は、ほとんどいないってこと。だから努力するのよ。みんな。そうやって少しずつ成長して、成長した周りの人をみてみんな頑張って…ライバルみたいな関係なのかもね、友達って

<div class="st-editor-margin" style="margin-bottom: -20px;">[st-minihukidashi fontawesome="fa-search" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]つまづきポイント[/st-minihukidashi]</div>
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]
<p>ここにテキストを入力</p>
[/st-mybox]

丸い背景の文字

小サイズ

メーカー曰く「見出しタグの前などに使用するとポイントになりお薦め」
カスタマイズ可能。

おおはらベーカリー

[st-marumozi fontawesome="" bgcolor="#f3f3f3" color="#000000" radius="30" margin="0 10px 10px 0"](基本)ここにテキストを入力[/st-marumozi]

おおはらベーカリー

[st-marumozi fontawesome="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"](オレンジ)ここにテキストを入力[/st-marumozi]

おおはらベーカリー

[st-marumozi fontawesome="" bgcolor="#F48FB1" color="#fff" radius="30" margin="0 10px 10px 0"](ピンク)ここにテキストを入力[/st-marumozi]

おおはらベーカリー

[st-marumozi fontawesome="" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"](ブルー)ここにテキストを入力[/st-marumozi]

おおはらベーカリー

[st-marumozi fontawesome="fa-exclamation-circle" bgcolor="#ffebee" color="#ef5350" radius="30" margin="0 10px 10px 0"](うすい注意)ここにテキストを入力[/st-marumozi]

おおはらベーカリー

[st-marumozi fontawesome="fa-exclamation-circle" bgcolor="#ffebee" color="#ef5350" radius="30" margin="0 10px 10px 0"](注意)ここにテキストを入力[/st-marumozi]

見出しにも使用可おおはらベーカリー

<h4>[st-marumozi fontawesome="fa-exclamation-circle" bgcolor="#ffebee" color="#ef5350" radius="30" margin="0 10px 10px 0"]見出しに使うことも可能です。[/st-marumozi]</h4>

大サイズ

丸い背景の大きめの文字。カスタマイズ可能。

かしこい かわいい エリーチカ

[st-marumozi-big fontawesome="" bgcolor="#f3f3f3" color="#000000" radius="30" margin="0 10px 10px 0"]基本:ここにテキストを入力[/st-marumozi-big]

かしこい かわいい エリーチカ

[st-marumozi-big fontawesome="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"](オレンジ)ここにテキストを入力[/st-marumozi-big]

かしこい かわいい エリーチカ

[st-marumozi-big fontawesome="" bgcolor="#F48FB1" color="#fff" radius="30" margin="0 10px 10px 0"](ピンク)ここにテキストを入力[/st-marumozi-big]

かしこい かわいい エリーチカ

[st-marumozi-big fontawesome="" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"](ブルー)ここにテキストを入力[/st-marumozi-big]

かしこい かわいい エリーチカ

[st-marumozi-big fontawesome="fa-question-circle" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"](はてな)ここにテキストを入力[/st-marumozi-big]

かしこい かわいい エリーチカ

[st-marumozi-big fontawesome="fa-check-circle" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"](チェック)ここにテキストを入力[/st-marumozi-big]

かしこい かわいい エリーチカ

[st-marumozi-big fontawesome="fa-exclamation-circle" bgcolor="#ffebee" color="#ef5350" radius="30" margin="0 10px 10px 0"](うすい注意)ここにテキストを入力[/st-marumozi-big]

かしこい かわいい エリーチカ

[st-marumozi-big fontawesome="fa-exclamation-circle" bgcolor="#ef5350" color="#fff" radius="30" margin="0 10px 10px 0"](注意)ここにテキストを入力[/st-marumozi-big]

カスタムフォント

ショートコードでカスタマイズ可能なフォント

んごおおー!

[st-designfont myclass="" fontawesome="" fontsize="150" fontweight="bold" color="#000" textshadow="" webfont="" margin="0 0 20px 0"]ここにテキストを入力[/st-designfont]

んごおおー!

[st-designfont myclass="" fontawesome="" fontsize="150" fontweight="bold" color="#fff" textshadow="#424242" webfont="on" margin="0 0 20px 0"]ここにテキストを入力[/st-designfont]

ステップ

「購入の流れ」などの活用に便利。
カスタマイザーの「オプション」で色変更可能。

step
1
お湯を入れる

キャッピピピ~ン♪

step
2
3分待つ

きゃっるるる~ん♪……えへっ、きゅん♪

step
3
完成です

へへっ!やーりぃ!

[st-step step_no="1"]お湯を入れる[/st-step]
<p>ここにテキストを入力</p>
[st-step step_no="2"]3分待つ[/st-step]
<p>ここにテキストを入力</p>
[st-step step_no="3"]完成です[/st-step]
<p>ここにテキストを入力</p>

ポイント

フォントサイズと太さ、背景色はカスタマイズ可能。

まっこまっこり~ん♪

[st-point fontsize="" fontweight="bold" bordercolor=""]ここにテキストを入力[/st-point]

ラベル

PC(960px以上)、Tab(955px〜600px)のレスポンシブ表示。
コンテンツ内容は「バナーショートコード」で作成。

おすすめ

神割崎

[st-label label="おすすめ" bgcolor="#FBC02D" color="#FFFFFF"]
<p><img src="#" /></p>
[/st-label]

流れる文字

南三陸町観光協会では、地域の観光情報を毎日配信しております!南三陸の宿泊施設、アクセス情報、A旧グルメ「キラキラ丼」を含む飲食情報、観光スポット、イベント、ツアープログラムなど、観光に役立つ情報が盛りだくさん!

<div class="st-marquee">
<p>ここにテキストを入力</p>
</div>

バナー風ボックス

背景画像を指定することでバナーのようなボタンが作成可能。

基本形

参考 バナー風デザインを作成するショートコード

タイトル

ここにテキストを入力

[st-flexbox url="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="10"]
<p>ここにテキストを入力</p>
[/st-flexbox]

サンプル例

詳しい御案内はこちら

料金プランやサービスについて

[st-flexbox url="" fontawesome="fa-info-circle" title="詳しい御案内はこちら" height="" color="#fff" fontsize="150" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="" backgroud_image="#" blur="on" left="" margin_bottom="10"]<span style="color: #ffffff;">料金プランやサービスについて</span>[/st-flexbox]

泣ける!
漫画ランキング

本屋さんが選んだ泣けるマンガランキング1位は?

今すぐCHECK

[st-flexbox url="" fontawesome="" title="泣ける!<br />
漫画ランキング" width="280" height="250" color="#fff" fontsize="200" radius="5" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="" backgroud_image="*" blur="" left="" margin_bottom="10"]<span style="color: #ffffff;">本屋さんが選んだ泣けるマンガランキング1位は?</span>[st-mybutton url="#" title="今すぐCHECK" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" shadow="#FFB300" ref="on"][/st-flexbox]

マイボックス

カスタマイズ可能なボックスデザイン。

ポイント

(基本デザイン)

[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold"]
<p>(基本デザイン)ここにテキストを入力</p>
[/st-mybox]

私、あの頃何かに追われているような感じで。全然余裕がなくて、意地ばかり張って。振り返ってみると私、みんなに助けられてばっかりだったなぁ・・・って

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold"]
<p>(四角い枠のみ)ここにテキストを入力</p>
[/st-mybox]

(まるみ)時間をかけてお互いの事を知って、お互いの事を受け入れあってここまで来られた。それが一番、私たちの特徴なんじゃないかな。

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold"]
<p>(四隅にまるみ)ここにテキストを入力</p>
[/st-mybox]

参考

タイトルの「参考」の文字とアイコン変更可

[st-mybox title="参考" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>(参考)ここにテキストを入力</p>
[/st-mybox]

関連

(関連)このまま誰も見向きもしてくれないかもしれない。応援なんて、全然もらえないかもしれない。でも、一生懸命頑張って、私たちがとにかく頑張って届けたい!今、私たちがここにいる、この想いを!

[st-mybox title="関連" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>(関連)ここにテキストを入力</p>
[/st-mybox]

メモ

いつか…いつか私たち必ず…ここを満員にしてみせます!

[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>(メモ)ここにテキストを入力</p>
[/st-mybox]

ポイント

やり遂げたよ。最後まで――!

[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold"]
<p>(ポイント)ここにテキストを入力</p>
[/st-mybox]

注意ポイント

私、やっぱりやる!やるったらやる!

[st-mybox title="注意ポイント" fontawesome="fa-exclamation-circle" color="#ef5350" bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2" borderradius="5" titleweight="bold"]
<p>(注意ポイント)ここにテキストを入力</p>
[/st-mybox]

はてな

今度は誰も悲しませないことをやりたいな。自分勝手にならずに済んで、でも楽しくて。沢山の人を笑顔にするために頑張ることが出来て。そんなもの・・あるのかな?

[st-mybox title="はてな" fontawesome="fa-question-circle" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold"]
<p>(はてな)ここにテキストを入力</p>
[/st-mybox]

マイボックス(+CSSクラス)

見出し部分がボックスの中に入ってるデザイン

メモ

こんな気持ち、初めてなんです。やってよかったって、本気で思えたんです。今はこの気持ちを信じたい。このまま誰も見向きもしてくれないかもしれない。応援なんて全然もらえないかもしれない。でも、一生懸命頑張って、私たちがとにかく頑張って届けたい。いま、私たちがここにいる、この思いを!

[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#ff0000" bgcolor="#FAFAFA" borderwidth="0" borderradius="5" titleweight="bold" title_bordercolor="" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
<p>(はてな)ここにテキストを入力</p>
[/st-mybox]

メモ

タイトルにアンダーラインが付いたもの

[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#ff0000" bgcolor="#FAFAFA" borderwidth="0" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
<p>(メモ2)ここにテキストを入力</p>
[/st-mybox]

必要なモノ

  • 上のメモボックスに
  • リストを入れたパターンです
  • 此方は箇条書きタイプ

[st-mybox title="必要なモノ" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-border st-list-circle" margin="25px 0 25px 0"]
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
[/st-mybox]

チェックリスト

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力

[st-mybox title="チェックリスト" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-border st-list-check" margin="25px 0 25px 0"]
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
[/st-mybox]

簡単な流れ

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力

[st-mybox title="簡単な流れ" fontawesome="fa-list-ol" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-no st-list-border" margin="25px 0 25px 0"]
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
[/st-mybox]

見出し付きフリーボックス

見出しは全角15文字以内

かしこい かわいい エリーチカ

これはダミーのテキストです


[st-midasibox title="見出し(全角15文字)" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]
<p>ここにテキストを入力</p>
[/st-midasibox]

かしこい かわいい エリーチカ

タイトル幅を100%にしたデザインです


[st-midasibox-intitle title="見出し(全角15文字)" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]
<p>ここにテキストを入力</p>
[/st-midasibox-intitle]

メモボックス

メモ

ここにテキストを入力

<div class="st-memobox2">
<p class="st-memobox-title">メモ</p>
<p>ここにテキストを入力</p>
</div>

スライドボックス

+ クリックで開閉します。
デフォルトは無色ですが、色を付けました。

+ クリックして下さい

んごおおー!

[st-slidebox text="+ クリックして下さい" bgcolor="" color="#1a1a1a" margin_bottom="20"]
<p>クリックで開かれる内容です</p>
[/st-slidebox]

チェックボックス(番号なしリスト)

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力

[st-square-checkbox bgcolor="" bordercolor="" fontweight="" borderwidth="3"]
<div>
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>
[/st-square-checkbox]

こんな方におすすめ

丸形タイプ(v)

サイトで効果の高い「こんな方におすすめ」リスト。カスタマイザーのオプションでカラー変更可能。

こんな方におすすめ

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力

<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

<ul class="st-blackboard-list st-no-ck-off">st-no-ck-offst-no-ckに変更でアイコンが消える

本日のメニュー

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力

<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">本日のメニュー</span></p>
<ul class="st-blackboard-list st-no-ck">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

「番号付きリスト(olタグ)」にも対応

今日のやることリスト

  1. ここにテキストを入力
  2. ここにテキストを入力
  3. ここにテキストを入力

<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">今日のやることリスト</span></p>
<ol class="st-blackboard-list st-no-ck-off">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ol>
</div>

角型タイプ[v]

角型チェックボックス仕様。

こんな方におすすめ

  • ここにテキストを入力
  • ここにテキストを入力
  • ここにテキストを入力

<div class="st-blackboard square-checkbox">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

ガイドマップメニュー

<div class="st-link-guide st-link-guide-post">
<ul class="st-link-guide-menu">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

この記事が気に入ったら
いいね ! しよう

  • この記事を書いた人
  • 最新記事

きのぷー

2010年南三陸町初訪問。震災後もボランティア活動等を通じて地元との交流を重ね、2012年4月より「いいね!南三陸町」をスタート。町内各地を訪ねて見つけた町の魅力を伝えます。

-ものづくり推進部
-,

© 2012 いいね!南三陸町