WordPressでキレイにテーブル表示するプラグイン「TablePress」

ブログで比較記事とか書いていると入れたくなるのがテーブルです。

HTMLで直接書いても良いんですが、できれば簡単キレイに見せたいですよね。

そんな時に便利なのが「TablePress」というプラグインです。

ベースとしては以下のようなテーブルを使っています。

<table>
    <tbody>
        <tr>
            <td>1列目の左</td>
            <td>1列目の真ん中</td>
            <td>1列目の右</td>
        </tr>
        <tr>
            <td>2列目の左</td>
            <td>2列目の真ん中</td>
            <td>2列目の右</td>
        </tr>
    </tbody>
</table>
1列目の左 1列目の真ん中 1列目の右
2列目の左 2列目の真ん中 2列目の右

こんなテーブルを作ってみましょう。

 Xserverファイアバード
月額¥1,000¥500
初期費用¥3,000¥2,000
ディスクスペース200GB100GB
MySQL50個10個
WPインストール機能対応
マルチドメイン無制限
メールアカウント無制限1,000個

「TablePress」のインストール

プラグインの管理画面から「TablePress」を検索してインストールします。

特に設定は必要ありません。

テーブルの新規作成

WordPressの管理画面左にある「TablePress」にカ―ソルを合わせて 「新しいテーブルを追加」をクリックします。

tablepress1

 

そして作成するテーブルの設定をします。

tablepress2

 

説明の所には自分がわかりやすいように何のテーブルなのか書いておいても良いですね。 特に何も記入しなくても問題無しです。

そしてテーブルを追加で中身を記入していきましょう。

tablepress3

ヘッダーは別にいらないという場合は、テーブル編集画面の 「テーブルのオプション」から設定を切り替えましょう。

テーブルが完成したら保存して、[table id=1 /] というようなショートコードを記入することにより テーブルが反映されます。

一度作っておけばショートコードを入れるだけで他の記事にも使えるので、簡単にテーブルを記事に挿入できますね。

 

※ショートコード

WordPressには色々な機能があったりプラグインがあって、色んな事ができます。

その機能や使い方を全て覚えるのはかなり大変だと思います。

「ショートコード」はプラグインから作成されるもので、使う人は記事にペタペタとそのショートコードを貼るだけでプラグインの機能が使えるようになります。

プラグインの機能を知っていて、マークアップ(構造)への理解があれば簡単にできて、コーディングの知識はそんなに必要ないというのが素晴らしいところですね。

 

導入の解説はこのぐらいで、もっと詳しい使い方はコチラの記事を御覧ください。

【TablePressの使い方】表を装飾してキレイに見せよう。 | テクログ

TablePressを使ってできる色々な装飾の使い方についてご紹介しましょう。

記事が気に入ったら
テクログを "いいね!"
Facebookで更新情報をお届け。

Tech Log | テクログ

関連記事

  1. WordPressテーマを変えたらまずはやっておきたい、IZM(TCD034)での子テーマの作り方

  2. WordPressでソースコードを綺麗に表示するプラグイン「SyntaxHighlighter Ev…

  3. ブログの読みやすさに目次はどんな効果があるのか考えてみた

  4. 一気に100記事も夢じゃない!記事作成がはかどるサイト設計図の作り方

  5. 圧倒的なビジュアル力でセルフブランディングができるブログが作れるWordPressテーマ「IZM」

  6. WordPress4.6-ja プラグインの新規登録方法

  7. 【TablePressの使い方】表を装飾してキレイに見せよう。

  8. WordPressテーマGorgeous(TCD013)で子テーマを作って見出しを装飾しよう

  9. WordPressテーマGorgeous(TCD013)に新機能が追加された時のアップグレード方法(…

コメント

  1. この記事へのコメントはありません。

  1. 2015年 10月 21日

転職テクニック

  1. 内定が3ヶ月から1ヶ月に短縮 転職エージェントを使うほど仕事探しが格段にラクにな…
  2. 転職エージェント「サポタント・ワークポート・パソナテック」の登録から面接までの流…
  3. アラフォーの私が実際に内定を取るまでに使った転職エージェント7選
  4. アラフォー男が内定を勝ち取れた 転職エージェントを使うメリット
  5. アラフォーが内定を勝ち取った面接テクニック 簡単だけど難しい?笑顔の効果
  6. アラフォーが内定取るまでにかかった時間 後から焦らない為にご注意を!
  7. アラフォーで内定を取って気付いた転職活動で大事な事
  8. 心と体のズレが出てくる一週間。理想の生活習慣について考える 活動記録 其の3
  9. まずは転職に向けて派遣登録申し込みと情報収集 活動記録 其の2
  10. アラフォーで転職せざるを得なくなった男の活動記録 其の1

人気記事ランキング

PSテクニック

オススメテクニック

PAGE TOP