Bloggerブログのページに表作成で苦労 2018-10-30T22:06:59Z

Bloggerブログのページに表作成で苦労

Bloggerブログのページに表を設定<table>でつまづく


Bloggerで表作成
Bloggerで表作成


ブログに必要な機能は人それぞれ

最近では、インスタグラム、ツィートなどのSNSが主流のようですが、ブログもまだなんとか消えなくあります。
ブログにも当然ですが、文章を書くツール、写真、動画を掲載するツールなどがあって文章も多く書けます。

文章だけでは伝わり難い内容では画像を付けたりしますが、時には文章をわかりやすく整理するために、表にすることもありますよね。

必ずあると思います!いいえ、あるはずです!

Bloggerブログには表作成設定が非装備

十四経脈のツボをアップするのに、表を使ってアップすることにしましたが、ここで大きな問題が・・・。
bloggerには表の作成機能がありませんでした。

作成モードでは、文字を大きく、小さく、斜体、太文字、箇条書きなど大抵のことはできますが、なぜか表を作る機能がありません。

googleさんが技術的にできないことはないでしょうから、表作成の需要が少ないということでしょうか?
google+も廃止になるようなので、Bloggerにもあまり力が入っていないのかもしれませんが最低限の機能かと・・・。

まぁ、需要のないものは切り捨てる決断力には感心しますが、ユーザーとしては少し寂しいですね・・・

表作成がないと箇条書きのように1行ずつ書いていくことになりますが、表を使わないでアップするとスマホなどで画面幅が小さくなるとやたらと改行して分かりにくそうだし・・・
ということで、表を作ることにしました。


非装備を装着する

ブログの作成モードでは表を作る方法は装備されていないことが分かりましたので、簡単に表をアップする方法を色々と検索してみると、自分でHTMLを書く、Googleスプレッドシート、Excelを使ったりしてアップする方法があるようです。

少し力業としては、文字で罫線を作るという方法もあります。


アスキーアートとはいえませんが文字で枠線を作る
-----------------------------------------------------------------------
| LU5 | 尺沢(しゃくたく) | 合穴(水)         |
| LU6 | 孔最(こうさい)    | 郄穴                |
| LU7 | 列缺(れっけつ)    | 絡穴、八脈交会穴  |
-----------------------------------------------------------------------

このように記号文字で区切りをつけて表にする方法もあるのでしょうが、相当大変な作業になりそうですし、モバイルでは行がズレるでしょうし・・・
ユーザービリティは相当悪くなるでしょうしね。


LibreOfficeでトライ

Excelは持ち合わせがないため、Googleスプレッドシートと思いましたが、LibreOfficeでもできるのでは?と思いトライしてみました。

LibreOfficeで表作成

LibreOfficeで表を作成してHTMLで保存して必要部分をアップしたところPCでは問題なく表示されましたが、モバイルと後からのメインテナンスでは問題がありました。

1.モバイルに対応していないため、PCでは問題はないが携帯だと幅が足りずに切れてすべてが表示されないし、横スクロールもできない。

2.HTMLがすごく読みにくい記述で、後からリンクを付けるときにとても探せそうにない。

この二つが私にとって問題でした。

libreofficeのHTML
libreofficeで書き出されたもの



問題点のチェック

1.の幅がオーバーしてしまうのを改善するにはレスポンシブで幅の縮小とともに変化する必要がありますが、横幅が狭くなって文字行が増えるのは読み難いですし、文字の大きさが小さくなっても読み難いですので、横スクロール、段組にするぐらいでしょうか・・・
PCだけなら問題ないのですが、スマホが主流の現代ではちょっといただけない仕様ですのでこれを修正するには、スタイルシートを使って書き直す必要があります。

※書き直す必要があります!と断言していますが、スタイルシートを使わずできる方法があるかもしれせんので、私の考えられる範囲での根拠のない断言です注意してください。


2.後からリンク設定するのにこんなにつながっていては探すのも書き加えるのも大変なので、エディタを使って修正することになるのなら、最初から見やすく書いた方がいいのではと思ってしまう。

以上のことから自分に合ったスタイルシートを含めHTMLを最初から作成するということになりますが、自信が・・・


調べて寄せ集めて手直し
スタイルシートには色々な記述方法があるようで寄せ集めてみましたが、記述の間違いなのかなにか変なことになってしまい、拙い知識であれこれと手直ししていたので、時間がかかりました。

本文の記述
HTMl本文はエディタで作成するのは大変なので、スプレッドシートを使って<tr>とかのタグをセルに入れてセル結合で作りました。
これだとタグだけでも打ち込まなくてもすみますので。


Bloggerブログにアップしてみる

ブログを書くには、通常「作成」モードで白紙にワープロのように文字を打ち込んでいきますが、HTMLで記述することもできます。
今回は、HTMLモードでエディタ作成したものをコピペします。
スタイルシートを外部ファイルから読み込む仕様ではないようなので、本文と一緒に記述することになります。


ブログアップの結果は・・・検索枠に問題が!

問題なくすんなりと表示されました。
相当長い表示なのでジャンプリンクも設定して希望の経脈にもジャンプできますし、戻る時のページトップボタンの設置がいい感じです。
ただ、よく見てみると右上に表示されている検索枠がおかしなことになっていました。


検索枠の表示が壊れている
検索枠がおかしくなっていて、もしかしたら初期設定とぶつかってる?
tableの初期設定があるようで、普通にスタイルシートを設定すると検索枠が分割されて小さくなってしまいました。


スタイルシートを少し変更
tableのスタイルシートをカチカチとtable.×××といじり変更しました。
class="×××"として・・・これをすべてのtableに設定。

※私には詳しい仕様とか改善方法が分かりませんので、自分の能力をフル活用して思いついた方法でトライしたところ、表示してみると直っていました。

誰かブログに「table設定の注意」とか書いてくださいよ!


アンカーリンクが壊れる

アンカーリンクもHTMLモードで書いたあとに作成モードに戻すとなぜか勝手にURLが挿入されておかしくなってしまいます。
新規投稿を作成モードで書いて、ページを編集しようとすると作成モードで始まるようでアンカーリンクが壊れてしまいます。
忘れずに作成モード後は、HTMLモードに変更して終わりにしないとダメなようです。
あまりページを編集することはないのですが、少し注意が必要になります。
忘れっぽいので書き換えられた時のためにバックアップは必要ですね。


経穴のリンク
libreofficeだとダラダラとつながった状態ですので、経穴を個別に探してリンクを付けようとすると、探すのが大変なので箇条書きにしました。
これで、検索もリンク設定も少し楽になりました。


なんとなく無事完成

なんとなく完成しましたので、とりあえず問題がみつかなかればこのままでいきます。
経穴の名前や備考は確認していますが、数が多いので間違えがないか不安です。
接骨院、鍼灸院のブログですので間違えが多いと信用の問題がありますしね。


鍼灸治療だけでなく接骨院での治療でも経穴

鍼灸院、接骨院では経穴だけでなく経脈、経筋、筋・筋膜ラインなども使います。
経穴の繋がりとしての経脈の図などもアップできるようにしたいのですが、自分で描くのは大変ですので少し時間をかけたいと思っています。
とりあえず、経穴の詳細を症状と合わせてブログにアップできればと思います。


このブログを書きながら聴いてる1曲をご紹介

オースティン・マホーン / Dirty Work The Album
アルバム:Dirty Work リリース:2017年