Bloggerで表を作ろうとしたら大変。簡単な方法としては、Google Spreadsheetで表を作って貼り付ければよいのだが、表がいい感じで表示されないので、諦めていた。
調整する方法を見つけたのでメモ。
表を貼り付けた後、HTMLビューにしてTableタグに含まれる「table-layout: fixed; width: 0px;」を「table-layout: auto; width: 100%;」に置き換える。
「table-layout」を「auto」に設定することで、デバイスの画面サイズに対応したサイズで表示され、「width」を「100%」に設定することで、表の横幅が画面の横幅いっぱいに表示されるようになる。
参考)https://dendensoken.hankeidou.jp/2021/05/blogger-table.html
2022-01-10追記(2022-02-14 tdタグを1行にまとめるコマンドを追加)
ここで作った表のHTMLが長い原因である、tdタグ内のdata-sheets-numberformat属性やdata-sheets-value属性、表内の各項目に付いているspanタグを削除すると見た目がスッキリする。tdタグのstyle属性はほぼすべての項目で同じなので、削除しても良さそうだが、微妙に違うセルがあるので残しておく。
自分用のメモだが、vimで行う場合は下記(1行目はHTMLで有ることを宣言、2行目はタグの終わりで改行を入れる、3行目はファイル全体を選択、4行目はインデントを整える、5行目はdata-sheets-*属性を削除、6行目はspanタグを削除、7行目はtdタグを1行にまとめる)
:set filetype=html :%s/>/>^M/gc ggVG = :%s/data-sheets-.\{-}\%(}"\)\@=}" //gc :%s/<span style="[^"]\{-}">[\s\n]*\s*\(.\{-}\)[\s\n]*\s*<\/span>/\1/gc :%s/<td>\n\s*\(.*\)\%(<\/td>\)/<td>\1<\/td>/gc
メモ
置換先の設定を「&」にしてやると、一致した文字列全体に置き換えてくれる。
置き換え時のオプションで「n」を指定すると、実際の置換はせずに、置換される個数を表示してくれる。
例
:%s/data-sheets-.\{-}\%(}"\)\@=}" /&/gn
改行コードは\n。「\_.」で改行コードを含む任意の一文字を表せる。
「\{-}」は直前の文字の0個以上の最短マッチを表す
0 件のコメント:
コメントを投稿