2022.02.03 23:00
深く考えもせず、Ameba Owndを選択してホームページを作成し、ブログを書き始めた。暫くして、ブログに表を入れようとしたが、Owndにはそのような機能がないことに気づいた。表の作成機能のある他のサイトに変わるには、時すでに遅しだった
あれこれネットで調べていると、HTMLを用いてブログに表を作成することができるようで、エクセルで作成した表をHTMLコードに変換する以下のフリープログラムを見つけた
”エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)” ☜ クリック
HTMLを全く知らない素人でも、何とかブログに表を出現させることができたので、以下に忘れないよう記録する。Ameba Owndに限らず、同じような悩みを抱えている方は、ご自身のブログサイトでお試しあれ
ただし、以下の手順を使用される場合は、ソフトの堅牢性や安全性などについて保証するものではないので、あくまで自己判断での使用をお願いしたい
完成した表のイメージ例
まず、出来上がったブログの表をイメージしてもらうために、私のブログの中の表を事前にざっとご覧いただくと、以降の手順の説明が理解しやすいと思う。なお、下の「日本百名山」のブログはAmeba Owndからワードプレスに移し替えたものだが、基本的に中身は同じ。ワードプレスには表作成機能があるが、下のブログの中にある日本百名山の表は、これから説明するHTML変換を利用して作成したものである
日本百名山 ☜ クリック
URLは ” https://walking-in-the-wind.com/feature/100-japanese-mountains/2022/09/11/famous/” です
エクセル表の作成
手順１．まずエクセルで表を作成する
HTML変換プログラムの立ち上げ
手順２．上記のフリープログラムを立ち上げる
エクセル表のHTMLへの変換
手順３．以下のように、エクセル表をコピーして、フリープログラムのSTEP1の欄にペーストする。後で説明する手順７において、OwndへのHTMLコードの貼り付けでは、１ページあたりで処理できる文字数に制限があるようで、項目数の多い表の場合は、適度なサイズに分割して表を作成する必要があるので注意。私の百名山の一覧表の場合、山が１００座の表になるのだが、２５座ずつ４つの表に分割して表を作成せざるを得なかった。エクセル表を分割する際に、私の例では項目名の行（第１行）を分割したすべての表に、繰り返して挿入しておく必要がある
手順４．以下のように、表がベタ打ち的にペーストされていることを確認する
手順５．以下のように、STEP2のところで、表の項目行や列の着色を調整する。表の項目行や列に色を付けたい場合は、デフォルトの「１」のままでよい。色をつけない場合は、「０」に変更する。その他の設定ついては、今のところ理解できておらず、デフォルトのままとした
手順６．「変換」をクリックすると、表がポップアップされるので、自分のイメージする表かどうかを確認する。確認してOKならば、ポップアップした表の右上の「ｘ」で表を閉じる。この時点で、下のボックスに変換されたＨＴＭＬコードが自動作成されているので、すべてをコピーする
HTMLコードのブログへの貼り付け
手順７．以下はAmeba Owndの場合の手順だが、他のブログサイトでも同様な操作でHTMLコードを貼り付ければ表ができると思われる（ワードプレスはできた）。Ameba Owndの場合は、ブログ頁に行き左側のコマンドボタンの一番下にあるHTMLボタンをクリックする。HTMLコード入力用のボックスがポップアップするので、コードをペーストする（ワードプレスの場合は、文中にブロックを追加し、ポップアップメニューボックスの検索欄に「HTML」と入力する。現われた「カスタムHTML」を選択してHTMLコードをペーストすればよい）
手順８．右上の「プレビュー」をクリックすると、ブログ投稿した際の画面になる
手順９．プレビュー画面で、以下のように自分が企図した表が作成されていることを確認する。これで曲がりなりにも表を作成することができる。表のセルの幅を変更したり、文字サイズや色を変えたりすることも、HTMLコードを追加することで可能なようだが、素人の私には全くやり方が分からない（悪しからず！）
表の中の項目にリンクを貼る方法
作成した表の項目にリンクを貼りたい場合の方法について、以下に手順を記載する。本事例では、表右端の山行記録欄の「年月日」に記録へジャンプするリンクを貼る例を紹介する
手順１０．上の手順６においてフリーソフトで変換作成したHTMLコードに行く。百名山リストの前後を省略して、例としてNo.26の山「平ヶ岳」を表示するためのHTMLコードを以下に抜粋して示す
<tr>
<td>
26
</td>
<td>
平ヶ岳
</td>
<td>
2,141
</td>
<td>
ひらがたけ
</td>
<td>
群馬/新潟
</td>
<td>
2017/6/9-10
</td>
</tr>
下から３行目の年月日の「2017/6/9-10」に山行記録へジャンプするためのURLを以下の要領でリンクさせる
<a href =”リンクさせたい記事などのURL”>リンクを貼りたい項目名</a>
私の例で言えば、
<a href =”https://hear-the-wind.amebaownd.com/posts/2589743″>2017/6/9-10</a>
上記したHTMLコードの下から3行目の 2017/6/9-10 をこれに書き換えればよい（最初と最後の＜＞を含めて）
手順１１．書き換えたHTMLコードをもとに、手順７と手順８を行い、以下のようにプレビュー画面で企図した項目にリンクが貼られたことを確認する（この事例では年月日）
以上が、現時点で私の知りうる表の作成方法（備忘録）