wordpressでよく使うHTMLコピペ用ページを作りました

WordPressは下書きをプレーンなテキストエディタで書いておくと便利。なので、ほぼ自分用にHTMLコピペ用ページ作りました。HTMLのコピペソースとして利用できます。デザインは使っているテーマのcssに依存します。



—–HTMLsource—–
<img src="https://yukalog.org/wp-content/uploads/2020/01/sample.jpeg" alt="" width="1024" height="683" class="alignnone size-large wp-image-273" />

■■■続きを読む■■■

<!--more-->
太文字にしたいもの
後から記事内容を削除表示するとき使う
後から記事内容を追加するとき使う


—–HTMLsource—–
<!—-more—->
<em>太文字にしたいもの</em>
<del datetime="2020-01-14T07:25:10+00:00">後から記事内容を削除表示するとき使う</del>
<ins datetime="2020-01-14T07:20:56+00:00">後から記事内容を追加するとき使う</ins>

■■■本文利用1■■■

【H2】文字の文字と間隔【H2】【H2】

【H3】文字の文字と間隔【H3】【H3】

【H4】文字の文字と間隔【H4】【H4】

【P】文字の文字と間隔【P】【P】

【span】文字の文字と間隔【span】【span】


—–HTMLsource—–
【H2】<h2></h2>
【H3】<h3></h3>
【H4】<h4></h4>
【P】<p>P文字P文字P文字P文字P文字</p>
【span】<span>span文字span文字span文字</span>

■■■本文利用2■■■

【リンク文字】リンク文字
【改行】
【線】<hr> –HTMLsource–の区切りで使われてる線
【太字】
【太字下線】太文字にアンダーライン


—–HTMLsource—–
リンク文字】<a href="https://www.google.com/">リンク文字</a>
【改行】<br>
【線】<hr>
】<b>太字</b>
太文字にアンダーライン】<span style="background:linear-gradient(transparent 75%, #FBE0C1 75%);font-weight:bold;">太字下線</span>

■■■本文利用3■■■

 h2タイトルにチェックマーク

 h3タイトルにチェックマーク

 h4タイトルにチェックマーク

 Pタイトルにチェックマーク

 spanタイトルにチェックマーク


—–HTMLsource—–
<h2 class="chk">&ensp;h2タイトルにチェックマーク</h2>
<h3 class="chk">&ensp;h3タイトルにチェックマーク</h3>
<h4 class="chk">&ensp;h4タイトルにチェックマーク</h4>
<p class="chk">&ensp;Pタイトルにチェックマーク</p>
<span class="chk">&ensp;spanタイトルにチェックマーク</span>

■■■空白文字■■■

「 」は通常の半角スペースと同じサイズの空白文字。
「 」はそれより少し広めの空白文字。
「 」はさらに広めの空白文字。
「 」は、最初の「 」よりも狭い(細い)空白文字です。


—–HTMLsource—–
「&nbsp;」は通常の半角スペースと同じサイズの空白文字。
「&ensp;」はそれより少し広めの空白文字。
「&emsp;」はさらに広めの空白文字。
「&thinsp;」は、最初の「&nbsp;」よりも細い空白文字。

■■■リスト■■■

  • ・あいうえお
  • ・かきくけこ
  • ・さしすせそ
  • ・たちつてと

—–HTMLsource—–
<ul>
<li>・あいうえお</li>
<li>・かきくけこ</li>
<li>・さしすせそ</li>
<li>・たちつてと</li>
</ul>

■■■枠出ます■■■■■

枠で囲む

引用文


—–HTMLsource—–
<pre>枠で囲む</pre>
<blockquote>引用文</blockquote>

■■■テーブル■■■

80px左 200px中央 なりゆきで右(文字が少ないと枠が出現する)
1行目 のAさん 1行目右1行目右1行目右1行目右ああああああああああああああああああああああああ
2行目 のBさん 2行目右2行目右2行目右2行目右ああああああああああああああああああああああああ
3行目 のCさん 3行目右3行目右3行目右3行目右ああああああああああああああああああああああああ
4行目 のDさん 4行目右4行目右4行目右4行目右ああああああああああああああああああああああああ

—–HTMLsource—–

<table class=" aligncenter">
<tbody>
<tr>
<td style="width: 80px; text-align: center;"><strong>80px左</strong></td>
<td style="width: 200px; text-align: center;"><strong>200px中央</strong></td>
<td style="width: auto; text-align: center;"><strong>なりゆきで右(文字が少ないと枠が出現する)</strong></td>
</tr>
<tr>
<td>1行目</td>
<td>のAさん</td>
<td>1行目右1行目右1行目右1行目右ああああああああああああああああああああああああ</td>
</tr>
<tr>
<td>2行目</td>
<td>のBさん</td>
<td>2行目右2行目右2行目右2行目右ああああああああああああああああああああああああ</td>
</tr>
<tr>
<td>3行目</td>
<td>のCさん</td>
<td>3行目右3行目右3行目右3行目右ああああああああああああああああああああああああ</td>
</tr>
<tr>
<td>4行目</td>
<td>のDさん</td>
<td>4行目右4行目右4行目右4行目右ああああああああああああああああああああああああ</td>
</tr>
</tbody>
</table>

いつもありがとうございます。

コメントを残す

*