[WordPress]WordPressで表を作成するのに便利なTablePressをご紹介します!記事を書いていると、表を作成したいことって結構ありますよね。そんな時に重宝するプラグインです。こんな表をつくることができます。値6文字を入力して、表を作成するだけなので、とても簡単です。デザインも自由に設定できたりもするので非常におすすめ。機能も豊富で一度使えば、手放せなくなるプラグインですね。TablePressをインストールしよう!管理画面の「プラグイン」からTablePressを検索します。いますぐインストールをクリックし、プラグインを有効化します。TablePressを有効化しますと、管理画面の項目に「TablePress」という項目が表示されるようになります!表を新しく作成したい場合は、「新しいテーブルを追加」を選択します。表を作成するときに最初に表示される設定画面。テーブル名は自分が管理するときに、わかりやすい名前でOKです。行数と列数を指定できますが、後で変更することも簡単にできますので、このままでも問題ないです。設定が終わりましたら、「テーブルを追加」を押します。2表に値を入力する!「テーブルの内容」という項目で、表の値を入力できます。ちなみに画像でいうと緑枠の部分(1行目)は初期状態で見出し(th)となっています。「テーブルの最初の行はテーブル見出しです。」のチェックを外します。3列数と行数を設定する表の列数と行数の調整の仕方です。D列とE列が不要な場合、1と2にチェックを入れ、3の削除をクリックすると、選択した列がなくなります。列を増やしたい場合は、「○列を追加」の項目で追加するだけです。行も同様の操作をすることで、行数の設定を簡単に行えます。4表を記事に貼りつける方法!こんな感じで、表に値を入力します。最後に画面の一番下にあります「変更を保存」ボタンをクリックすれば、完了です。保存したら、画面の一番上まで戻って、「テーブル情報」の項目を確認します。ショートコードというものがありますので、これをコピーして、そのまま記事に貼りつけます。それだけで、作成した表を使うことができますよ!これを記事に貼りつけると、以下のように表示されます。値6基本的な操作は以上です。スポンサードリンクTablePressをカスタマイズして自由なデザインにする!TablePressには他にも機能が盛りだくさん。表のデザインをもっとこだわりたい人はご覧下さい!表の幅を変更する方法!テーブルを作る時の幅の変更方法を説明します。列の幅を指定することができます。]ショートコードにcolumn_widthsという項目を追加し、左から順に列の幅を指定します。例では%で可変長にしており親コンテナのサイズに依存した設定ですが、固定値も指定できます。]固定値で列幅を指定してみました。表は3列あるのに対し、ショートコードには1列分の幅しか指定しませんでした。この場合、一番左の列が100pxとなり、その他の指定しなかった列は自動調整されます。%と固定値を混在させることもできますよ!テーブルを装飾する方法!テーブルの装飾はCSSで行うことができます。TablePressの「プラグインのオプション」を開いて下さい。オプションを開きます。ここにカスタムCSSが入力できるので記述していきます。※CSSの○の部分はテーブルIDを指します。CSSを使ってデザインも自由に変更することができます。!important;}データ部分のデザインも設定できます。例では、背景色を赤にしています。この他にもいろいろカスタマイズすることができます。bold;}CSSでrowとcolumnを指定することで、特定のセルのデザインを変更することができます。こちらの記事に掲載したものを応用すれば、いろんなことができますよ。最新の記事よっきパソコンが大好きな青年。職業はプログラマ/SE。フリーランスとしてウェブサイトの構築・保守の業務に従事。専門学校とパソコンスクールで講師も担当。幼少期からパソコンが大好きで、趣味がそのまま仕事に転じた。自作PCの魅力に惹かれたのは学生時代の頃。自作PC専門ブログで、お得な情報を紹介しています。詳しいことはこちらの記事で紹介しています。PMはじめましてAvanti-2ndと申します。CSSは初めてでサッパリ分からない初心者です。色んなサイトを見て入力して表は完成しましたが、まだ付け加えたいのですが何度やっても上手くいきません。下記のTablePressのCSSについて質問があります。!important;}id-1の方は1行目に背景色をつけて、文字を中央揃えにしたいと思っています。id-2のほうの方は3列ありますが、1番左の列の背景色と、1行目の背景色を変更(Γ←こういう感じです。)背景色は同じ色です。それに加えて、1行目の文字を中央揃えにしたいです。どこに、どういう入力をすれば出来るのでしょうか?方法があれば教えてください。PMAvanti-2ndさん、はじめまして。以下にサンプルの記述例を挙げさせて頂きます。id-1の方は1行目に背景色をつけて、文字を中央揃えにしたいと思っています。TablePressの設定で「id-1」の表を確認します。id-2のほうの方は3列ありますが、1番左の列の背景色と、1行目の背景色を変更(Γ←こういう感じです。)背景色は同じ色です。TablePressの設定で「id-2」の表を確認します。(Xは表番号)ただしこれでは「表見出し」を指定していない表ですとthタグが生成されずうまく動作しません。(Xは表番号)詳しくは以下の画像をご覧下さい。CSSの記述で「important」を指定しておりますが、これは他にCSSで同じプロパティ(背景色の変更など)を指定した際に、importantを付けた方を優先させるよ、という意味になります。すみません、もしかしたら分かり辛いかもしれません・・・。AMはじめまして、wordpress初心者で表作成について色々調べていてここにたどり着きました。tablepressを使い簡単な表を作成することはできたのですが、Excelのようなことができる表にしたいです。縦100行×横20列程度の表を作りたいと思うんですが、PCスマホとも普通には表示できないですよね。そこで横を20列の中から10列程度に閲覧者が任意で選んで、できたら固定できる。表のヘッダー1行は固定したままスクロールできる。ソート、抽出の機能と元に戻すボタンをつける。初心者には難しすぎる機能かもしれないので、もしプラグイン機能拡張の作成依頼等になるということでしたらそちらで改めてお願いしたいと思っております。なにか解決策がありましたら、ご提案いただけないでしょうか。返信コメントを残す返信をキャンセルする。published)サイト上に表示された文字を入力してください。業:IT系の講師/フリーランスJavaやPHPなどを中心にWEB系エンジニアとして活動しています。自作PCの魅力にハマり、何台も組み立て経験は豊富。自作PCアドバイザー的なこともやってるので、気軽にご相談下さい!!趣味でホームページ制作をしています。お仕事の依頼をしてみませんか?WordPressテーマ・プラグイン開発、自作PC組立代行などお仕事の依頼はこちらでお願いします。Reserved.このページの先頭へ。