見出しのサンプル作成

見出し3

見出し33

国会中継を観ながらホームページを更新しています
今まで使用していた本サイトのテンプレートが提供メーカーの保守メンテ終了により、新しいテンプレート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オリジナル装飾 として独自に作成しました。

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

h1_test 1

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

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

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

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

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

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

下の見出しは ”<h4>h4_test 4</h4>“ で黄色の斜線吹出付きの見出しです

この見出しは<h4>h4_test 4</h4>で黄色の斜線吹出付きの見出しです


下の見出しは ”<h5>××××××××××</h5>“ で青い枠付きの見出しです

この見出しは<h5>××××××××××</h5>で青い枠付きの見出しです


下の見出しは ”<h6>見出し6の入力例</h6>

見出し6の入力例

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

質問をここに記述します

回答をここに記述します

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

Q&Aなど活用方法はたくさんあります
罫囲みの下には三角のアイコンを表示しません

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

三角のアイコンを表示しないので処理フロー等の見出し利用に便利です
数式の解説方法や思考の流れなどに利用できます。
フロチャートや数式の説明に使えます
入力例:【表組を挿入】についてはお気軽にお問い合わせください。
【表組】や【数式】などの挿入も可能です
数式の入力には別途Wordpress用のプラグイン(Tex等)が必要です・・・
  • 1つめの方法  エクセルで作成し、該当するページで貼り付け(ビジュアルモードで・・・)
  • 2つめの方法  wordPress内の表組挿入で実現

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

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

Follow me!

投稿者プロフィール

近江公人asamai-cts Owner
あさまいCTSの代表オヤジです(59歳)
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会 実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年1月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成 その他何でも屋みたいなものです・・・