🎁【ブログをHTMLで簡単に装飾！】装飾して見やすいブログを作ろう

プレゼント企画のご参加ありがとうございます✨

りり

私はSNS×ブログでマネタイズするワーママ、りりです。

このプレゼント企画に参加してくださったということは、ブログを始められたばかりかと思います。

ブログを始めたばかりの頃は…

たくさん時間をかけて書いたのに、こんな記事は人に見せられない😭

私も今でこそ、こうやって記事を書いていますが、ブログを始めた頃は1つの記事を完成させるのに何日もかけていました。

文字を入力したり、画像の挿入やアフィリエイトのリンクを貼ることはできたけど…

りり

あのブロガーさんがやってたアレをここに入れたいのに、どうやってするのか分からない！！

調べようにも装飾の名前が分からないので

名前を調べる→使いたい装飾を見付けたらHTMLを調べる→コピペする→自分のブログにあった色をカラーコードから調べる→思うような装飾にならない→何度も修正→完成

…工程多すぎない😢？

と、記事を書いている時にふとブログを始めた頃のことを思い出し

「きっと私と同じように悩んでいる人は多いはず！何か力になりたい！」と

このプレゼント企画をすることにしました💡

この記事でご紹介する装飾を使うことで

に悩む時間を減らし

ぜひ浮いた時間でたくさん記事を書いたり、マネタイズの戦略を立てる時間にあててください💪🏻🔥

また、今後も「これ知りたかった！」とお役に立てるようなプレゼント企画を考えています✨

ぜひＸをフォローしてお待ちいただけると嬉しいです♪

それでは、長くなりましたが…

下記よりお好きな装飾のHTMLをコピーして、あなたのブログ記事にペーストしてお使いください！

りり

ここまでご覧いただき、ありがとうございました🥰
もしよろしければ、このプレゼント企画の投稿をＸで拡散してくれると嬉しいです！
こそっ)引用リツイートだと泣いて喜びます

注意事項

▶使い方

使いたい装飾がありましたら、見本の下にある背景色がグレーの所をクリックまたはタップするとHTMLをコピーできます。

コピーした後はご自身のブログにペーストし、見本のテキストなどを変更してください。

※お使いのテーマにより当記事と同じように表示されない可能性がありますが、ご了承ください。

▶ご注意ください

記事上にHTMLを表示する関係で、装飾により最初の[の後に数字の1を入れているものがあります。

ペースト後に1を消してご使用ください。

スタイル

▶テキスト

太字

ここに<span class="huto">文字</span>を入れる

赤字

ここに<span class="hutoaka">文字</span>を入れる

大文字

ここに<span class="oomozi">文字</span>を入れる

小文字

ここに<p class="komozi">文字</p>を入れる

ドット線

ここに<span class="dotline">文字</span>を入れる

打消し

ここに<del>文字</del>を入れる

これは参照リンクです

<p class="st-share"><a href="ここにリンク先URLを入れる">これは参照リンクです</a></p>

▶マーカー

黄マーカー

ここに<span class="ymarker">文字</span>を入れる

黄マーカー（細）

ここに<span class="ymarker-s">文字</span>を入れる

赤マーカー

ここに<span class="rmarker">文字</span>を入れる

赤マーカー（細）

ここに<span class="rmarker-s">文字</span>を入れる

青マーカー

ここに<span class="bmarker">文字</span>を入れる

青マーカー（細）

ここに<span class="bmarker-s">文字</span>を入れる

鼠マーカー

ここに<span class="gmarker">文字</span>を入れる

鼠マーカー（細）

ここに<span class="gmarker-s">文字</span>を入れる

▶テキストマーク

参考

ここに<span class="sankou">文字</span>を入れる

必須

ここに<span class="st-hisu">文字</span>を入れる

▶アイコン

※カラーは「カスタマイザー」の「オプション」で設定できます

ここに文章を入れる

<span class="hatenamark2 on-color">ここに文章を入れる</span>

ここに文章を入れる

<span class="attentionmark2 on-color">ここに文章を入れる</span>

ここに文章を入れる

<span class="usermark2 on-color">ここに文章を入れる</span>

ここに文章を入れる

<span class="checkmark2 on-color">ここに文章を入れる</span>

ここに文章を入れる

<span class="memomark2 on-color">ここに文章を入れる</span>

ここに文章を入れる

<span class="oukanmark on-color">ここに文章を入れる</span>

ここに文章を入れる

<span class="bigginermark on-color">ここに文章を入れる</span>

▶ランキング(AFFINGER又はEX版のみ)

ここに文章を入れる

<h4 class="rankh4 rankno-1">ここに文章を入れる</h4>

ここに文章を入れる

<h4 class="rankh4 rankno-2">ここに文章を入れる</h4>

ここに文章を入れる

<h4 class="rankh4 rankno-3">ここに文章を入れる</h4>

ここに文章を入れる

<h4 class="rankh4 rankno-4">ここに文章を入れる</h4>

ランキング見出し(AFFINGER又はEX版のみ）

※" star="〇"の〇の所に表示したい星の数字を入力してください

[1st-rank rankno="1" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="5"]ここに文章を入れる[/st-rank]

↑先頭の1を消してください

[1st-rank rankno="2" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="4"]ここに文章を入れる[/st-rank]

↑先頭の1を消してください

[1st-rank rankno="3" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="3"]ここに文章を入れる[/st-rank]

↑先頭の1を消してください

[1st-rank rankno="4" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="2"]ここに文章を入れる[/st-rank]

↑先頭の1を消してください

▶ボックス

<div class="yellowbox">ここに文章を入れる</div>

<div class="redbox">ここに文章を入れる</div>

<div class="graybox">ここに文章を入れる</div>

<div class="inyoumodoki">ここに文章を入れる</div>

<div style="background: #fceff2; border-left: #fceff2 solid 10px; border: #fceff2 solid 1px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background: #fceff2; box-shadow: #fceff2 0 0 10px 10px; margin: 10px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

二重線

<div style="border-radius: 10px; border: 4px double #ff6699; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="border: 4px double #ff6699; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background-color: #fceff2; border: 4px double #ff6699; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

点線

<div style="border-radius: 1px; border: 4px dotted #ffb6c1; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="border-radius: 5px; border: 1px dashed #ffb6c1; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="border-radius: 5px; border: 3px dashed #ffb6c1; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background-color: #fceff2; border-radius: 5px; border: 1px dashed #ffb6c1; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background: #ffe6e8; padding: 20px; border: 2px dashed #ffb6c1; box-shadow: 0 0 0 5px #ffe6e8; -moz-box-shadow: 0 0 0 5px #ffe6e8; -webkit-box-shadow: 0 0 0 5px #ffe6e8; font-size: 100%;">ここに文章を入れる</div>

<div style="color: white; background: #f98289; padding: 20px; border: 2px dashed rgba(255 , 255 , 255 , 0.5); -moz-border-radius: 6px; -moz-box-shadow: 0 0 0 5px #f98289 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); -webkit-border-radius: 6px; -webkit-box-shadow: 0 0 0 5px #f98289 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); border-radius: 6px; box-shadow: 0 0 0 5px #f98289 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); font-size: 100%;">ここに文章を入れる</div>

その他

<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;">ここに文章を入れる</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: #ff6699 solid 3px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="border: 4px solid #ffe6ee; padding: 2px;">
<div style="background: #ffe6ee; font-size: 100%; padding: 20px;">ここに文章を入れる</div>
</div>

<div style="border: 4px solid #fdeff2; padding: 2px; border-radius: 10px;">
<div style="background: #fdeff2; border-radius: 10px；font-size: 100%; padding: 20px;">ここに文章を入れる</div>
</div>

<fieldset style="background: #f98289; border: 4px double #ffffff; border-radius: 10px; font-size: 100%; padding: 20px;"><span style="color: #ffffff;">ここに文章を入れる</span></fieldset>

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; font-size: 100%;">ここに文章を入れる</div>

水玉

<div style="background: #fceff2; background-image: radial-gradient(#ffc0cb 10%, transparent 20%), radial-gradient(#ffc0cb 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background: #fceff2; background-image: radial-gradient(#fce3e9 10%, transparent 20%), radial-gradient(#fce3e9 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background: #ffe6ea; background-image: radial-gradient(#fff 10%, transparent 20%), radial-gradient(#fff 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background: #ffccd5; background-image: radial-gradient(#fff 10%, transparent 10%), radial-gradient(#fff 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background: #ffe6ea; background-image: radial-gradient(#fff 20%, transparent 20%), radial-gradient(#fff 20%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background: #ffe6ea; background-image: radial-gradient(#fff 20%, transparent 20%), radial-gradient(#fff 20%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

ボーダー

<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 ); background-size: 30px 30px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 ); background-size: 20px 20px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 ); background-size: 10px 10px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

<div style="background-image: linear-gradient( -45deg, #fff 25%, #ffe5f2 25%,#ffe5f2 50%, #fff 50%, #fff 75%, #ffe5f2 75%, #ffe5f2 ); background-size: 5px 5px; font-size: 100%; padding: 20px;">ここに文章を入れる</div>

▶ワイドボックス(EX限定)

<div class="st-wide-background">ここに文章を入れる</div>

<div class="st-wide-background-left">ここに文章を入れる</div>

<div class="st-wide-background-right">ここに文章を入れる</div>

[1st-wide-background myclass="" backgroud_image="" bgcolor="#FFF9C4" align=""]ここに文章を入れる[/st-wide-background]

↑先頭の1を消してください

[1st-wide-background myclass="" backgroud_image="" bgcolor="#F8BBD0" align="l"]ここに文章を入れる[/st-wide-background]

↑先頭の1を消してください

[1st-wide-background myclass="" backgroud_image="" bgcolor="#B3E5FC" align="r"]ここに文章を入れる[/st-wide-background]

↑先頭の1を消してください

▶リスト

※カラーは「カスタマイザー」の「オプション」で設定できます

ドット

<div class="st-list-border">
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

マル

<div class="st-list-circle">
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

<div class="st-list-circle st-list-border">
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

簡易チェック

<div class="st-list-check">
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

<div class="st-list-check st-list-border">
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

チェックボックス

<div class="st-square-checkbox st-square-checkbox-nobox">
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

チェックリスト

<div class="maruck">
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

ナンバリング

<div class="maruno">
<ol>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ol>
</div>

<div class="st-list-no">
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

<div class="st-list-no st-list-border">
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

タグ

▶デザイン

クリップメモ

[1st-cmemo webicon="st-svg-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-external-link" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-bookmark" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-bullhorn" iconcolor="#FFEB3B" bgcolor="#FFFDE7" color="#000000" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-question-circle" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-comments" iconcolor="#F48FB1" bgcolor="#FCE4EC" color="#000000" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-code" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-lightbulb-o" iconcolor="#FFA726" bgcolor="#FFF3E0" color="#000000" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-user" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="100"]（ユーザー）ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo fontawesome="st-svg-bigginer_l" iconcolor="#9CCC65" bgcolor="#F1F8E9" color="#000000" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-exclamation-circle" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

[1st-cmemo webicon="st-svg-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="100"]ここに文章を入れる[/st-cmemo]

↑先頭の1を消してください

ミニふきだし

[1st-minihukidashi bgcolor="#f3f3f3" color="#000000" margin="0 0 20px 0"]ここに文章を入れる[/st-minihukidashi]

↑先頭の1を消してください

[1st-minihukidashi bgcolor="#FFB74D" color="#fff" margin="0 0 20px 0"]ここに文章を入れる[/st-minihukidashi]

↑先頭の1を消してください

[1st-minihukidashi bgcolor="#F48FB1" color="#fff" margin="0 0 20px 0"]ここに文章を入れる[/st-minihukidashi]

↑先頭の1を消してください

[1st-minihukidashi bgcolor="#4FC3F7" color="#fff" margin="0 0 20px 0"]ここに文章を入れる[/st-minihukidashi]

↑先頭の1を消してください

[1st-minihukidashi bgcolor="#7CB342" color="#fff" margin="0 0 20px 0"]ここに文章を入れる[/st-minihukidashi]

↑先頭の1を消してください

[1st-minihukidashi bgcolor="#f44336" color="#fff" margin="0 0 20px 0"]ここに文章を入れる[/st-minihukidashi]

↑先頭の1を消してください

複合

<1div class="st-editor-margin" style="margin-bottom: -5px;">[1st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#FFC107" color="#fff" margin="0 0 0 -6px"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-cmemo webicon="st-svg-file-text-o" iconcolor="#FFC107" bgcolor="#FFFDE7" color="#000000" iconsize="200"]

②ここに文章を入れる

[/st-cmemo]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -5px;">[1st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-cmemo webicon="st-svg-hand-o-right" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]

②ここに文章を入れる

[/st-cmemo]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -5px;">[1st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-cmemo webicon="st-svg-thumbs-o-up" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]

②ここに文章を入れる

[/st-cmemo]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -5px;">[1st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-cmemo webicon="st-svg-thumbs-o-down" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]

②ここに文章を入れる

[/st-cmemo]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -5px;">[1st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#ef5350" color="#fff" margin="0 0 0 -6px"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-cmemo webicon="st-svg-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="200"]

②ここに文章を入れる

[/st-cmemo]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -5px;">[1st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#66BB6A" color="#fff" margin="0 0 0 -8px"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-cmemo webicon="st-svg-search" iconcolor="#66BB6A" bgcolor="#E8F5E9" color="#000000" iconsize="200"]

②ここに文章を入れる

[/st-cmemo]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -5px;">[1st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#F06292" color="#fff" margin="0 0 0 -9px"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-cmemo webicon="st-svg-user" iconcolor="#F06292" bgcolor="#FCE4EC" color="#000000" iconsize="200"]

②ここに文章を入れる

[/st-cmemo]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -5px;">[1st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#42A5F5" color="#fff" margin="0 0 0 -9px"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-cmemo webicon="st-svg-user" iconcolor="#42A5F5" bgcolor="#E3F2FD" color="#000000" iconsize="200"]

②ここに文章を入れる

[/st-cmemo]

↑先頭の1を消してください

複合（アイコンなし）

<1div class="st-editor-margin" style="margin-bottom: -20px;">[1st-minihukidashi webicon="st-svg-file-text-o" fontsize="90" fontweight="bold" bgcolor="#FFC107" color="#fff" margin="0 0 0 0"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#FFFDE7" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]

②ここに文章を入れる

[/st-mybox]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -20px;">[1st-minihukidashi webicon="st-svg-hand-o-right" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]

②ここに文章を入れる

[/st-mybox]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -20px;">[1st-minihukidashi webicon="st-svg-circle-o" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]

②ここに文章を入れる

[/st-mybox]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -20px;">[1st-minihukidashi webicon="st-svg-times" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]

②ここに文章を入れる

[/st-mybox]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -20px;">[1st-minihukidashi webicon="st-svg-exclamation-circle" fontsize="90" fontweight="bold" bgcolor="#ef5350" color="#fff" margin="0 0 0 0"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#ffebee" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]

②ここに文章を入れる

[/st-mybox]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -20px;">[1st-minihukidashi webicon="st-svg-search" fontsize="90" fontweight="bold" bgcolor="#66BB6A" color="#fff" margin="0 0 0 0"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E8F5E9" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]

②ここに文章を入れる

[/st-mybox]

↑先頭の1を消してください

<1div class="st-editor-margin" style="margin-bottom: -20px;">[1st-minihukidashi webicon="st-svg-question-circle" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]①ここに見出しを入れる[/st-minihukidashi]</div>
[1st-mybox title="" webicon="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]

②ここに文章を入れる

[/st-mybox]

↑先頭の1を消してください

まるもじ（小）

[1st-marumozi webicon="" bgcolor="#f3f3f3" color="#000000" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi]

↑先頭の1を消してください

[1st-marumozi webicon="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi]

↑先頭の1を消してください

[1st-marumozi webicon="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi]

↑先頭の1を消してください

[1st-marumozi webicon="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi]

↑先頭の1を消してください

[1st-marumozi webicon="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi]

↑先頭の1を消してください

[1st-marumozi webicon="st-svg-exclamation-circle" bgcolor="#ef5350" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi]

↑先頭の1を消してください

まるもじ（大）

ここに文章を入れる

[1st-marumozi-big webicon="" bgcolor="#f3f3f3" color="#000000" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi-big]

↑先頭の1を消してください

ここに文章を入れる

[1st-marumozi-big webicon="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi-big]

↑先頭の1を消してください

ここに文章を入れる

[1st-marumozi-big webicon="" bgcolor="#F48FB1" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi-big]

↑先頭の1を消してください

ここに文章を入れる

[1st-marumozi-big webicon="" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi-big]

↑先頭の1を消してください

ここに文章を入れる

[1st-marumozi-big webicon="st-svg-question-circle" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi-big]

↑先頭の1を消してください

ここに文章を入れる

[1st-marumozi-big webicon="st-svg-check-circle" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi-big]

↑先頭の1を消してください

ここに文章を入れる

[1st-marumozi-big webicon="st-svg-check-circle" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]ここに文章を入れる[/st-marumozi-big]

↑先頭の1を消してください

ここに文章を入れる

[1st-marumozi-big webicon="st-svg-exclamation-circle" bgcolor="#ef5350" color="#fff" radius="30" margin="0 10px 0 0"]ここに文章を入れる[/st-marumozi-big]

↑先頭の1を消してください

ステップ

step
1①ここに見出しを入れる

②ここに文章を入れる

step
2③ここに見出しを入れる

④ここに文章を入れる

step
3⑤ここに見出しを入れる

⑥ここに文章を入れる

[1st-step step_no="1"]①ここに見出しを入れる[/st-step]

②ここに文章を入れる

[1st-step step_no="2"]③ここに見出しを入れる[/st-step]

④ここに文章を入れる

[1st-step step_no="3"]⑤ここに見出しを入れる[/st-step]

⑥ここに文章を入れる

↑先頭の1を消してください

ポイント

ここに文章を入れる

[1st-point fontsize="" fontweight="bold" bordercolor=""]ここに文章を入れる[/st-point]

↑先頭の1を消してください

ラベル

[1st-label label="ここに見出しを入れる" bgcolor="#FBC02D" color="#FFFFFF"]



[/st-label]

↑先頭の1を消してください

※PC（960px以上）Tab（955px〜600px）のレスポンシブ表示となります
※コンテンツ内容は「バナーショートコード」で作成しています

流れる文字

<div class="st-marquee">

ここに文章を入れるここに文章を入れるここに文章を入れるここに文章を入れるここに文章を入れるここに文章を入れる

</div>

マイボックス

[1st-mybox title="ここに見出しを入れる" webicon="st-svg-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold"]
ここに文章を入れる
[/st-mybox]

↑先頭の1を消してください

[1st-mybox title="" webicon="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold"]
ここに文章を入れる
[/st-mybox]

↑先頭の1を消してください

[1st-mybox title="" webicon="" color="#757575" bordercolor="#BDBDBD" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold"]
ここに文章を入れる
[/st-mybox]

↑先頭の1を消してください

[1st-mybox title="ここに見出しを入れる" webicon="st-svg-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
ここに文章を入れる
[/st-mybox]

↑先頭の1を消してください

[1st-mybox title="ここに見出しを入れる" webicon="st-svg-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
ここに文章を入れる
[/st-mybox]

↑先頭の1を消してください

[1st-mybox title="ここに見出しを入れる" webicon="st-svg-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
ここに文章を入れる
[/st-mybox]

↑先頭の1を消してください

[1st-mybox title="ここに見出しを入れる" webicon="st-svg-check-circle" color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold"]
ここに文章を入れる
[/st-mybox]

↑先頭の1を消してください

[1st-mybox title="ここに見出しを入れる" webicon="st-svg-exclamation-circle" color="#ef5350" bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2" borderradius="5" titleweight="bold"]
ここに文章を入れる
[/st-mybox]

↑先頭の1を消してください

[1st-mybox title="ここに見出しを入れる" webicon="st-svg-question-circle" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold"]
ここに文章を入れる
[/st-mybox]

↑先頭の1を消してください

タイトル付きフリーボックス

[1st-midasibox title="見出しを入れる（全角15文字）" webicon="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]

ここに文章を入れる

[/st-midasibox]

↑先頭の1を消してください

[1st-midasibox-intitle title="見出しを入れる" webicon="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]

ここに文章を入れる

[/st-midasibox-intitle]

↑先頭の1を消してください

メモボックス

<div class="st-memobox2">
<p class="st-memobox-title">ここに見出しを入れる</p>
ここに文章を入れる

</div>

スライドボックス

[1st-slidebox text="+ クリックして下さい（文章を入れる）" bgcolor="" color="#1a1a1a" margin_bottom="20"]

クリックで開かれる文章を入れる

[/st-slidebox]

↑先頭の1を消してください

チェックボックス（番号なしリスト）

<div>
<ul>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

見出し付き

※カラーは「カスタマイザー」の「オプション」で設定できます

※<ul class="st-blackboard-list st-no-ck-off">のst-no-ck-offをst-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-off">
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
<li>ここに文章を入れる</li>
</ul>
</div>

<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>

<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>

<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>

▶カスタムボタン

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="" color="#000000" bgcolor="#FFF" bgcolor_top="" bordercolor="#CCC" borderwidth="3" borderradius="0" fontsize="" fontweight="" width="100" fontawesome_after="" shadow="" ref=""]

↑先頭の1を消してください

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="st-svg-angle-right" shadow="#FFB300" ref="on"]

↑先頭の1を消してください

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="bold" fontweight="bold" width="" fontawesome_after="st-svg-angle-right" shadow="#c62828" ref="on"]

↑先頭の1を消してください

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="_blank" color="#fff" bgcolor="#43A047" bgcolor_top="#66BB6A" bordercolor="#81C784" borderwidth="1" borderradius="5" fontsize="bold" fontweight="bold" width="" fontawesome_after="st-svg-angle-right" shadow="#388E3C" ref="on"]

↑先頭の1を消してください

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="bold" fontweight="bold" width="" fontawesome_after="st-svg-angle-right" shadow="#039BE5" ref="on"]

↑先頭の1を消してください

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="st-svg-envelope" target="" color="#fff" bgcolor="#03A9F4" bgcolor_top="#14b4fc" bordercolor="#039BE5" borderwidth="1" borderradius="5" fontsize="" fontweight="" width="90" fontawesome_after="" shadow="#039BE5" ref="on"]

↑先頭の1を消してください

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="st-svg-angle-right" shadow="" ref="on"]

↑先頭の1を消してください

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="" color="#fff" bgcolor="#F48FB1" bgcolor_top="#f6a6c1" bordercolor="#F48FB1" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="st-svg-angle-right" shadow="" ref="on"]

↑先頭の1を消してください

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="" color="#fff" bgcolor="#4FC3F7" bgcolor_top="#67cbf8" bordercolor="#4FC3F7" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="st-svg-angle-right" shadow="" ref="on"]

↑先頭の1を消してください

ここに見出しを入れる

[1st-mybutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" fontawesome="st-svg-oukan" target="" color="#fff" bgcolor="#FBC02D" bgcolor_top="#fbc846" bordercolor="#FBC02D" borderwidth="1" borderradius="5" fontsize="110" fontweight="bold" width="90" fontawesome_after="" shadow="" ref="on"]

↑先頭の1を消してください

[1st-mybutton-mini url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="" color="#000000" bgcolor="#f3f3f3" bgcolor_top="" borderradius="3" fontsize="" fontweight="" fontawesome_after="" shadow="#BDBDBD" ref=""]

↑先頭の1を消してください

[1st-mybutton-mini url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="" color="#fff" bgcolor="#FFB74D" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="st-svg-angle-right" shadow="#FFB300" ref=""]

↑先頭の1を消してください

[1st-mybutton-mini url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="st-svg-angle-right" shadow="#f44336" ref=""]

↑先頭の1を消してください

[1st-mybutton-mini url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="_blank" color="#fff" bgcolor="#9CCC65" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="st-svg-angle-right" shadow="#8BC34A" ref=""]

↑先頭の1を消してください

[1st-mybutton-mini url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="_blank" color="#fff" bgcolor="#4FC3F7" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="st-svg-angle-right" shadow="#03A9F4" ref=""]

↑先頭の1を消してください

[1st-mcbutton url="ここにリンク先のURLを入れる" title="ここに見出しを入れる" rel="" webicon="" target="" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="st-svg-chevron-right" shadow="#c62828" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="ここに太字のテキスト"]ここに一言を入れる[/st-mcbutton]

↑先頭の1を消してください

※AFFINGER又はEX版のみ

▶会話ふきだし

※最大8つまで設定できます(HTML内の数字を1～8で画像変更)

※アイコン画像はAFFINGERの場合は「AFFINGER管理」「会話アイコン」で設定できます

りり

ここに文章を入れる

[1st-kaiwa1]ここに文章を入れる[/st-kaiwa1]

↑先頭の1を消してください

ここに文章を入れる

[1st-kaiwa2 r]ここに文章を入れる[/st-kaiwa2]

↑先頭の1を消してください

※左向きのふきだしにしたい場合は[1st-kaiwa2 r]のrを消してください

▶画像付きコメント(AFFINGER又はEX版のみ）

※" star="〇"の〇の所に表示したい星の数字を入力してください

※画像は差し換えてください

タイトル

◯代男性

ここに文章を入れる

[1st-user-comment-box title="タイトル" user_text="◯代男性" color="" star="5"][/st-user-comment-box]

ここに文章を入れる

↑先頭の1を消してください

タイトル

◯代男性

ここに文章を入れる

[1st-user-comment-box title="タイトル" user_text="◯代男性" color="" star="4"][/st-user-comment-box]

ここに文章を入れる

[/st-mybox]

↑先頭の1を消してください

カラーコード

HTML内に〇〇colorとある所は、#以降のカラーコード(英数字)を変えることで好きな色に変更できます！

下記リンクを参考に、あなたのブログにあった色に変更してみてください✨

>>>カラーコードWEB色見本