ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress[Table Press] 表を作成してブログに表示

   

WordPress[Table Press] 表を作成してブログに表示

去年、WordPressで表(テーブル)を作った時に導入したプラグイン「Tabel Press」の事を思い出したので注意点も含め備忘録として残したいと思います。下記のような見栄えの良い表が簡単に作成出来るプラグインです。

WordPress[Table Press] 表を作成してブログに表示

管理画面のダッシュボードからプラグイン → 新規追加 → 「Table Press」と検索してインストール後、「プラグインを有効化する」を忘れずにクリック。インストール後、管理画面のサイドバーに「Table Press」のメニューが表示されているはずです。Table Pressを導入した時は日本語化されていませんでしたが、今は日本語で表示されるので大分わかりやすくなりました。

スポンサーリンク

「Table Press」のメニューをクリックすると「こんにちは。TablePressプラグインを開発したTobiasです」のページが開きます。上段の「新しく追加」から表(テーブル)を作成していきます。使い方は簡単です。テーブルの名前や説明、行数と列数を決めて下のテーブルを追加で作成テーブルが作成されます。自分はこんな風に作っていました。

WordPress[Table Press] 表を作成してブログに表示

最近はまったく更新していないトライアスロン関係のブログで「Table Press」で作成した戦歴を書いた表です。ブログへの表示は投稿ページに

と書くだけでそこにテーブルが表示されます。テーブルに変更を加えるときはこの今テーブルを作成しているページにて変更します。テーブルオプションなどは現状こんな感じです。

WordPress[Table Press] 表を作成してブログに表示

WordPress[Table Press] 表を作成してブログに表示

では、完成したテーブルをブログに表示させてみましょう。

スポンサーリンク

WordPress[Table Press] 表を作成してブログに表示

あれ、なんか左側の線と下の線が消えてしまっています。原因を調べたらどうやらテーマのCSS(デザイン)に影響を受けてしまって表示がおかしくなっているみたいです。これを修正します。先程の「Table Press」のページに行って、上部のメニュー左下「プラグインのオプション」にいきます。

WordPress[Table Press] 表を作成してブログに表示

ここに「フロントエンド オプション」があり、カスタムCSSを読み込ませる設定が出来るようになっています。「以下の「カスタムCSS」コマンドを読み込み、テーブルのスタイルを変更:」にチェックをいれて下記のコードをコピペしてください。

WordPress[Table Press] 表を作成してブログに表示

コピペしたあとページの一番下の「変更を保存」を忘れずにしてください。確認してみましょう。

スポンサーリンク

WordPress[Table Press] 表を作成してブログに表示

これで最初完成図で紹介したような見た目になりました。読んで頂いてありがとうございました。

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
WordPress[Stinger3用 子テーマ] サイトマップ(目次)を設置する方法
WordPress[Stinger3用 子テーマ]サイトマップ(目次)を設置する方法
WordPress[.htaccess] 管理画面へのアクセスを日本国内限定にする
WordPress[.htaccess] 管理画面へのアクセスを日本国内限定にする
OSXローカル環境にwordpressをインストールする方法
OSXローカル環境にwordpressをインストールする方法
wordpress優良プラグイン
wordpress優良プラグイン
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置