ワードプレス(wordpress)で記事を書いているとき「表」を使いたいときってありますよね!?
何かを比較したり、情報整理して提供する記事作成のときに「表」は大活躍します!
こんな表ですね!
店舗 | 住所 | 電話 | 備考 |
○○焼肉 渋谷店 | 東京都渋谷区***** | 03-****-**** | 平日22時まで |
○○焼肉 新宿店 | 東京都新宿区***** | 03-****-**** | 水曜(定休日) |
ワードプレスではエディタを使用すれば感覚的に「表」を作成できるので簡単です。
でも、そのまま作成してしまうと横幅が合わなくて、環境によっては見切れてしまう場合があります。
結構「この症状」に出くわす方って多いと思います。
最近は「スマホ」や「タブレット」など画面サイズがPCほど広くない場合も多く、どのように表示されるか全てを確認するには不可能ですよね?
せっかく表を作成したのに見切れた記事だと格好悪い!
かといって極端に横幅を狭くしてしまうと情報をほとんど入れれなくなってしまいます。
なにかプラグインを入れるのも面倒くさいし、新たにコードを書くのも嫌!!
※表をスクロールできるコードもありますがめんどくさい方はこの方法です。
そんな時、簡単な方法があったらどうですか!?楽ですよね。
で、実際そんな楽に設定できる方法があるんです!
ではサクッとご紹介したいと思います。
見切れない「表」の作成方法とは!?
エディタ上部にあるのですぐ見つかりますよ。
行と列の数を決める!
直感的に作成できるので簡単ですね!!
表を表示させる!
なので右下の部分を選択し、ドラックすると。。
表の縦と横幅を広げる!
縦、横と自由自在です。
テキストを入力する。
ここはテキスト入力だけです。
これでプレビュー表示させると・・・。
表の確認(プレビュー)すると。。
横幅を広げてしまうと見切れてしまう場合が多いです。
PCでは正しく表示されていてもスマホなどでは知らないうちに見切れている場合も・・・。
この状態ではまだ切れた状態ですね。
見切れないよう設定する!
見切れないようにするにはまず「表」全体をアクティブ状態にします。
※アクティブ状態とは、表の四隅に小さな□が付いた状態です。
そして表のプロパティを選択。
表の幅を修正
通常だと表の幅の部分に数字が入っています。
今回の場合だと「718」と入ってますね。(これはPix数です。)
この部分を「数字なし」の状態に削除します。
「0」を入れるのではなく「空欄」状態にして下さい!
空欄にしたら「OK」で終了させます。これで表が見切れることはなくなります。
表の確認!!
表が完全な状態で完成しました。スマホ、タブレットで確認しても見切れることはありません。
いかがでした?
表が見切れてイライラ!しているって方は多いと思います。
でも「プラグイン」なんかに頼るのは面倒くさいですよね。でもこの方法だとアッサリ格好いい「表」が完成してしまいます。
ここまで簡単だと表を使った記事製作も楽しくなってしまいます。
今回の「記事」が多くの方の参考になればうれしいです!!
ぜひ試してみて下さい!!
コメント