「Blog Table ⭐」を使うと、見栄えのする表（table）を簡単にブログ記事上に作ることができます。 作った表は後から行数・列数を変更したり、サイズや配色を変更できます。 Excel表などを画像コピーして掲載した場合は、表の更新は大変ですが、このツールは修正や更新が出来ます。 更に、過去に作った表の枠組み（デザイン）をコピーして再利用したり、表全体のHTMLコピーで書き込んだデータごと他の記事に貼り付ける事ができます。
また、生成した表をデザイン枠の様に利用する事が出来、利用方法はアイデアしだいです。 最初は簡単な表から始め、慣れたら色々な機能を使いこなしてください。
2024.03.05更新 ver.5.1以降
「Blog Table ⭐」の概要
このツールは「通常表示」編集画面で、簡単に表を記事上に作成する事ができます。
表の仕様や機能は以下です。
ツールの起動とモード変更
●「Blog Table ⭐」は「Ctrl+F1」で起動し、もういちど「Ctrl+F1」を押すと終了します。 起動時は記事タイトル枠上に「Blog Table」の説明パネルが表示されます。
▪ 起動の最初やHTML表示を往復した場合は、編集枠内で次の操作が不可欠なので、これを案内する青い説明パネルが表示されます。
表の新規作成
●「編集枠」内で、表を作成する場所を「Ctrl+左Click」します。
▪ 作成する場所は、空白行を選択するのが推奨です。
▪ 空白行を構成する「p要素」や、枠線を表示する「div要素」内が作成可能です。
▪ 表作成可能な場所を選択した場合は、行左端に「ブルーの縦線」が表示されます。
「ブルー線」が表示されない場合は、表作成ができません。
▪ 複雑な入れ子構成の内部でも「ブルー線」が表示される場合がありますが、上手く表が出来るかどうかは場合に拠ります。
下は、「Blog Table ⭐」の起動と表を作成する場所を指定するまでの様子です。
●「Blog Table ⭐」の「メインパネル」右端の「表作成」のボタンを押します。
▪ 指定した場所に新しい表が作成されます。
▪ 表の行数・列数やその他設定は、「表コピー」操作で記録した設定に従います。
▪「表作成」を押す前に、初期の設定を変更して任意の目的の表を作成できますが、ここは「列・行」を決め、次の「表更新」で細かな修正をする方が楽です。
下は、「表作成」を押した時の様子です。
表の更新
●「表作成」を行うと、自動的に作成した表の「表更新」の状態になります。
▪ 作成した表は最初から選択され、表の左側に「ブルー線」が表示されます。
●既に「Blog Table ⭐」で作成した表がある場合に、表を「Ctrl+左Click」して選択することで、その表を「表更新」することができます。
▪ 選択した表の左側に「ブルー線」が表示されます。
▪「表更新」は編集枠内の他の場所を「Ctrl+左Click」するまで維持されます。
▪「表更新」を押すまでに編集枠内の他の場所を「Ctrl+左Click」すると、設定していた変更はリセットされます。 これは別の「表作成」の指示と判断されるためです。
下は、未選択の表を「Ctrl+左Click」で選択して「表更新」を起動する様子です。
▪ 表の左側の「ブルー線」は、その表が更新状態にある事を示しています。
▪ 記事の再編集で、過去に「Blog Table ⭐」で作った表の「表更新」が出来ます。
〔注意〕
「Blog Table ⭐」ver.4.0 から、表のHtml構成を変更しました。
▪ ver.3.6 以前のバージョンで作成した「表」は、ver.4.0 以降のバージョンで更新ができません。 表を更新するには ver.3.6 を利用ください。
▪ ver.4.0 以降のバージョンで作成した「表」は、それ以前のバージョンで更新する事が出来ません。 ver.4.0 以降の最新バージョンを利用ください。
▪ 非対応の表を選択した場合は、バージョン変更の案内が表示されます。
● 選択した表で各種の設定を変更して「表更新」を押します。
▪ 各設定の詳細は、次の項目以降を参照ください。
▪「メインパネル」で設定を変更しただけでは、表は変化しません。 更新した設定は「表更新」を押した時に、実際にページ上の表に適用されます。
▪「表幅」は例外で、スピナーや「⇧⇩キー」の操作で即時に調節が適用されます。
▪ 更新を一度に行う必要はなく、部分的に調節して「表更新」を繰り返し、次第に目的のデザインを完成させる事ができます。
▪ 内部に文字データを書き込まれた表でも、表デザインは変更できます。 但し、行数・列数を削減した場合は、削減部分の文字データは消失します。
下は、設定を変更後に「表更新」を押して、変更を反映させる様子です。
各設定の設定方法
「メインパネル」の設定項目は、「表作成」「表更新」のどちらの場合でも変更する事ができます。
▪ 設定の変更は「表更新」のボタンを押した時に、表にコードが書き込まれてデザインが適用されます。
▪ 上記ボタンを押すまでに処理を中断すると、設定はリセットされ無効になります。
構成
表の「列数」「行数」を指定しますが、「列数」は左端列の「見出し列」を1列目として数えます。「行数」は最上行の「見出し行」を1行目として数えて指定します。
▪「列数」「行数」を削除する場合は、削減されるセル上の文字列は消失します。
（ 詳細は、「Blog Table ⭐」ver.1.5 を参照ください ）
配置 ・表幅
●「表幅」がブログ本文幅より小さい場合は、本文上で表の「左寄せ」「中央寄せ」の配置が選択できます。 これは、配置表示枠を「左Click」して切換えます。
●「表幅」をブログ本文幅より大きく指定すると、「左寄せ」「中央寄せ」は無効になり、「左寄せ」で「横スクロール」する表示になります。 表内データが大きく、本文幅に収まらない場合も、大きな「表幅」で余裕のある表が作れます。
●「表幅」の指定が1pxでも「本文幅」を越えるとスクロール表示になります。 そこで、「本文幅」に合せた「表幅」を簡単に設定できる「MEMO機能」を作りました。
▪「Ctrl+ Ⓜボタン」で「表幅枠」に設定された値が記録されます。
▪「Ⓜボタン」を押すと2sec青色となり、記録幅値が「表幅枠」に入力されます。
▪ ユーザー自身のブログ本文幅を「MEMO機能」で記録して利用します。
（ 詳細は 「Blog Table ⭐」（10） を参照ください ）
セルの「padding」
「p」マークの枠を「左Click」すると、セルの「左右padding」の有無を変更できます。 左の「p+」は、セル内に左右「0.6em」の余白が設定されます。 列数が多くてセル幅が狭い表に、文字を多く記入したい場合などに「p0」を指定します。
（ 詳細は「Blog Table ⭐」（8） を参照ください ）
セル幅の指定機能
「表」は「table要素」の特性を持っています。 記入したデータの幅（文字数）で各列の幅が自動的に配分されます。 このフレキシブルな幅の調節は「半角・全角の空白」を利用すると便利です。 またセル内で改行すれば、行の高さ変更が可能です。
● フレキシブルなセル幅が扱い難い場合や、文字列で変化しないセル幅が必要な場合は、下の設定ボタンを押すと「フレキシブル幅」⇄「固定幅」の変更ができます。
▪「Auto」はフレキシブルなセル幅になります。
（「Auto」モードでは「表幅」の設定枠で直接に表幅を調節できます）
▪「Fix」は指定したセル幅が変化しない表になります。
●「Auto/Fix」ボタンを「左Click」すると「セル幅指定機能」が起動します。
▪「セル幅の設定パネル」が表示されると同時に、表は「Fix」モードになります。
➔「Auto」モード： セルに書き込まれた文字内容に比例して、設定した表幅が列幅に分配されます。 表幅を決めて、簡易に列幅を指定するレイアウト方法です。
➔「Fix」モード： 表幅は各列幅の合計として従属的に決まります。 各列幅は任意の幅を厳密に指定するレイアウト方法です。
「セル幅の設定パネル」は、表の最上行の各セルにセル幅を指定します。 セル内部の文字内容に左右されずに、セル幅（列幅）を正確に指定できます。
▪「表幅表示」は表の全体幅の表示で、この表示部は操作できません。
▪「列幅指定枠」は選択した列幅を表示して、その幅値を変更できます。
●「列選択」の「⇦」「⇨」を使って、幅を指定する列を選択します。
●「列幅指定枠」のスピナーを操作して、選択した列の幅を任意に指定します。
▪ 列幅の変更は、常に表全体の幅の変更になる事を考慮して、列幅を調節します。
●「等幅」を「左Click」すると、全ての列幅（セル幅）を同じに指定できます。
●「Auto幅」を「左Click」すると、表の全セルでセル内の改行が生じない表幅を設定する事ができます。
「英文禁則」
「半角英数文字」の文字列を表中に書き込んだ場合は、英文のワードラップにより表のレイアウトが影響を受ける場合が多く、ver.3.5 から制御指定を採入れました。
●「英文禁則」のボタンを「左Click」して、以下の3種の指定を選択できます。
| パネル表示 | CSSの設定コード | 英文の表示結果 |
| No | word_break: break-all | 単語の途中でも改行される |
| Yes | word_break: break-word | 単語の途中では改行されない |
| --- | word_breakを指定しない | （従来の表の状態を再現） |
下は、「英文禁則」の設定による違いを示すサンプルです。
上の例は、「Yes」「---」の表示に差はありませんが、「---」は英半角文字の内容によっては、表のレイアウトが調節し難くなる場合があります。 お勧めは「No」か「Yes」で、英文を表にまとめる場合は「Yes」が適しているでしょう。
初期化
●「初期化」の「左Click」で、「Fix」モードから「Auto」モードに変更できます。
▪ メインパネルで「Auto/Fix」を「Ctrl+左Click」してもモード変更ができます。
▪「Fix」モードで調節したセル幅は解除されて、「Auto」モードの列幅の自動配分に変化します。
●「✖」（閉じる）ボタンは、「Fix」モードのままで「セル幅の設定パネル」を閉じて、メインパネルに戻るためのボタンです。
（ 詳細は「Blog Table ⭐」セル幅指定機能 を参照ください ）
枠線
● 枠線幅は「-9px」以上の値が設定できます。
▪「-9px ～ -1px」は、二重枠線の表示で、二重線の間隔指定になります。
▪「0px」は、枠線が非表示になります。
▪「1px ～ 」は、単線の枠線表示になり、その枠線の幅指定になります。
（ 詳細は「Blog Table ⭐」（10） を参照ください ）
●「枠線」の「色表示」を「左Click」すると幅が拡がり、カラーコードを直接入力する「入力枠」になります。
カラーコード4ヵ所の「入力枠」の機能は共通しています。
▪「3桁」「6桁」「8桁」の「16進表記」によるカラーコードに対応します。
ただし「8桁」は、自動的に等価の「6桁16進」に変更されます。 また「3桁」の指定は、次の「表更新」で選択した時に等価の「6桁16進」に変更されます。
▪「red」「orange」等のカラー名を入力して「Enter」を押すと、「6桁16進」に変換されます。 通常はカラーパレットを使用して設定してください。
▪ 記入したカラーコードが無効な場合は黒枠を表示し、表の設定に反映しません。
●「枠線」の「色表示」を「Ctrl+左Click」すると、カラーパレットで色指定が出来ます。 通常はこの方法で色を指定してください。
（ 詳細は「Blog Table ⭐」（6） を参照ください ）
最上行背景色・左端列背景色・全体背景色
●「表」の主要部分（下図）の背景色を設定します。
● 指定方法は、上記の「枠線色」と全く同じです。
（ 詳細は「Blog Table ⭐」（6） を参照ください ）
● 最上行・左端列の背景色が重なる部分で、背景色の優先する方を選択できます。
▪ 左端列背景色の右側の「▲」ボタンを「左Click」して選択します。
（ 詳細は「Blog Table ⭐」（8） を参照ください ）
「淡色」の設定
4ヵ所の「色表示」を「Shift+左Click」することで、設定が難しい「淡色」が簡単に指定できます。
下は、元になる「青色」をパレットで指定し、それを「淡色」に変更して「最上行背景色」に適用する様子です。
（詳細は、「Blog Table ⭐」（16） を参照ください ）
文字
● 表全体の基本的な文字サイズを指定します。
▪ この指定によらず、表内の一部の文字サイズを変更する事が可能です。
▪ 編集画面の「文字サイズ指定」や「HTML編集」で文字サイズを指定します。
▪ その際、縮小変更は表崩れになり難く、拡大は表全体に影響し易くなります。
● 各セル・複数セル・表全体 に対して、「編集アイコン」によって「左寄せ」「中央寄せ」「右寄せ」、「太字」「アンダーライン」「文字色」などの文字デザインの設定が、通常の本文編集と同様に有効です。
表コピー
●「表更新」時に「Blog Table」パネルの右端の「C」ボタンを押すと、その時の表の全設定を記録します。 この際、表のセル構成やデザインのみが記録され、表に記入されたデータは記録されません。
▪ 記録された設定（表の雛形）は、ローカルストレージに保存されます。
▪ 次にこのツールを使用した時、「表作成」をする時の初期値になります。
▪ 表の雛形は、次に「C」ボタンを押すまで変更される事はありません。
▪「表作成」の際に「設定」を変更して「表作成」が可能ですが、その操作では雛形が書換えられる事はありません。
（ 詳細は「Blog Table ⭐」（9） を参照ください ）
●「表コピー」機能は、使い易い雛形を「表作成」で利用するための機能ですが、既に作成した表デザインをコピーして、別の表を作るに事に利用できます。 複雑な設定の表のデザインだけを、簡単に複製できます。
● 表内のデータを一緒にコピーするには、表の範囲を全て反転させてコピーする事で可能です。 また、HTML編集でコピーすると一番間違いがありません。
▪ 他の文書間では、データを含めた表の全コピーは、問題がありません。
▪ 同文書内での表のコピーは、表 id名の重複が生じるので勧められません。
▪ HTML編集で「table要素」の id名と「styleタグ」の class名を書換える事で、重複による問題を避けることができます。
（ 詳細は「Blog Table ⭐」（11） を参照ください ）
TRIM機能
データを記入した表中の任意の位置で、「行・列」を「追加」または「削除」する機能がTRIM機能です。（「削除」は記入データも削除されるので注意してください）
● 表内を「Alt+左Click」すると「Blog Table」パネルに「TRIMメニュー」が表示されます。
▪ TRIM機能は、「中止」を押すか「Ctrl+左Click」「Ctrl+F1」の操作で終了します。
▪ 表の最上行・左端列（下の緑セルの部分）を「Alt+左Click」した場合だけ TRIM機能が起動します。 他の場所の場合はTRIM操作の説明が表示されます。
●「追加」「削除」で処理や表示が変わります。 まず「TRIMメニュー」の「追加」「削除」のボタンで、目的の処理を選択してください。
● 上図の緑セルを「Alt+左Click」する事で、TRIM処理をする行・列を指定します。
▪「追加」処理の場合は、行・列が追加される位置にラインが表示されます。 緑の印はクリックしたセルです。
▪「削除」処理の場合は、指定した行・列に色が着いて表示されます。 緑の印はクリックしたセルです。
●「TRIMメニュー」の「実行」を「左Click」すると、処理が実行されます。
▪「追加」処理の結果
▪「削除」処理の結果
セル結合
行方向・列方向への任意の数のセルを結合できます。
● 表の任意のセルを「Ctrl+Alt+左Click」すると、「セル結合のパネル」が表示されます。
▪ セル結合の始点となるセルを「Ctrl+Alt+左Click」で指定します。 始点のセルと結合範囲に指定されたセルは、背景色が反転表示されます。
● 行方向に結合する場合は「方向」を「左Click」して「▶」に設定します。 列方向に結合する場合は「▼」に設定します。
▪ 結合されたセルは、結合の「方向」を変更できません。
▪「範囲」の初期値は「1」で、結合済のセルは結合したセル数が表示されます。
▪ スビナーを使い「範囲」の数を変更すると、それに合わせて結合候補のセルが反転されます。
● 結合候補が決まったら「実行」を「左Click」します。
下は、結合範囲や方向を変更し、最後に結合を実行する様子です。
▪ 結合済のセルを「Ctrl+Alt+左Click」して選択し、結合数を増減して「実行」する事で、結合の状態を変更できます。 結合数を「1」にして「実行」した場合は、結合の解除ができます。
下は、5個が結合されたセルを、全て解除して元に戻す様子です。
▪ セル結合を指定できる範囲は、他の結合セルに重ならない範囲に限ります。
▪ セル結合は、結合の始点になったセルの長さが拡大します。 結合前の始点セルの内容は、そのまま結合セルに受け継がれます。 また、始点以外のセルは非表示になっているだけで、その内容が失われるわけではありません。 結合セルの長さを変更したり結合を解除した場合は、非表示になっていたセルの内容が復活します。
このツールの最新バージョンは、以下のリンクリストから探せます。
