【WordPress初心者】テーブル(表)の作成手順を解説!スマホで表示させる&色を付ける方法

      2017/07/17


今日は、久しぶりにブログを書いていてWordpressで表を作ったんですが、

色や線の変え方が分からなくなっていました。

また以前習ったことを調べながら行いましたが、

自分の備忘録としても、記事にしておこうと思いました。

初心者の方でも分かりやすいように、手順を載せていますので、

参考にして下さい。

スポンサーリンク

 

WordPressで表(テーブル)を作る~テーブルの挿入~

 

まず、Wordpress上のアイコンに表(テーブル)があるのを確認して下さい。

 

私のWordpressのサイト上では、

下の図のように「テーブル」という四角いアイコンが表示されています。

 

もし、このアイコンがないという方は、プラグインのTinyMCE Advanced

まだインストールしていないのか、インストールしていているのにないという方は、

このテーブルという項目を選んでいないのかもしれません。

もしインストールしていない方はこちらのサイトを

参照してインストールして、テーブルを表示させてみて下さい。

 

プラグインTinyMCE Advanced設定でWordPressの記事投稿を簡単に

 

テーブルのアイコンが表示されたら、クリックしてみましょう。

 

 

表が表れますので、縦と横と必要なセルの数を選びます。

 

図のような、グレーの表が挿入されます。

 

間違えた時でもテーブルのアイコンをクリックすると、「表の削除」がありますので、

やり直すことが出来ます。

 

WordPressで表(テーブル)を作る~幅の変更方法~

 

上の表のセルをクリックするとカーソルが入りますので、

文字を入力します。

文字を入力すると、勝手に横幅が広がって行きます。

 

文字を入力すると横幅が広がります

 

横幅を縮める際は、線にカーソルを置いて縮めることが出来ます。

 

WordPressで表(テーブル)を作る~色を付ける方法~

 

このままのグレーの色でも構わないという方はそのままでいいのですが、

もっときれいな色にしたいな~とか、白に黒の線が良いなど変更したい方も

いらっしゃると思います。

そんな時は、線の色と、セルの背景を変えることが出来ます。

 

色を変えたい表全体を選択します。(カーソルで全てを選ぶ)

全体的に青くなります。

その状態で、テーブルのアイコンをクリックし、セルのプロパティを開きます。

 

そこで、セルのプロパティの詳細をクリックします。

 

 

枠線の色と、背景色が出てきますので、赤い矢印の部分をクリックして、

好きな色を選択します。

 

 

好きな色を選ぶと、セルのプロパティが変わり、

 

 

このようになるのですが、色の選び方は好きな色をクリックする方法と、

 

 

 

 

矢印部分にカラーコードを入力してenterを押すと、

その色に変えることが出来ます。

 

WEB色見本はこちらを参考にして下さい↓

WEB色見本 原色大辞典ーHTMLカラーコード

 

上の指示通りに作った表が下にあります↓

 

文字を入力する 幅を調節する 線の色を変える セルの色を変える
文字を入力する 幅を調節する 線の色を変える セルの色を変える
文字を入力する 幅を調節する 線の色を変える セルの色を変える
 文字を入力する 幅を調節する 線の色を変える セルの色を変える

 

もし、表全体ではなく、部分的なセルだけを色付けしたい場合は、変えたいセルを

選んで同じように行って下さい。

 

スポンサーリンク

 

スマホで表が切れてしまう場合の調整方法

 

上の図のようにWordpress上では綺麗に表示されている表ですが、

スマホだと、表示が切れてしまう場合があるんです。

投稿する際は、PC上で確認すると思いますが、私はスマホもチェックしてるわよ!って

方はぬかりないですね!

 

今回は横幅の設定は何も触らずアップしてみると、

スマホではこのように切れて表示されています。

 

 

読者には正確な情報が伝わりません。

 

この場合は、表のプロパティを開き、横幅の数値を0にすることで解決します。

色々インストールするのが面倒な方はこの方法がお薦めですが、

現在、もっと簡単な表作成のプラグインがあることを発見しました!

 

その名はTablePress と、Responsive Tables

この二つのプラグインをインストールすると自動的にスマホでも表示されるそうです。

レスポンシブ対応な便利なプラグインがどんどん出て来ますね!

表を頻繁に使う方にはお薦めです!

 

この方法はこちらのサイトを参考になさってください!

TablePressをスマホ対応!レスポンシブな表作成プラグイン!|自作PCテクニカルセンター

 

初心者の私には今の方法で続けちゃおうと思います(笑)

 

まとめ

 

今回は、Wordpress内での、表の作成と、色や背景色の変え方、スマホでもきちんと

表示させる方法などについて紹介しました。

細かい説明も加えたので、初心者の方でも出来ると思います。

またResponsive Tables を使う方法も解説出来るように

勉強しますね!

 

私も初心者なので、このやり方よりもっと簡単な方法あるよ~なんて

情報がありましたら、是非教えて下さいね!

 

ブログを書いて行く上でのお薦めの情報はこちらに

載せていますので、ご覧ください。

ブログ構築|凜のトレンド工房

 

最後までありがとうございました!

スポンサーリンク

 

 

 


 - ブログ構築

ツールバーへスキップ