今日から始めるAI×電子工作 
こんばんは、ボーノです。
WordPressのテーマをDiverに乗り換えてから1ヶ月ほどたちました。
Diverはデザイン性がとても高いので、タグを使うのがとても楽しいです。
ただ種類が多くていつもタグを忘れるので、よく使うタグをまとめました。
なお、このブログ用に作られているものなので、みなさんが使う場合はお好きなようにカスタマイズしてみてください。
使用頻度の高いタグリスト
1 2 3 | <h2>h2タイトル</h2> |
h2タイトル
1 2 3 | <h3>h3タイトル</h3> |
h3タイトル
1 2 3 | <h4>h4タイトル</h4> |
h4タイトル
1 2 3 | <span class="sc_marker red">強調したい所</span> |
強調したい所
1 2 3 | <span class="sc_marker y">ちょっと強調したい所</span> |
ちょっと強調したい所
1 2 3 | <span class="sc_marker blue">人の気持ち</span> |
人の気持ち
1 2 3 | <span style="color: #000000" class="sc_marker-animation red active">一番強調したい点</span> |
一番強調したい点
1 2 3 4 5 | <blockquote>引用内容 <div class="blockquote_ref"> <div><a href="X" target="_blank" rel="noopener noreferrer">引用先</a></div> </div> </blockquote> |
引用内容
1 2 3 4 5 6 7 | <div class="voice clearfix right n_bottom"> <div class="icon"> <img src="XXX" /> <div class="name"></div> </div> <div class="text sc_balloon right white">所感</div> </div> |
所感
1 2 3 4 5 6 7 8 9 10 11 | <div class="sc_frame_wrap block blue"> <div class="sc_frame_title"> <div class="sc_frame_icon"><i class="fa fa-arrow-circle-right" aria-hidden="true"><span>fa-arrow-circle-right</span></i></div> <span>リスト</span> </div> <div class="sc_frame shadow "> <ul> <li>あ</li> </ul> </div> </div> |
fa-arrow-circle-right
リスト
- あ
1 2 3 4 5 6 7 8 9 10 11 | <div class="sc_frame_wrap block red"> <div class="sc_frame_title"> <div class="sc_frame_icon"><i class="fa fa-arrow-circle-right" aria-hidden="true"><span>fa-arrow-circle-right</span></i></div> <span>注意点</span> </div> <div class="sc_frame shadow "> <ul> <li>あ</li> </ul> </div> </div> |
fa-arrow-circle-right
注意点
- あ
1 | <span class="badge btag blue"><i class="fa fa-arrow-circle-right before" aria-hidden="true"><span>fa-arrow-circle-right</span></i>関連記事</span><a href="https://rockermovie.com/2019/06/06/deposit-bonus-fx-exchange/">内部リンク先</a> |
fa-arrow-circle-right関連記事内部リンク先
1 | <span class="badge btag yellow"><i class="fa fa-arrow-circle-right before" aria-hidden="true"><span>fa-arrow-circle-right</span></i>外部リンク</span><a href="https://rockermovie.com/2019/06/06/deposit-bonus-fx-exchange/">外部リンク先</a> |
fa-arrow-circle-right外部リンク外部リンク先
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div><div><div class="sc_designlist li lborder red"><ul><li><span style="font-size: 10pt;"> <span class="badge radius red">Point.1</span><span style="font-size: 12pt;"> <strong style="color: #ff6600;">AAA</strong></span><strong style="color: #ff6600;"><br> </strong> aaa</span></p><div class="border" style="border-color: #ccc; border-top-width: 2px; border-top-style: dotted;"> </div></li></ul></div></div> <div><div><div class="sc_designlist li lborder red"><ul><li><span style="font-size: 10pt;"> <span class="badge radius red">Point.2</span><span style="color: #ff6600;"><strong> <span style="font-size: 12pt;">BBB</span><br> </strong></span> bbb</span><p> <div class="border" style="border-color: #ccc; border-top-width: 2px; border-top-style: dotted;"> </div></li></ul></div></div> <div><div><div class="sc_designlist li lborder red"><ul><li><span style="font-size: 10pt;"> <span class="badge radius red">Point.3</span><span style="color: #ff6600;"><strong> <span style="font-size: 12pt;">CCC</span><br> </strong></span> ccc</span></p><div class="border" style="border-color: #ccc; border-top-width: 2px; border-top-style: dotted;"> </div></li></ul></div></div></div></div></div> |
- Point.1AAA
aaa
- Point.2BBB
bbb
- Point.3CCC
ccc
1 2 3 4 5 6 7 | <table border="1"> <tbody> <tr><th>あ</th><td>あ</td></tr> <tr><th>あ</th><td>あ</td></tr> <tr><th>あ</th><td>あ</td></tr> </tbody> </table> |
| あ | あ |
|---|---|
| あ | あ |
| あ | あ |
1 2 3 4 5 6 7 | <div class="sc_frame_wrap onframe green"><div class="sc_frame_title"><div class="sc_frame_icon"></div> <span>特徴</span> </p></div><div class="sc_frame shadow "><ul> <li class="sc_frame_text">1</li> <li class="sc_frame_text">2</li> <li>3</li> </ul></div></div> |
特徴
- 1
- 2
- 3
1 2 3 4 5 6 7 | <div class="sc_frame_wrap onframe blue"><div class="sc_frame_title"><div class="sc_frame_icon"></div> <span>メリット</span> </p></div><div class="sc_frame shadow "><ul> <li class="sc_frame_text">1</li> <li class="sc_frame_text">2</li> <li>3</li> </ul></div></div> |
メリット
- 1
- 2
- 3
1 2 3 4 5 6 7 | <div class="sc_frame_wrap onframe red"><div class="sc_frame_title"><div class="sc_frame_icon"></div> <span>デメリット</span> </p></div><div class="sc_frame shadow "><ul> <li class="sc_frame_text">1</li> <li class="sc_frame_text">2</li> <li>3</li> </ul></div></div> |
デメリット
- 1
- 2
- 3
もっと知りたい方は
参考サイト
下記サイトもDiverを使用しており、いつも参考にしています。
fa-arrow-circle-right外部リンクアドリエット
公式ページ
Diverの公式ホームページに紹介されています。
fa-arrow-circle-right外部リンクショートコードの紹介：文字の装飾 | wordpressテーマ「Diver」
コードをエスケープする時
これはブログアップ用のメモです。
ブログにコードをアップする時は、特殊文字をエスケープする必要があります。
そんな時は、下記サイトで一括でエスケープするのが便利。
fa-arrow-circle-right外部リンク[HTML特殊文字変換｜コードをホームページに載せる時に便利 すぐに使える便利なWEBツール
＼電子工作歴9年の私のイチ押し！ELEGOOの電子工作キット／
