【WordPress初心者】テーブル(表)の作成手順を解説！スマホで表示させる＆色を付ける方法
今日は、久しぶりにブログを書いていてWordpressで表を作ったんですが、
色や線の変え方が分からなくなっていました。
また以前習ったことを調べながら行いましたが、
自分の備忘録としても、記事にしておこうと思いました。
初心者の方でも分かりやすいように、手順を載せていますので、
参考にして下さい。
[ad]
WordPressで表(テーブル)を作る～テーブルの挿入～
まず、Wordpress上のアイコンに表(テーブル)があるのを確認して下さい。
私のWordpressのサイト上では、
下の図のように「テーブル」という四角いアイコンが表示されています。
もし、このアイコンがないという方は、プラグインのTinyMCE Advancedを
まだインストールしていないのか、インストールしていているのにないという方は、
このテーブルという項目を選んでいないのかもしれません。
もしインストールしていない方はこちらのサイトを
参照してインストールして、テーブルを表示させてみて下さい。
テーブルのアイコンが表示されたら、クリックしてみましょう。
表が表れますので、縦と横と必要なセルの数を選びます。
図のような、グレーの表が挿入されます。
間違えた時でもテーブルのアイコンをクリックすると、「表の削除」がありますので、
やり直すことが出来ます。
WordPressで表(テーブル)を作る～幅の変更方法～
上の表のセルをクリックするとカーソルが入りますので、
文字を入力します。
文字を入力すると、勝手に横幅が広がって行きます。
| 文字を入力すると横幅が広がります | |||
横幅を縮める際は、線にカーソルを置いて縮めることが出来ます。
WordPressで表(テーブル)を作る～色を付ける方法～
このままのグレーの色でも構わないという方はそのままでいいのですが、
もっときれいな色にしたいな～とか、白に黒の線が良いなど変更したい方も
いらっしゃると思います。
そんな時は、線の色と、セルの背景を変えることが出来ます。
色を変えたい表全体を選択します。(カーソルで全てを選ぶ)
全体的に青くなります。
その状態で、テーブルのアイコンをクリックし、セルのプロパティを開きます。
そこで、セルのプロパティの詳細をクリックします。
枠線の色と、背景色が出てきますので、赤い矢印の部分をクリックして、
好きな色を選択します。
好きな色を選ぶと、セルのプロパティが変わり、
このようになるのですが、色の選び方は好きな色をクリックする方法と、
矢印部分にカラーコードを入力してenterを押すと、
その色に変えることが出来ます。
WEB色見本はこちらを参考にして下さい↓
上の指示通りに作った表が下にあります↓
| 文字を入力する | 幅を調節する | 線の色を変える | セルの色を変える |
| 文字を入力する | 幅を調節する | 線の色を変える | セルの色を変える |
| 文字を入力する | 幅を調節する | 線の色を変える | セルの色を変える |
| 文字を入力する | 幅を調節する | 線の色を変える | セルの色を変える |
もし、表全体ではなく、部分的なセルだけを色付けしたい場合は、変えたいセルを
選んで同じように行って下さい。
[ad]
スマホで表が切れてしまう場合の調整方法
上の図のようにWordpress上では綺麗に表示されている表ですが、
スマホだと、表示が切れてしまう場合があるんです。
投稿する際は、PC上で確認すると思いますが、私はスマホもチェックしてるわよ！って
方はぬかりないですね！
今回は横幅の設定は何も触らずアップしてみると、
スマホではこのように切れて表示されています。
読者には正確な情報が伝わりません。
この場合は、表のプロパティを開き、横幅の数値を０にすることで解決します。
色々インストールするのが面倒な方はこの方法がお薦めですが、
現在、もっと簡単な表作成のプラグインがあることを発見しました！
その名はTablePress と、Responsive Tables！
この二つのプラグインをインストールすると自動的にスマホでも表示されるそうです。
レスポンシブ対応な便利なプラグインがどんどん出て来ますね！
表を頻繁に使う方にはお薦めです！
この方法はこちらのサイトを参考になさってください！
TablePressをスマホ対応！レスポンシブな表作成プラグイン！｜自作PCテクニカルセンター
初心者の私には今の方法で続けちゃおうと思います(笑)
まとめ
今回は、Wordpress内での、表の作成と、色や背景色の変え方、スマホでもきちんと
表示させる方法などについて紹介しました。
細かい説明も加えたので、初心者の方でも出来ると思います。
またResponsive Tables を使う方法も解説出来るように
勉強しますね！
私も初心者なので、このやり方よりもっと簡単な方法あるよ～なんて
情報がありましたら、是非教えて下さいね！
ブログを書いて行く上でのお薦めの情報はこちらに
載せていますので、ご覧ください。
最後までありがとうございました！
[ad]
