htmlcode

右寄せ

<p class="mtop-20" style="text-align: right;">

<p style="text-align: right;">

追記

 <!--more-->

Margin Custom

class="mtop-80"
<p class="mtop-40"></p>

class="mbot-40"
<p class="mbot-80"></p>

リンク<a>タグ内

別ウインドウで開く場合
rel="noreferrer noopener nofollow" target="_blank"

スクロール

　動かしたいコードをここに入れる・動かしたいコードをここに入れる・動かしたいコードをここに入れる・動かしたいコードをここに入れる・動かしたいコードをここに入れる・　

<div class="goscroll">　表のコード　</div>

区切り線

灰：<hr style="border: 1px #ccc solid";>

背景色：<hr style="border: 1px #fcfdfb solid";> 

文字色変更

これは赤色です

<span style="color: red;"></span>

囲み枠

・シンプル囲み枠

#82e0abここに本文を入れます♪

<div style="border: #b7c778 solid 1px; font-size: 100%; padding: 20px;">
  ここに本文を入れます#d6a75a
</div>

#ffcd94ここに本文を入れます♪

<div style="border: #f7a94f solid 1px; font-size: 100%; padding: 20px;">
  ここに本文を入れます
</div>

・影付き囲み枠

ここに本文を入れます♪

<div style="background: #fcfdfb; border: 1px #ccc solid; box-shadow: 0 2px 3px 0 #ddd; font-size: 100%; padding: 20px;">
  ここに本文を入れます
</div>

・ステッチ風囲み枠

ここに本文を入れます♪

<div style=" background: #f9fbef; padding: 20px; border: 2px dashed #dfebb1; box-shadow: 0 0 0 5px #f9fbef; -moz-box-shadow: 0 0 0 5px #f9fbef; -webkit-box-shadow: 0 0 0 5px #f9fbef; font-size: 100%;">
  ここに本文を入れます
</div>

ここに本文を入れます♪

<div style=" background: #fff3e5; padding: 20px; border: 2px dashed #ffcd94; box-shadow: 0 0 0 5px #fff3e5; -moz-box-shadow: 0 0 0 5px #fff3e5; -webkit-box-shadow: 0 0 0 5px #fff3e5; font-size: 100%;">
  ここに本文を入れます
</div>

・背景色枠

#fff3e5ここに本文を入れます♪

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

ここに本文を入れます♪

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

・ぼかし囲み枠

#f9fbefここに本文を入れます♪

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

・点線囲み枠

ここに本文を入れます♪

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

・破線囲み枠（borderpxが破線の太さ）

ここに本文を入れます♪

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

・破線囲み枠＋背景色

ここに本文を入れます♪

<div style="background-color: #fff3e5; border-radius: 5px; border: 1px dashed #ffcd94;font-size: 100%; padding: 20px;">
  ここに本文を入れます
</div>

・タイトル付き囲み枠１（border px が線の太さ）

タイトルここに本文を入れます♪

<fieldset style="border: 1px solid #f7a94f; font-size: 100%;padding: 20px;">
  <legend>
    タイトル
  </legend>
  ここに本文を入れます
</fieldset>

タイトルここに本文を入れます♪

<fieldset style="border: 1px solid #b7c778; font-size: 100%;padding: 20px;">
  <legend>
    タイトル
  </legend>
  ここに本文を入れます
</fieldset>

・タイトル付き囲み枠２

＊タイトル
ここに本文を入れます♪

<div class="mtop-80" style="background: #f7a94f; border: 1px solid #f7a94f; padding-left: 20px;">
  <span style="color: #fcfdfb;">
  タイトル
  </span>
</div>
<div style="border: 1px solid #f7a94f; font-size: 100%; padding: 20px;">
  ここに本文を入れます
</div>

＊タイトル
ここに本文を入れます♪

<div class="mtop-80" style="background: #b7c778; border: 1px solid #b7c778; padding-left: 20px;">
  <span style="color: #fcfdfb;">
    タイトル
  </span>
</div>
<div style="border: 1px solid #b7c778; font-size: 100%; padding: 20px;">
  ここに本文を入れます
</div>

・タイトル付き囲み枠３

＊タイトル
ここに本文を入れます♪

<div style="margin:0em ;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.6em;line-height:1.5em;color:#fcfdfb;background:#f7a94f;font-weight:bold;text-align:center;border-radius:5px 5px 0 0;">
  タイトル
</div>
<div style="background:rgba(255,255,255,0);border:solid 1px #f7a94f; border-radius:0 5px 5px;padding:20px;font-size: 100%;">
  ここに本文を入れます♪
</div>

＊タイトル
ここに本文を入れます♪

<div style="margin:0em ;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.6em;line-height:1.5em;color:#fcfdfb;background:#b7c778;font-weight:bold;text-align:center;border-radius:5px 5px 0 0;">
  タイトル
</div>
<div style="background:rgba(255,255,255,0);border:solid 1px #b7c778;border-radius:0 5px 5px;padding:20px;font-size: 100%;">
  ここに本文を入れます
</div>

・太線囲み枠

ここに本文を入れます♪

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

・白線囲み枠＋背景色

ここに本文を入れます♪

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

・白線囲み枠＋背景色角丸

ここに本文を入れます♪

<div style=" border: 4px solid #ffcd94; padding:2px; border-radius:10px ">
  <div style=" background:#ffcd94;border-radius:10px; font-size: 100%; padding:20px; ">
    ここに本文を入れます
  </div>
</div>

・カラー＋白文字囲み枠

ここに本文を入れます♪

<fieldset style="background:#ffcd94; border:4px double #fcfdfb; border-radius:10px;font-size: 100%; padding: 20px;">
  <span style="color:#fcfdfb;">
    ここに本文を入れます
  </span>
</fieldset>

・グラデーション立体囲み枠

ここに本文を入れます♪

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #fff3e5 inset, 5px 5px 0 #f5f5f5; -moz-box-shadow: 0 0 50px #ffdfbb inset, 5px 5px 0 #f5f5f5; box-shadow: 0 0 50px #ffcd94 inset, 5px 5px 0 #f5f5f5; font-size: 100%;">
  ここに本文を入れます
</div>

吹き出し

・吹き出し（左）

13文字まで (それ以上は改行)

福祿

吹き出しの中のテキスト

福祿

吹き出しの中のテキスト

<!-- balloon Left-->
<div class="balloon">
 <figure class="balloon-image-left">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1HoIkSj7cSqkOBoGzcQ4_XWBqhACbIv-9C6xspvqYp3L8L2bDZbyBfKinJmTVyMOzIQprJgpA9hCaP2kRQV6LZs84ml7ac4C_N4SF8Zzd5tfyL_cy4gQnEu0rSUYFBEGz1l85qzwFFmooZgGhK6s6rQk5RPFuZxI4nBCQ0pE9dpc-EjS_yuYbIf7PA/s300/cat_img_1620139410683%20copy.png" alt="福祿">
 <figcaption class="balloon-image-description"></figcaption>
 </figure>
  <div class="balloon-text-right">
    <p>
     吹き出しの中のテキスト
    </p>
  </div>
</div>
<!-- balloon Left end-->

・吹き出し（右）

摩沙

吹き出しの中のテキスト

摩沙

吹き出しの中のテキスト

<!--Balloon Right-->
<div class="balloon">
 <figure class="balloon-image-right">
   <img alt="摩沙" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmFvcob1lghf8Y0RnVOmXMX-S--ReQ1jZF8fnfXO8eauZCpaK-wtNJzMiu6BIwhyuabKPfeMm6ajP8MBugywnhCNwLYvtwvXY-kBfp9BLwWmWoQlR-QRjBwPgJcQca_s2bdcJ2HA7LpLrGdXCXfGw2gW_ZXx2EEO6DXusZf5nFZFHrdkEDO5adStz2_A/s283/prof_20210504_230419%20copy%202.png" />
 <figcaption class="balloon-image-description"></figcaption>
  </figure>
  <div class="balloon-text-left">
    <p>
     吹き出しの中のテキスト
    </p>
  </div>
</div>
<!--Balloon Right end-->

アコーディオン

こういう下に開く機能 展開後の内容がここに出る

<details>
  <summary>
    タイトル
  </summary>
  展開後の内容
</details>

表の挿入

【おいしい分量】
材料：分量
材料：分量
材料：分量
材料：分量

<table style="text-align: left;"> <tbody> <tr><th>【おいしい分量】</th></tr> <tr><td>材料</td><td>：分量</td></tr> <tr><td>材料</td><td>：分量</td></tr> <tr><td>材料</td><td>：分量</td></tr> <tr><td>材料</td><td>：分量</td></tr> </tbody> </table>

Google 帰属表記

<p style="text-align: center;">Imagery: ©2023 TerraMetrics, Maps data: ©2023 Google <a href="" target="_blank" rel="noopener noreferrer"><u>View on Google Maps</u></a></p>

<iframe>挿入 YouTube, Google Map共有で出現

<div class="exmedia-wrap">
  <div class="exmedia">
    ここに挿入
  </div>
</div>

carousel

<div class="CRwrap">
  <div class="CRitem">
    <img src="画像１CRCRCR.jpg">
  </div>
  <div class="CRitem">
     <img src="画像２CRCRCR.jpg">
  </div>
  <div class="CRitem">
     <img src="画像３CRCRCR.jpg">
  </div>
</div>

クリップボードコピー

HTML 
<p>This is a simple HTML code </p>
サンプル 
ここにコピーできる文章
<!--[ Code Box 1 ]-->
  <div class='K2_CBox'>
    <div class='CB_Heading'>
      <span>HTML</span>
      <button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')">
        <i class='CBox_icn'></i>
      </button>
    </div>

    <!--Add Your Parse HTML code Here-->
    <div id='code1'>
      <pre>&lt;p&gt;This is a simple HTML code &lt;/p&gt;</pre>
    </div>
  </div>
<!--[ Code Box 2 ]-->
  <div class='K2_CBox'>
    <div class='CB_Heading'>
      <span>サンプル</span>
      <button id='copy2' class='C_box_main' onclick="copyC('copy2','code2')">
        <i class='CBox_icn'></i>
      </button>
    </div>

    <!--Add Your Parse HTML code Here-->
    <div id='code2'>
      <pre>ここにコピーできる文章</pre>
    </div>
  </div>

ホテルズコンバインド

<div class="mtop-20" style="text-align: center">
<a href='リンク挿入' target='_blank' rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwQse06zsp6eTPtUSlwug7kXZDsf683j99_KheWupqD6w8F59SqLwhQq2RF6DD6oTxvEhUtp14FShjSNDgVQPvJ7Il1ChbUjIG4hH_1uu2aFgR-bX-A0c2a0Ifo7LXaE7DQIpK7hh270Z/w728-h93-s-no/?authuser=0/" alt="台湾宿泊検索" ><br>このホテルの宿泊価格を比較する</a>
</div>