表示サンプル

2022/07/07 ｜2024/07/11 ｜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>

テーブル

#	table	th	th
1	td	td	td
2
3

画像

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

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

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

キャプション

X / Instagram / Bluesky (※v1.36以降)

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

不要！→ <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)" 属性は不要ですので削除して下さい。

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

パンダは約50%の確率で双子を産むと言われているんだって！

そして #上野動物園では6回の繁殖のうち、双子の誕生は2021年に産まれたシャオシャオ・レイレイが初めて🤓 #シャオレイ

そして、今日は #パンダ来園50周年
上野動物園のパンダさんたち、おめでとう！ pic.twitter.com/4MUH4Oy3Cd
— Japan (@TwitterJP) 2022年10月28日

この投稿をInstagramで見る

Instagram(@instagram)がシェアした投稿

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