toggle
2017-07-04

今日こそテーブルを覚える、絶対に挿入できるようにするぞ!!!!

スポンサードリンク

table02

テーブルという言葉をご存知でしょうか?

ご飯を食べるところではなく、ブログで文字でも画像でもないヤツのことです。

1 2
A A1 A2
B B1 B2

 

これがテーブルです。

枠が付いていないので自分で付けないといけないみたいですね。

 

「え?じゃあもうほとんど出来てない?」っていう話になるんですが、これはTinyMCE Advancedというプラグインの中の表を書く機能を使っているだけ。

確かに出来ているのですが、今時はレスポンシブデザインというデバイスの横幅に合わせたテーブルも用意する必要があります。

 

このブログのテーマはPantomimeという有料テーマを使っています。

見たところ、記事ページの新着記事と関連記事はテーブルクラスを使っているみたいですね。

 

なので自分で枠とか枠の色を付けようとすると、新着記事と関連記事も同じように表示されてしまいます。

つまりテーブルに枠を付けると、ブログデザインも変わってしまう問題が発生しました。

 

ただテーブルはちゃんとレスポンシブデザインが適用されているってことですねー。

 

さてどうしたらいいものか。

 

パントマイムのデモページを見たらやり方が乗っていたw

 

ブログ投稿スタイル

え?URL貼り付けたらこうなったんですが、ちょっとかっこいいですね。

 

見てみると意外とシンプルな方法が正解だったようです。

テーブルに個別のCSSを適用すればいいらしい。

 

ちょっと真似てみましょう。

ガッツリテーマ使っているんで、真似することが推奨されているはずです。

やはり説明書は熟読するべきでしょう。

 

(例:<table class=”plan”>)

見出し 1 見出し 2 見出し 3
区分 1 区分 2 区分 3
区分 1 区分 2 区分 3
区分 1 区分 2 区分 3
見出し 1 区分 1 区分 2 区分 3
見出し 2 区分 1 区分 2 区分 3
見出し 3 区分 1 区分 2 区分 3

 

ちゃんと色も枠も付いていますね。

これをどこかにコピーしといて、必要になったときにペーストすれば結構簡単に表が作れそうです。

 

1から作るってなるのは、難しいというかかなり面倒くさい気がします。

記事の最初にあるテーブルのHTMLの1行目をさきほどのplanに書き換えてみましょう。

1 2
A A1 A2
B B1 B2

 

ちゃんと枠が付いていますね。

trタグが付いてないんで、こう表示されるのは問題無しです。

 

これは多分僕のつかい方の問題なんでしょうが、HTMLのソースがTinyMCE Advancedで作ったヤツは長いですね。

とりあえずこれで、書評とか何かを紹介する時にテーブルで説明できるようにはなったはずです。

 

作る時にちょっと苦戦するだけで、負担は大分減ったかなー。

 

ところで、さっきからちょっと専門用語覚えているのはなんで?

 

記事を書く1時間ほど前に、基本的な用語を勉強していましたんですよ。

ただこういうのって馴染みのない人には難しすぎて、すぐわかるわけがないので、マインドマップに書いていました。

 

マインドマップに書くと神経が繋がりやすく、またマインドマップは記憶術の手法のひとつでもあります。

脳みその仕組み上、記憶力と未来を見る力は同じ箇所を使うので、新しいことを覚えるときも大分有利っていう完成されたテクニックといえるでしょう。

 

ちょっと脳科学的な話にそれてしまいましたが、そういうことです。

 

table01

 

多分めちゃくちゃ拙いんだろうけど、こういうのを少し書くだけで、初期状態から理解できるまでの時間を大幅に短縮できます。

 

多分最初にブログ記事にテーブルを挿入するときは、30分くらいかかりそうですが、一応これで使えるようにはなりました。

とりあえずカスタムテーブルを覚えたので、色々なデザインも試せそうです。(あんまりそういうのハマるのよくないんだけどねw)

スポンサードリンク
関連記事