初心者が読むべき500のノウハウ記事のまとめ

WordPressにもコピペ1発で使える比較表デザイン【ケータイも対応済】:ぽんひろcom

こんな人におすすめ
WordPressで比較表をサクッと作りたい人
紹介記事:【HTML/CSS】tableタグを使わない比較表デザイン!レスポンシブ対応!
著者:ぽんひろcom

今回はHTMLとCSSで比較表を作っていきます。
比較表はtableタグで作ることが一般的かと思いますが、tableタグは使いません!
文章、リスト、画像など何でも入れられます。
コピペで出来るようにサンプルをいくつか用意しました。スマホでも使えるようにレスポンシブ対応になっています。
好きにカスタマイズして使ってください!

ぽんひろcom

この記事を読んで勉強になったポイント

  1. テーブルタグを使わなくても比較表が作れる!(HTML/CSSのみで)
  2. サンプルパターンがたくさんあって、コピペで使える

ブログデザイナーのぽんひろさん(@ponhiroo )の記事です。
ワードプレスでもコピペ1発で使える比較表の作り方を紹介されてます。

か、神記事・・w

ごま吉

記事内では、たくさんのオシャレなパターンの比較表を掲載されていてコピペですぐに使えるという・・初心者が泣いて喜べる内容となっています。

CSSとかHTMLとか未だにわからへん・・

ごま吉

例えば、こんな感じですぐにブログに実装できます。

左タイトル
  • リスト1
  • リスト2
  • リスト3
右タイトル
  • リスト1
  • リスト2
  • リスト3
・・・便利すぎw

ごま吉

CSSファイルとかいじりたくない人は、プラグイン『WP Add Custom CSS』を入れれば投稿画面内でCSS挿入できますよ。
参考:WordPressでテーブルのセル結合ができない時に使うジェネレーター:テーブルタグジェネレーター

アフィリエイトは比較系の記事が多いので、こちらで公開されてるソースはコピペで使えるので超絶助かります。皆さんもぜひ!

この記事と合わせて読んで欲しいツイート

※追記(2019/07/06) ソースコードを修正されました。

ソースの構造についての問題点も即修正されました。素早い対応ありがとうございます。ゼロから自分で作る苦労を考えたら、ありがたさしかないですね( ゚д゚ )クワッ!!

ごま吉

参考 【HTML/CSS】tableタグを使わない比較表デザイン!レスポンシブ対応!ぽんひろcom アフィリエイト初心者が知っていると差がつくWordPressのカスタマイズ方法7選【2019年7月】