WordPress 表作成のプラグインTablePress勝手手コキ

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

TablePressはワードプレスで表を挿入する代表的なプラグインの一つです。 このプ作成プラグインは、現在、80万人以上のサイトで使用されるほどの人気を集めています。 この記事では、 TablePressで作成された表を欧米に合わせて変更する方法を説明します。

ワードプレスの表作成のプラグインTablePress表カスタマイズする

ワードプレスの表を作成し、プラグイン:TablePress

ワードプレスのサイトでTablePressプラグインを使用すると、簡単に表(テーブル)を作成し、挿入することができます。 しかし、自動的に作成された表をそのまま使用するには、多少の不満があります。 (より便利にテーブルとグラフを作成し、管理したい場合 この記事に紹介された wpDataTables プラグインを考慮してみることができます。)

ワードプレスの表作成のプラグインTablePressに作成された表(基本)

この記事では、TablePress表をユーザー好みに合わせて調整する方法を説明します。 まず、サンプルテーブルを一つ作ります。

表外郭枠線陰影(影)の効果

tablepress wrapper要素を使用して、表全体の外郭枠線drop shadow効果を適用してみましょう。 次のようなコードをCSSスタイルシートに追加するだけです。 CSSコードをスタイルシートに追加する方法は、 ここを参照してください。

/* tablepress border */
#tablepress-2_wrapper /* tablepress wrapper 요소. 요소 검사를 통해 확인 */
{
border: 1px solid grey; /* grey 대신 적절한 색상으로 대체 */
box-shadow: 10px 10px 5px #888888; /* 박스 그림자 효과 */
}
TablePress表カスタマイズ

それではどのように変わったのかましょうか? 影だけ与えても単調に多く消えね。

テキストの配置

次に、最初の行のテキストを中央に配置に調整してみましょう。 次のようなコードを使用します。

/* Align the text in the first line in TablePress */
tr.row-1.odd > th {
  text-align: center;
}
TablePressテーブルテキストの配置する

次の図のように最初の行のテキストが中央揃えました。

TablePress表の幅を調整

今表の幅を調整する方法を説明します。 上の図を見ると、表の幅がそれほど気にかかりません。 いくつかのシナリオを考えてみることができます。

最初は、いくつかの列だけを固定幅に調整し、残りは自動的に調整されるようにする方法であり、第二は、すべての列の幅をそれぞれの割合(%)に調整することです。 両方の長所と短所があるでしょう。 すべての列の幅をそれぞれの割合で調整するには、width:50%;のようなコードを、それぞれの列に対応する要素に適用します。

ここ最初の列の一番端の熱(現在4番目の列は、約25%のサイズに合わせてています。これを20%のレベルに下げてみましょう)だけ固定し、残りはそのままおくいたします。 調整を受ける列の要素が必要です。 おそらく簡単に把握ができないこともあるようです。 次のようなコードを挿入ください。

/* Adjust the width of the columns of a TablePress table */
#tablepress-2 th.column-1 {
width: 50px; /* 첫 번째 열의 너비를 50px로 고정 */
}
#tablepress-2 th.column-4 {
width: 20%; /* 네 번째 열의 너비를 20%로 고정 */
}
TablePress表の幅を調整

上記のコードを適用した後のようです。

縦線を挿入する

今縦線を挿入してみましょう。 最初の列と二番目の列の間に点線を追加試みますか? この場合、2つの要素を一緒に考慮する必要があります。 最初の行は、テーブルのヘッダー(table header)に設定したため、最初の行と残りの行を分離して考える必要があります。 そして、最初の列の並べ替えも気に入らないので、中央配置するようにします。 次のコードを追加してください。

/* Inserting a dotted line between the first and the second columns in TablePress */
#tablepress-2 th.column-1,
#tablepress-2 td.column-1
{
border-right: 1px dotted grey;
}
/* text align for the 1st column */
#tablepress-2 td.column-1
{
text-align: center;
}
ワードプレスTablePress表縦線を挿入する

今最終完成した形をみましょう。

どうですか? 最初より整頓された感じですか? 同様の方法で、テキストの色や大きさなどを自由に調整することができます。 Web上で表の幅などを調整する作業が困難な場合がありますが、このように単純なCSSを使用して簡単に表をユーザー好みに合わせて変更が可能です。

この記事は、旧バージョンに基づいて作成されたため、最新のバージョンでは適用されない場合があります。 しかし、原理を理解して応用してみてください。

注:



12のコメント

  1. こんにちはワード様。
    今日のワードさんの有益なブログに役に立ちました。^^
    一つの解決できなかったことが、テーブルのヘッダー側の背景色を変更するにはどうすればかどうか分からないですね。
    tr.row-1.odd> th {
    テキスト整列:センター;
    背景色:黒;
    }
    上記のようにすれば変わると思ったならんですよ...
    すべての表のヘッダ部分の背景色が水色の基本指定されているが、この部分を変えたいのですがcssをどのように適用すれば可能かどうか教えていただければと思います。

    応答
    • こんにちは?

      私が直接確認することがなく、正確な答えを与えることができない点ご了承ください。

      CSSが正しいが適用にならない場合!important;を追加してください。

      background-color: black !important;

      猛暑に健康に注意してください。

      応答
      • 教えシンデでだから適用になりますね^^ところで、他の色に戻って変えたら変わったカラーで見られないですね。 キャッシュクリア強力更新しても、変更がWebブラウザに反映さにならず、一度も接続していない機器にすると正しく表示さね...こういう時はどうか?

      • キャッシュプラグインをインストールした場合、まれにこのような現象が発生することがあります。
        私は昨年のテーマを変更した後、キャッシュに問題が発生して数ヶ月の間に苦労しました。

        私はキャッシュプラグインを変えブラウジングキャッシュ機能を無効にして問題を解決しました。

        https://www.thewordcracker.com/basic/published-posts-not-showing-issue-in-wordpress/

        サイトによっては、環境に応じて解決方法が異なることもあるようです。

    • まずはCSSについて勉強してみ推奨致します。 オンラインでは、 https://opentutorials.org/ サイトから適切なコースを選択して入ってみてください。 本を購入してもよさそうです。 私は本を​​購入してみたんですよ。

      応答
    • こんにちは? CSSは簡単なことながらも、ある時は難しいようです。 最後に!importantを一度追加してください。

      예:
      width: 100px!important;

      応答
      • CSSを追加する方法は、 https://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/ 文を参考にしてください。

      • テーマを変えだからだ適用ね助けてくれてありがとうございます

  2. TablePressの表のレイアウトを一括的に変更するには、 https://www.thewordcracker.com/miscellaneous/css-attribute-selectors/ 文を参照してください。

    応答