これは私がブログ記事を書くうえでの備忘録兼コピペシートです。
- 水平線(区切り等)
- 枠と背景(クリーム色)(角は丸め)
- 枠と背景(クリーム色)
- 背景のみ(クリーム色)
- 枠のみ(角は丸め)
- 枠のみ
- 枠のみ(幅自動を追加)
- 枠と背景(水色)(角は丸め)
- 枠のみ(青緑太枠)
- 文字マーカー(黄色、高さ100%)
- 文字マーカー(黄色、高さ30%)
- 文字マーカー(黄色、高さ10%)
- レ点マーク付きテキスト(詳細設定はCSSとhead)
- 感嘆符付きテキスト(詳細設定はCSS)
- 外部リンクマーク付きテキスト(詳細設定はCSS)
- 左向きの吹き出し-背景のみ(詳細設定はCSS)
- 左向きの吹き出し-枠のみ(詳細設定はCSS)
- 右下向きの吹き出し-円形(詳細設定はCSS)
- 下向きの吹き出し-円形(詳細設定はCSS)
- ボックス(枠の途中にタイトル)
- ボックス(ラベル付き)
- ボックス(ひとこと)
- テープ付き紙ボックス
- 黒板風ボックス
- ボタン 四角枠に青色
- ボタン 四角枠に白色
- ボタン 丸角枠に橙色
- リンクを文章として表示する
- ページ内の特定の場所へジャンプ
- ルビ(フリガナ)を振る
- アコーディオンパネル(開閉式)
- (定型用)タイトル
水平線(区切り等)
コピー用【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>
レ点マーク付きテキスト(詳細設定はCSSとhead)
ここに文章を入力するって約束したじゃん!
コピー用【html】
<p class="Emphasis_h_10">ここに文章を入力するって約束したじゃん!</p>
head要素の参考元↓
感嘆符付きテキスト(詳細設定はCSS)
ここに文章を入力するって約束したじゃん!
コピー用【html】
<p class="Emphasis_h_11">ここに文章を入力するって約束したじゃん!</p>
外部リンクマーク付きテキスト(詳細設定はCSS)
ここに文章を入力するって約束したじゃん!
コピー用【html】
<p class="Emphasis_h_12">ここに文章を入力するって約束したじゃん!</p>
左向きの吹き出し-背景のみ(詳細設定はCSS)
ここに文章を入力するって約束したじゃん!
コピー用【html】
<div class="balloon10-left">
<p>ここに文章を入力するって約束したじゃん!</p>
</div>
参考記事 ↓
左向きの吹き出し-枠のみ(詳細設定はCSS)
ここに文章を入力するって約束したじゃん!
コピー用【html】
<div class="balloon11-left">
<p>ここに文章を入力するって約束したじゃん!</p>
</div>
右下向きの吹き出し-円形(詳細設定はCSS)
POINT
コピー用【html】
<div class="balloon20-right-btm">
<p>POINT</p>
</div>
下向きの吹き出し-円形(詳細設定はCSS)
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で着地点を作ってあげればOK。
コピー用【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>