TablePressは WordPressで表を挿入する代表的なプラグインの一つです。 このプ作成プラグインは、現在、80万人以上のサイトで使用されるほどの人気を集めています。 この記事では、 TablePressで作成された表を欧米に合わせて変更する方法を説明します。
2021年の更新： WordPress デフォルトのエディタである Gutenbergで、テーブルブロックを提供しています。 簡単な表を挿入する場合は、デフォルトのエディタで提供されるテーブル（表）の要素を使ってみてください。
WordPress 表作成のプラグインTablePress表カスタマイズする
WordPress サイトでTablePressプラグインを使用すると、簡単に表（テーブル）を作成し、挿入することができます。 しかし、自動的に作成された表をそのまま使用するには、多少の不満があります。 （より便利にテーブルとグラフを作成し、管理したい場合 この記事に紹介された wpDataTables プラグインを考慮してみることができます。）
この記事では、TablePress表をユーザー好みに合わせて調整する方法を説明します。 まず、サンプルテーブルを一つ作ります。
表外郭枠線陰影（影）の効果
tablepress wrapper要素を使用して、表全体の外郭枠線drop shadow効果を適用してみましょう。 次のようなコードをCSSスタイルシートに追加するだけです。 CSSコードをスタイルシートに追加する方法は、 ここを参照してください。
/* tablepress border */
#tablepress-1_wrapper /* tablepress wrapper 요소. 요소 검사를 통해 확인. 예: #tablepress-2_wrapper */
{
border: 1px solid grey; /* grey 대신 적절한 색상으로 대체 */
box-shadow: 10px 10px 5px #888888; /* 박스 그림자 효과 */
}
それではどのように変わったのかましょうか？ 影だけ与えても単調に多く消えね。
テキストの配置
次に、最初の行のテキストを中央に配置に調整してみましょう。 次のようなコードを使用します。
/* Align the text in the first line in TablePress */
tr.row-1.odd > th {
text-align: center;
}
次の図のように最初の行のテキストが中央揃えました。
TablePress表の幅を調整
今表の幅を調整する方法を説明します。 上の図を見ると、表の幅がそれほど気にかかりません。 いくつかのシナリオを考えてみることができます。
最初は、いくつかの列だけを固定幅に調整し、残りは自動的に調整されるようにする方法であり、第二は、すべての列の幅をそれぞれの割合（％）に調整することです。 両方の長所と短所があるでしょう。 すべての列の幅をそれぞれの割合で調整するには、width：50％;のようなコードを、それぞれの列に対応する要素に適用します。
ここ最初の列の一番端の熱（現在4番目の列は、約25％のサイズに合わせてています。これを20％のレベルに下げてみましょう）だけ固定し、残りはそのままおくいたします。 調整を受ける列の要素が必要です。 おそらく簡単に把握ができないこともあるようです。 次のようなコードを挿入ください。
/* Adjust the width of the columns of a TablePress table */
#tablepress-1 th.column-1 {
width: 50px; /* 첫 번째 열의 너비를 50px로 고정 */
}
#tablepress-1 th.column-4 {
width: 20%; /* 네 번째 열의 너비를 20%로 고정 */
}
上記のコードを適用した後のようです。
縦線を挿入する
今縦線を挿入してみましょう。 最初の列と二番目の列の間に点線を追加試みますか？ この場合、XNUMXつの要素を一緒に考慮する必要があります。 最初の行は、テーブルのヘッダー（table header）に設定したため、最初の行と残りの行を分離して考える必要があります。 そして、最初の列の並べ替えも気に入らないので、中央配置するようにします。 次のコードを追加してください。
/* Inserting a dotted line between the first and the second columns in TablePress */
#tablepress-1 th.column-1,
#tablepress-1 td.column-1
{
border-right: 1px dotted grey;
}
/* text align for the 1st column */
#tablepress-1 td.column-1
{
text-align: center;
}
今最終完成した形をみましょう。
どうですか？ 最初より整頓された感じですか？ 同様の方法で、テキストの色や大きさなどを自由に調整することができます。 Web上で表の幅などを調整する作業が困難な場合がありますが、このように単純なCSSを使用して簡単に表をユーザー好みに合わせて変更が可能です。
この記事は、旧バージョンに基づいて作成されたため、最新のバージョンでは適用されない場合があります。 しかし、原理を理解して応用してみてください。
ランクマスを使っているのにプラグインで作った表内のテキストは文字数をチェックしないようです。 表を中心に文を書くので、実際には分量が十分であってもコンテンツの長さが600単語にならないとseoスコアが上がらないのですが、もしGoogleエンジンの立場でも表を外部ソースとして認識してコンテンツ分の不足でseoに影響を与えるのだろうかと思います。
Rank Mathなどで提示するスコアは参考用としてのみご活用ください。 参考までに、Googleはコンテンツの長さがランク付け要素ではないと述べています。 また、Rank Mathなどは英文コンテンツを基準にしたものです。 英語を韓国語に翻訳すると分量が減ります。 つまり、英文600単語とハングル600単語は分量が実際に異なります。
また私のような場合は文間隔の高さを指定すればモバイルで割れたのに先生の文は高さが設定されたようです 入れてみたのですがこれは別に方法があるのか気になります あまりにも多くの質問させて申し訳ありませんㅜ ウォリンが情熱に限り教えてくださいもっと頑張ります。
基本的なCSSを学ぶと、簡単に修正できます。 市内で書籍を購入し、インターネット上で無料のCSS講義を聴くことができます。
https://www.thewordcracker.com/basic/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4%ec%97%90-css%eb%a5%bc-%ec%a0%81%ec%9a%a9%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95%ea%b8%b0%ec%b4%88/
先生のブログの写真がすべてdrop shadow効果を適用したCSSですねCSS手と目に慣れていませんねこの撮って簡単に修正したいのですがㅎエディタはブロック使用しますか？ 投稿に時間がかかりすぎるようですが、先生はどうですか？
CSSはすべてのポストに共通して適用されるようになっています。 特定のブロックにはCSSクラスを指定することもありますが、ほとんどは一般的な記事を書くように書かれています。 ブロックエディタ（Gutenberg）の段落（paragraph）ブロックとタイトル（タイトル）ブロック、そして引用符（Quote）ブロック、リスト（リスト）ブロックを主に使用します。 Youtube映像を追加するときは、YouTubeブロックの代わりに「カスタムHTML」を使って追加しています。
まとめると、ただ一般的な文章のように文章を作成し、全体的なレイアウトはCSSに調整してくれました。 また、一部の段落ブロックには CSS クラスが指定されることもあります。
直前に先生のCSSコードを残してくれましたが、別に保存しませんでした。 先生ご活用の枠組みを共有していただけますか？ 私も少し変形して活用して勉強してみましょう。 共有してください。
こんにちはワード様。
今日のワードさんの有益なブログに役に立ちました。^^
一つの解決できなかったことが、テーブルのヘッダー側の背景色を変更するにはどうすればかどうか分からないですね。
tr.row-1.odd> th {
テキスト整列：センター;
背景色：黒;
}
上記のようにすると変わると思ったのですが……
すべての表のヘッダ部分の背景色が水色の基本指定されているが、この部分を変えたいのですがcssをどのように適用すれば可能かどうか教えていただければと思います。
こんにちは？
私が直接確認することがなく、正確な答えを与えることができない点ご了承ください。
CSSが正しいが適用にならない場合！important;を追加してください。
background-color: black !important;猛暑に健康に注意してください。
お知らせいただいたようにして適用になりますね^^ ところで別の色に変えたら変わった色に見えませんね。 キャッシュを消して強力リフレッシュしても変更がウェブブラウザで反映されず、一度も接続していない機器にすると正しく見えますね…こんな時はどうしますか？
キャッシュプラグインをインストールした場合、まれにこのような現象が発生することがあります。
私は昨年のテーマを変更した後、キャッシュに問題が発生して数ヶ月の間に苦労しました。
私はキャッシュプラグインを変えブラウジングキャッシュ機能を無効にして問題を解決しました。
https://www.thewordcracker.com/basic/published-posts-not-showing-issue-in-wordpress/
サイトによっては、環境に応じて解決方法が異なることもあるようです。
widthをどの属性値に加え適用するのですか？
まずはCSSについて勉強してみ推奨致します。 オンラインでは、 https://opentutorials.org/ サイトから適切なコースを選択して入ってみてください。 本を購入してもよさそうです。 私は本を購入してみたんですよ。
表の幅の調整がダメ〓〓
こんにちは？ CSSは簡単なことながらも、ある時は難しいようです。 最後に！importantを一度追加してください。
예：
width: 100px!important;CSSをどこだが追加すべきか分からない
CSSを追加する方法は、 https://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/ 文を参考にしてください。
テーマを変えだからだ適用ね助けてくれてありがとうございます
TablePressの表のレイアウトを一括的に変更するには、 https://www.thewordcracker.com/miscellaneous/css-attribute-selectors/ 文を参照してください。