編集

表示サンプル

｜2023/10/06 ｜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

画像

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

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


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

Twitter / Instagram

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

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

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

Twitter も インスタも中央寄せになります。

2023/10/06 追記

𝕏 (Twitter) の仕様変更の影響で v1.32 以前は中央寄せになりません。
旧バージョンのままで中央寄せにしたい方は、HTML 編集にて</body>の上に下記のコードを追加して下さい。
540は横幅(px)です。お好みに調整できます。

<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/
const xLayout=document.querySelectorAll(".twitter-tweet");window.addEventListener("DOMContentLoaded",()=>{for(i=0;i<xLayout.length;i++)xLayout[i].setAttribute("data-width","540"),xLayout[i].setAttribute("data-align","center")});
/*]]>*/</script>
</b:if>


YouTube

中央寄せになります。

アスペクト比 16:9 を維持します。(v1.32 以降)
旧バージョンで適用させたい方は下記の CSS を追加して下さい。

iframe[src*="youtube.com"] {
  max-width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

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