ディーエムガジェット

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の人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPress[Stinger5] 画像に囲み線を入れる
WordPress[Stinger5] 画像に囲み線を入れる
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
WordPress[Crazy Bone] 管理ページへのアクセスログを記録
WordPress[Crazy Bone] 管理ページへのアクセスログを記録
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress[Ultimate TinyMCE] ビジュアルエディタを拡張するプラグイン
WordPress[Ultimate TinyMCE] ビジュアルエディタを拡張するプラグイン
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress 検索エンジン用サイトマップを作成する方法
WordPress 検索エンジン用サイトマップを作成する方法
WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法
WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法