これは私がブログ記事を書くうえでの備忘録兼コピペシートです。
- 水平線（区切り等）
- 枠と背景（クリーム色）（角は丸め）
- 枠と背景（クリーム色）
- 背景のみ（クリーム色）
- 枠のみ（角は丸め）
- 枠のみ
- 枠のみ（幅自動を追加）
- 枠と背景（水色）（角は丸め）
- 枠のみ（青緑太枠）
- 文字マーカー（黄色、高さ100%）
- 文字マーカー（黄色、高さ30%）
- 文字マーカー（黄色、高さ10%）
- レ点マーク付きテキスト（詳細設定はＣＳＳとhead）
- 感嘆符付きテキスト（詳細設定はＣＳＳ）
- 外部リンクマーク付きテキスト（詳細設定はＣＳＳ）
- 左向きの吹き出し-背景のみ（詳細設定はＣＳＳ）
- 左向きの吹き出し-枠のみ（詳細設定はＣＳＳ）
- 右下向きの吹き出し-円形（詳細設定はＣＳＳ）
- 下向きの吹き出し-円形（詳細設定はＣＳＳ）
- ボックス（枠の途中にタイトル）
- ボックス（ラベル付き）
- ボックス（ひとこと）
- テープ付き紙ボックス
- 黒板風ボックス
- ボタン 四角枠に青色
- ボタン 四角枠に白色
- ボタン 丸角枠に橙色
- リンクを文章として表示する
- ページ内の特定の場所へジャンプ
- ルビ（フリガナ）を振る
- アコーディオンパネル（開閉式）
- （定型用）タイトル
水平線（区切り等）
コピー用【html】
<p> </p>
<hr />
<p> </p>
枠と背景（クリーム色）（角は丸め）
コピー用【html】
<div style="background: #fffff9; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #d3d3d3; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
枠と背景（クリーム色）
コピー用【html】
<div style="background: #fffff9; border: 1px solid #d3d3d3; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
背景のみ（クリーム色）
コピー用【html】
<div style="background: #fffff0; border: none; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
枠のみ（角は丸め）
コピー用【html】
<div style="-webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #d3d3d3; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
枠のみ
コピー用【html】
<div style="border: 1px solid #d3d3d3; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
枠のみ（幅自動を追加）
コピー用【html】
<div style="display:inline-block; border: 1px solid #d3d3d3; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
枠と背景（水色）（角は丸め）
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
枠のみ（青緑太枠）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<div style="display: inline-block; border: 3px solid #62c1ce; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
文字マーカー（黄色、高さ100%）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<span style="background: linear-gradient(transparent 0%, #ffff00 0%);">ここに文章を入力するって約束したじゃん！</span>
文字マーカー（黄色、高さ30%）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<span style="background: linear-gradient(transparent 70%, #ffff00 0%);">ここに文章を入力するって約束したじゃん！</span>
文字マーカー（黄色、高さ10%）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<span style="background: linear-gradient(transparent 90%, #ffff00 0%);">ここに文章を入力するって約束したじゃん！</span>
レ点マーク付きテキスト（詳細設定はＣＳＳとhead）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<p class="Emphasis_h_10">ここに文章を入力するって約束したじゃん！</p>
head要素の参考元↓
感嘆符付きテキスト（詳細設定はＣＳＳ）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<p class="Emphasis_h_11">ここに文章を入力するって約束したじゃん！</p>
外部リンクマーク付きテキスト（詳細設定はＣＳＳ）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<p class="Emphasis_h_12">ここに文章を入力するって約束したじゃん！</p>
左向きの吹き出し-背景のみ（詳細設定はＣＳＳ）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<div class="balloon10-left">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
参考記事 ↓
左向きの吹き出し-枠のみ（詳細設定はＣＳＳ）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<div class="balloon11-left">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
右下向きの吹き出し-円形（詳細設定はＣＳＳ）
POINT
コピー用【html】
<div class="balloon20-right-btm">
<p>POINT</p>
</div>
下向きの吹き出し-円形（詳細設定はＣＳＳ）
POINT
コピー用【html】
<div class="balloon21">
<p>POINT</p>
</div>
ボックス（枠の途中にタイトル）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<div class="box10">
<span class="box-title">POINT</span>
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
ボックス（ラベル付き）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<div class="box11">
<span class="box-title">POINT</span>
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
ボックス（ひとこと）
ここに文章を入力するって約束したじゃん！
コピー用【html】
<div class="box12">
<span class="box12-circle1">ひ</span>
<span class="box12-circle2">こ</span>
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
テープ付き紙ボックス
ここに文章を入力するって約束したじゃん！
コピー用【html】
<div class="tape-box">
<div class="tape"></div>
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
黒板風ボックス
ここに文章を入力するって約束したじゃん！
コピー用【html】
<div class="blackboard-box">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>
ボタン 四角枠に青色
コピー用【html】
<p class="button10">
<a href="ここにURL">ここに文章を入力</a>
</p>
ボタン 四角枠に白色
コピー用【html】
<p class="button11">
<a href="ここにURL">ここに文章を入力</a>
</p>
ボタン 丸角枠に橙色
コピー用【html】
<p class="button12">
<a href="ここにURL">ここに文章を入力</a>
</p>
リンクを文章として表示する
コピー用【html】
<a href="ここにURL">ここに見た目の文章</a>
ページ内の特定の場所へジャンプ
ここに着地できた？
pやh2などに「id="○○○○○"」をつけてね。
aはダメじゃないけど><の間に挟めない。
それではジャンプ練習！→ここを押してね。
なお、目次へジャンプしたい場合は、目次の直前にpで着地点を作ってあげればＯＫ。
コピー用【html】
<p id="nanikatekitouni">ここに着地できた？</p>
<p>それではジャンプ練習！→<a href="#nanikatekitouni">ここ</a>を押してね。</p>
ルビ（フリガナ）を振る
前――
コピー用【html】
<p>前――<ruby> <rb>ルビを振りたい言葉</rb> <rp>（</rp> <rt>ここにルビ</rt> <rp>）</rp> </ruby>――後</p>
アコーディオンパネル（開閉式）
クリックで○○を表示
ここに開閉内の文章とかを入力
コピー用【html】
<div><details> <summary><span style="text-decoration: underline;">クリックで○○を表示</span></summary>
<p>ここに開閉内の文章とかを入力</p>
</details></div>
（定型用）タイトル
ここに文章を入力するって約束したじゃん！
コピー用【html】
<p>ここに文章を入力するって約束したじゃん！</p>
