編集

表示サンプル

｜2024/05/18 ｜6
アイキャッチ

h2 見出し

<p>楽長はうその活動だい弾から子を過ぎ聴衆たまし。まずはいきなり生意気ましんというヴァイオリンましない。</p>

<p>それどころですたわけなはでしではねずみの生意気家のままをはもう生意気たましで、そこまでセロへなさいれんました。<br>
し過ぎやつは写真へ悪いたと一生けん命のゴーシュのからだらへ弾い第一狸人のかっこうへ荒れていろましでし。</p>

<div>だいも一生けん命落ちてしまいた。セロは六とまっかっこうのようを思うていで。足ははん用たりいつが云えながらくれで。</div>
<div>すぎてしまいはもうじぶんがも一つでいきなりとつめて譜にガラスのようからけしてかっこうを叫びてぱっと火花をめがけてまわっです。どうせきちんと勢を人が出したで。</div>

h3 小見出し

h4 準見出し

h5
h6

フォント

<a href="#">リンク<a>
<b>太字</b>
<strong>太字</strong>
<i>斜体 italic</i>
<strike>取り消し線</strike>
<s>取り消し線</s>
<u>下線</u>

font-weight: 100 200 300 400 500 600 700 800 900

font-size

0.5em 1em 1.5em 2em 3em

8px 10px 12px 14px 16px 1em 17px 18px 20px

.5rem .9rem 1rem 1.6rem 16px
110% 100% 95%

Custom Color

赤青緑は、明暗どちらでもアクセシビリティで指摘されない配色になっています。

var(--color) var(--color) 標準文字色
var(--dark-color) var(--dark-color) 薄い文字色
var(--red-color) var(--red-color)
var(--blue-color) var(--blue-color)
var(--green-color) var(--green-color)
<span style="color:var(--red-color)">RED</span>

var(--dark-bg)
var(--light-bg)
var(--brand)
var(--brand-light)
var(--sub-brand)

<blockquote> / <cite>

引用文です
リンク
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz <cite>出典</cite>

<pre>

<b:includable id='commentItem' var='comment'>
  <div class='comment-block' expr:id='&quot;c&quot; + data:comment.id'>
    <p class='comment-author'>
      <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
      <b:if cond='data:comment.authorUrl == data:post.author.profileUrl'>
        <a expr:href='data:comment.authorUrl' rel='noopener' target='_blank' title='Author'><data:comment.author/><svg aria-label='管理者' class='verified'><use href='#verified'/></svg></a>
        <b:elseif cond='data:comment.authorUrl'/>
        <a expr:href='data:comment.authorUrl' rel='noopener' target='_blank'><data:comment.author/></a>
        <b:else/>
        <data:comment.author/>
      </b:if>
    </p>
    <p expr:class='&quot;comment-body&quot; + (data:comment.isDeleted ? &quot; deleted&quot; : &quot;&quot;)'>
      <data:comment.body/>
    </p>
    <div class='comment-footer'>
      <span class='comment-timestamp'>
        <b:include data='comment' name='commentDeleteIcon'/>
        <a expr:href='&quot;#c&quot; + data:comment.id' title='コメント パーマリンク'><svg aria-label='投稿日' class='svg svg-clock' style='margin-right:5px;vertical-align: -10%'><use href='#svg-clock'/></svg><data:comment.timestamp/></a>
      </span>
    </div>
  </div>
</b:includable>

リスト

  • list 1
    • list 1-1
    • list 1-2
  • list 2
  1. list 1
    1. list 1-1
    2. list 1-2
  50. list 50
  100. list 100

テーブル

# table th th
1 td td td
2
3

画像

作成モードで挿入した画像で、タグはそのままの状態です。

※当デモサイトは画像のライトボックス表示はオフにしています。


作成ビューモードで画像をクリック → (説明を切り替える)をクリックしてキャプションを入れた状態。
キャプション

X / Instagram / Bluesky

defer.js を導入しているので、X も Instagram も Bluesky も埋め込みコードの末尾にある JavaScript タグを外しても問題なく表示されます。

不要！→ <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
不要！→ <script async src="//www.instagram.com/embed.js"></script>
不要！→ <script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

Twitter はテーマがダークモードの場合は背景もダークになります。
※埋込コード内の data-theme="dark(light)" 属性は不要ですので削除して下さい。

いずれの埋め込みも中央寄せになります。





Bluesky の投稿をニュース記事など、別の Web サイトに直接埋め込むことができるようになりました。 埋め込みたい投稿を右クリックするか、コード スニペットの embed.bsky.app にその URL を貼り付けるだけです。

— Bluesky (@bsky.app) Apr 16, 2024 at 7:01

YouTube / Blogger video

中央寄せになります。

アスペクト比 16:9 を維持します。

YouTube

埋め込みコードの src を data-src に変更すると、遅延読み込みが有効になります。※記事一覧のサムネ画像としては表示されなくなります。

Blogger video (特大サイズ)