アラフォーママの気になる情報、ピックアップ♪

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

 
この記事を書いている人 - WRITER -
橋本 文子
大阪在住のアラフォーママです。仕事に子育てに毎日奮闘中です。 最新情報が大好き!自分のアンテナに触れた新しい情報をピックアップして 載せていきます♪Webの力で人生変えるぞ!
詳しいプロフィールはこちら

今日は、久しぶりにブログを書いていて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 を使う方法も解説出来るように

勉強しますね!

 

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

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

 

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

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

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

 

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

スポンサーリンク

 

 

 


この記事を書いている人 - WRITER -
橋本 文子
大阪在住のアラフォーママです。仕事に子育てに毎日奮闘中です。 最新情報が大好き!自分のアンテナに触れた新しい情報をピックアップして 載せていきます♪Webの力で人生変えるぞ!
詳しいプロフィールはこちら
初めてスマホにお薦めですよ!

- Comments -

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

CAPTCHA


Copyright© 凜のトレンド工房 , 2017 All Rights Reserved.

ツールバーへスキップ