シェアする

WordPressプラグイン「TablePress」で表の幅を変更する

シェアする

WordPressプラグイン「TablePress」で表の幅を変更するtop

WordPressプラグイン「TablePress」で表の幅を変更する

WordPressプラグイン「TablePress」で表が簡単に作れることを以前紹介しました。

WordPressプラグイン「TablePress」で表の幅を変更する00

前回参考記事

ソートが出来る表を作ってくれる「TablePress」を使ってみる
ソートが出来る表を作ってくれる「TablePress」を使ってみる 他の人が見て見やすいページを心がけようとすると、テキストだけでなく画像...

デフォルトで「TablePress」を利用すると、表の幅がWordPressで利用しているテーマのメインの幅いっぱいに使われます。

セル内の文字数によってははみ出たりなどして不格好になることも…

今回は「TablePress」で作られた表の幅を変更する方法をメモしていきます。

スポンサーリンク

CSSコードを使っていこう!

WordPressではCSSコードを打ち込む事で、より自分好みの設定を行う事ができます。

しかしプログラミングを打ち込むのは中々慣れていないと躊躇してしまいますよね。

今回ははじめの一歩的な意味合いも込めて簡単なコードを紹介していきます。
「TablePress」のCSSコードを打つ場所は「TablePress」画面の「プラグインのオプション」タブから行けます。

WordPressプラグイン「TablePress」で表の幅を変更する01

無事たどり着いたら、「以下の「カスタムCSS」コマンドを読み込み、Tableのスタイルを変更:」のチェックボックスにチェックが付いているのを確認して、中に下記のコードを入力します。

.tablepress {
width: 50%;
}

この一文を打ち込んで画面下の「変更を保存」をクリック。

これだけで、サイトに使用されている「TablePress」で作られた表のサイズが、メイン記事の領域の半分のサイズで表示されるようになりました。

WordPressプラグイン「TablePress」で表の幅を変更する02

文字のサイズも変えよう!

また

.tablepress {
font-size: 50%;
}

と打ち込むと、表内の文字のサイズの変更がなされます。

上の場合だと表内の文字サイズは50%、つまり半分のサイズに縮小されます。

表全体の幅変更とあわせて、上手く調整してみてください。

表を個別で変更するCSSコードの書き方

表を個別に幅を変更したい場合は一行目を

.tablepress -id-1 {

というような書き方でテーブルIDを指定してあげれば、そのテーブルIDの表だけが変更されるようになります。

スポンサーリンク

シェアする

コメントをどうぞ

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)