かんたん!WordPressで見切れない「表」を作成する方法!

表の作成 暮らし記
スポンサーリンク

表の作成

ワードプレス(wordpress)で記事を書いているとき「表」を使いたいときってありますよね!?

 

何かを比較したり、情報整理して提供する記事作成のときに「表」は大活躍します!

こんな表ですね!

店舗住所電話備考
○○焼肉 渋谷店東京都渋谷区*****03-****-****平日22時まで
○○焼肉 新宿店東京都新宿区*****03-****-****水曜(定休日)

 

ワードプレスではエディタを使用すれば感覚的に「表」を作成できるので簡単です。

 

でも、そのまま作成してしまうと横幅が合わなくて、環境によっては見切れてしまう場合があります。

 

結構「この症状」に出くわす方って多いと思います。

最近は「スマホ」や「タブレット」など画面サイズがPCほど広くない場合も多く、どのように表示されるか全てを確認するには不可能ですよね?

 

せっかく表を作成したのに見切れた記事だと格好悪い!

かといって極端に横幅を狭くしてしまうと情報をほとんど入れれなくなってしまいます。

 

なにかプラグインを入れるのも面倒くさいし、新たにコードを書くのも嫌!!

表をスクロールできるコードもありますがめんどくさい方はこの方法です。

 

そんな時、簡単な方法があったらどうですか!?楽ですよね。

 

で、実際そんな楽に設定できる方法があるんです!

ではサクッとご紹介したいと思います。

 

 

見切れない「表」の作成方法とは!?

表1ワードプレスのエディタから「テーブル」を選択します。

エディタ上部にあるのですぐ見つかりますよ。

行と列の数を決める!

表2今回は3行×4列の表を作成してみましょう。

直感的に作成できるので簡単ですね!!

表を表示させる!

表3そのまま作成するとこんな感じになってしまいます。

なので右下の部分を選択し、ドラックすると。。

表の縦と横幅を広げる!

表4表を簡単に広げることができます。

縦、横と自由自在です。

テキストを入力する。

表5あとは各セルに必要情報を入力していくだけです。

ここはテキスト入力だけです。

これでプレビュー表示させると・・・。

表の確認(プレビュー)すると。。

表6

横幅を広げてしまうと見切れてしまう場合が多いです。

PCでは正しく表示されていてもスマホなどでは知らないうちに見切れている場合も・・・。

この状態ではまだ切れた状態ですね。

 

見切れないよう設定する!

表7見切れないようにするにはまず「表」全体をアクティブ状態にします。

※アクティブ状態とは、表の四隅に小さな□が付いた状態です。

そして表のプロパティを選択。

表の幅を修正

表8

通常だと表の幅の部分に数字が入っています。

今回の場合だと「718」と入ってますね。(これはPix数です。)

 

表9

この部分を「数字なし」の状態に削除します。

「0」を入れるのではなく「空欄」状態にして下さい!

空欄にしたら「OK」で終了させます。これで表が見切れることはなくなります。

表の確認!!

表10これで確認すると、ほら!

表が完全な状態で完成しました。スマホ、タブレットで確認しても見切れることはありません。

 

いかがでした?

表が見切れてイライラ!しているって方は多いと思います。

でも「プラグイン」なんかに頼るのは面倒くさいですよね。でもこの方法だとアッサリ格好いい「表」が完成してしまいます。

ここまで簡単だと表を使った記事製作も楽しくなってしまいます。

 

今回の「記事」が多くの方の参考になればうれしいです!!

ぜひ試してみて下さい!!

コメント

タイトルとURLをコピーしました