国会中継を観ながらホームページを更新しています
今まで使用していた本サイトのテンプレートが提供メーカーの保守メンテ終了により、新しいテンプレートBizvektor　⇒　Lightningへの移行中です。
BizvektorのCSSからLightningのCSSに移植・改造いしましたので、動作確認の検証用にこのページを作成しています。

まずは、下記の見出しが新しいCSSで作動しているか？・・・
クリックしたとき該当する記事へJumpさせたいときの処理は、ヘッダー部分のpadding-topとmargin-topを検証する必要があります。
見出し1　　見出し2　　見出し3
見出し4　　見出し5　　見出し6

見出しレイアウトの仕上がりは下記のようになります。詳細は上記をクリックすると該当のページへジャンプします。

h2_test 2

h3_test 3

h4_test 4

h5_test 5

h6_test 6

/******************************************/

下記の装飾見出しは　あさまいCTSオリジナル装飾　として独自に作成しました。

この部分の表示方法（センター揃いで緑の文字）は下記の赤い文字のコマンド(＝指定、指示)すなわち"＜ｐ"から始まるコマンドを追記することで実現可能です。文字の色を選択するときは”color: #ff0000”と指定します。#ff0000 は視覚で見える色をコンピュータで表示させるためには、16進数６桁で表現することが約束です。そうしないと文字の色が変わりません。＜ｐstyle="text-align: center;"＞＜span style="color: #ff0000; font-size: 14pt"＞と上記のように本文内でコマンドを挿入（テキスト＝HTMLモードにして）コピペ挿入すれば【書式＝センター揃い・文字の色が赤・文字の大きさ14ポイント】で、表示可能ですが、＜テキスト＞から＜ビジュアル＞に切り替えると＜テキスト＞内に存在する改行コマンド ＜/ｂｒ＞ が排除されますので注意が必要です。本来、ブログやホームページの記述はHTMLでの記述しなければならないところをUser Likeの観点から出来た機能ですので仕方がありません。

h1_test 1

H1はサイドバーとトップページの見出しにも影響するので触らない方が賢明です。H2以下はすべてのページに見出しとして作用します。◆下記に表示されているように、本文の中で表現するには“＜ｈ２＞ここに見出しの文字を入力＜/ｈ２＞”と入力すれば画像付きで見出しが表示されます。

ここに見出しの文字を入力

◆下記に表示されているように、本文の中で＜ｈ３＞として表現するには“＜ｈ３＞これは「見出し３」の指定です＜/ｈ３＞”　とします。

これは「見出し３」の指定です

/******************************************/

以下、＜ｈ４＞、＜ｈ５＞、＜ｈ６＞も同様の入力方法ですが、それぞれの見出しに関するデザインを変更する場合は、新規に表示プログラム（CSS）を書きますので、その際はあさまいCTSまでご連絡ください。ご希望に添うようデザインを有料にて作成いたします。

下の見出しは　"＜ｈ４＞h4_test 4＜/ｈ４＞"　で黄色の斜線吹出付きの見出しです

この見出しは＜ｈ４＞h4_test 4＜/ｈ４＞で黄色の斜線吹出付きの見出しです

下の見出しは　"＜ｈ５＞××××××××××＜/ｈ５＞"　で青い枠付きの見出しです

この見出しは＜ｈ５＞××××××××××＜/ｈ５＞で青い枠付きの見出しです

下の見出しは　"＜ｈ６＞見出し６の入力例＜/ｈ６＞"

見出し６の入力例

Q&Aの画像をはめ込んで表示させる方法を紹介します。
下記のように入力すると【Q】と【A】が生成するには、
＜p class="que"＞ 質問をここに記述します＜/p＞
＜p class="ans"＞ 回答をここに記述します＜/p＞
と入力すると下のようになります。

質問をここに記述します

回答をここに記述します

参考ページ１　←　ここをクリック
https://saruwakakun.com/html-css/reference/h-design
参考ページ２　←　ここをクリック

★このような動く画像も可能です。

参考までに：WordPressでTeX数式が使用できるプラグイン「Easy WP LaTeX」をインストールするとサイト内で数式が組めます。

このページを読んでいる方へ　⇒　メーカーの有料版「Lightning Pro」テーマ紹介ですが、操作するにはhtml中級以上の知識が必要です
下記のリンクは有料版「Lightning Pro」テーマです。導入すれば下記のようなデザインが簡単に作れます。
見出しデザイン変更機能参考ページ　←　ここをクリック