テスト投稿　-　標準

↑標準の段落はhtml要素に囲まれていないので枠外に飛び出します。

テスト投稿　-　段落

見出しサンプル

テスト投稿　-　見出し h6
テスト投稿　-　見出し h5

テスト投稿　-　準見出し h4

テスト投稿　-　小見出し h3

テスト投稿　-　見出し h2

テスト投稿　-　主見出し h1

文字飾り前半4つがdivで囲まれたもの、後半がpが囲まれたもの

テスト投稿　-　ボールド
テスト投稿　-　イタリック
テスト投稿　-　アンダーライン
テスト投稿　-　取り消し線

テスト投稿　-　ボールド ・ 段落

テスト投稿　-　イタリック　・　段落

テスト投稿　-　アンダーライン ・ 段落

テスト投稿　-　取り消し線 ・ 段落

箇条書き

    pの中にないulとol
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
  • アイテム5
  1. アイテム1
  2. アイテム2
  3. アイテム3
  4. アイテム4
  5. アイテム5

ネスト

  1. アイテム1
    • アイテム1
    • アイテム2
    • アイテム3
  2. アイテム2
  3. アイテム3
  4. アイテム4
    1. アイテム1
    2. アイテム2
    3. アイテム3
  5. アイテム5
divの中にあるulとol
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
  • アイテム5
  1. アイテム1
  2. アイテム2
  3. アイテム3
  4. アイテム4
  5. アイテム5

htmlモードでpの中にulなどを書くと不具合があるようなので今はdivで囲んであります。

blockquote 引用・転載文

blockquote feature幅

タンザニアのキリマンジャロ山の麓の町、モシやアルーシャ近くの、標高1,500mから2,500m付近のプランテーションで栽培されている。コーヒーノキの品種としてはアラビカ種である。果実から加工生産した生豆は緑灰色で大粒という特徴を有している。この豆のコーヒーは強い酸味と花のような甘い香りを持つ。 農産物の輸出が全体の7割(2000年現在)を占めるタンザニアにあって、貴重な外貨獲得源となっている。ただ、大部分の農園がプランテーションとなっており、農園主と使用人の貧富の格差の原因になっている。現在は、タンザニアコーヒー協会(Coffee Authority of Tanzania、CAT)が生産・販売等の全てを取り仕切っている。

blockquote full幅

タンザニアのキリマンジャロ山の麓の町、モシやアルーシャ近くの、標高1,500mから2,500m付近のプランテーションで栽培されている。コーヒーノキの品種としてはアラビカ種である。果実から加工生産した生豆は緑灰色で大粒という特徴を有している。この豆のコーヒーは強い酸味と花のような甘い香りを持つ。 農産物の輸出が全体の7割(2000年現在)を占めるタンザニアにあって、貴重な外貨獲得源となっている。ただ、大部分の農園がプランテーションとなっており、農園主と使用人の貧富の格差の原因になっている。現在は、タンザニアコーヒー協会(Coffee Authority of Tanzania、CAT)が生産・販売等の全てを取り仕切っている。

moreタグ 追記

初めて使う追記はどんな感じになるか

解説

見出し

ヘッダはh1～h4まで可変サイズになっていて、大きな画面では大きく表示されます。またh1とh2はpopout幅に収められ、h3～h6まではcontent幅(記事の幅)に入ります。
また段落であるpのマージンも同様に、広い画面だと縦の間隔が広く、スマホ等の小さい画面では小さくなります。

各ヘッダの中にspanとかpあるいはdivなどでテキストを囲んで.subtitleとクラスを付けるとサブタイトルが入ります。ディスクリプションです。

段落は本来の幅よりも少し小さくして真ん中に寄せてます。
これは行末に行ってから次の行頭に移る時の視線移動を少なめにするのと、テーブルや画像などをpの中に入れなければ少し広く使えるような使い方をするためのものです。

段落pの中のcodeタグ

code .post-content p:not(.noCheck)

半角カッコで囲んだテキスト

カッコは(こういう感じ)
シングルの半角カッコで囲まれたテキストがこのようになります。

追加されるのはspanでclassは.bracketsになってます。同じ段落中にcodeタグがあった場合は、今の所(2023/05/26)カッコの中はそのまま表示されます。
これはcodeが使われる際に()を使う場合も多いと思うので、その中のテキストが装飾されるとマズイだろうからということからです。

半角二重カッコは脚注

脚注は((半角二重括弧で囲むだけ))みたいな感じ。PCだと半角二重カッコの中のテキストはtitle属性にも入るため、マウスカーソルを[脚注:x]の上でホバー(マウスオーバー)させるとその書かれたテキストの内容が見れます。
脚注をクリックすると中身が入っている所まで移り、そこのリンクで元に戻れます。

自動タグ

#テンプレートテスト と書くとサーチのクエリになります。https://ブログアドレス/search?q=ここにテンプレートテストと入ります。よってタグをクリックするとそのキーワードの一覧記事が表示されます。

#から始めて、#何かしらの文字 と終わりの半角スペースを入れるか、文末までがタグになります。
この段落には<p class="noCheck">...</p>としてあるのでタグ化しません。

自動リンク

テスト投稿 - リンク(Google)左はaタグでリンクにしてあります。以下はaタグ不使用
テスト投稿 - リンク(https://www.google.com/) 左は()に文字が書いてあるだけなので本来のカッコとして機能していますがリンクにはなりません。2023/05/21リンクになるようにしました。
テスト投稿 - リンク( https://www.google.com/ ) 左はテキスト前後に半角スペースを入れてありまのす。すると()の中でもリンクになります。
自動で作られたリンクは強制的にtarget="_blank"が入ります
()に何かしらが入っていると、そこには<span class='brackets'> <a href...>...</a> </span>というような構造になるのに注意。

テーブル

同じようなものをテーブルにした時。<table class="table"></table>とした場合が以下

テスト投稿 - リンク(Google) 左はaタグでリンクにしてあります。以下はaタグ不使用
テスト投稿 - リンク(https://www.google.com/) 左は()に文字が書いてあるだけですが、このテーブルはpタグの子要素ではないのでリンクにはなりません。

上記のtable、<table class="table"></table>を<div class="table-container">...</div>で囲った場合が以下

テスト投稿 - リンク(Google) 左はaタグでリンクにしてあります。以下はaタグ不使用
テスト投稿 - リンク(https://www.google.com/) 左は()に文字が書いてあるだけですが、このテーブルはpタグの子要素ではないのでリンクにはなりません。
広い画面では同じでも、狭く画面幅になると横スクロールが出るようになります。

上記2つのテーブルは、<table class='table'></table>や、<div class="table-container"><table class=""></table></table>というようなクラスが指定されていますが、tableだけを書くと以下のようになります。

テスト投稿 - リンク(Google) 左はaタグでリンクにしてあります。以下はaタグ不使用
テスト投稿 - リンク(https://www.google.com/) 左は()に文字が書いてあるだけですが、このテーブルはpタグの子要素ではないのでリンクにはなりません。

pタグの中にもなく、classも入れていないtableは上記のような感じになります。この場合リンクを作るためにはaタグでリンクにする必要があります(Bloggerの一般的なリンクでok)。tableは現在(2023/05/18)、見栄えがあまり良くないので近々、もう少しスタイリッシュになるようにスタイルを変更しようと思います。

画像

画像に入っているwidth、height属性はスクリプトで値なしにしています。これによってcssでスタイルすることができます。

Youtube動画埋め込み

https://youtu.be/nkrGupyzxIo

Youtubeの動画はアドレス(https://www.youtube.com/watch?v=xxxxxxxxxxx,https://youtu.be/xxxxxxxxxxxどちらも可)を貼り付けて、htmlモードでdivで囲みclassにytpと入れると上記のようにサムネイルがまず埋め込まれます。これをクリックするとiframeで動画プレーヤーが表示されます。