サラリーマンのネタ帳

*

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

   

表の作成

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

 

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

こんな表ですね!

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

 

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

 

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

 

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

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

 

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

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

 

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

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

 

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

 

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

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

 

スポンサードリンク

 

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

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

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

行と列の数を決める!

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

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

表を表示させる!

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

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

表の縦と横幅を広げる!

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

縦、横と自由自在です。

テキストを入力する。

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

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

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

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

表6

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

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

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

 

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

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

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

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

表の幅を修正

表8

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

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

 

表9

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

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

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

表の確認!!

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

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

 

いかがでした?

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

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

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

 

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

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

 - 暮らし記

336

336

Message

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

  関連記事

当たり前じゃない。健康と時間。

  すべての元(源)は健康から。 ジジイくさいかもしれませんが、本当に …

2015年「多摩川花火大会」の場所取りは?穴場は?

(新エントリー)2015年8月22日午前11時時点の場所取り状況を「最新エントリ …

人生を変える!必要なのは自分が納得できる小さな事を始めることだ。

あなたは今、会社・仕事・人間関係に悩んでいるだろう?   何か毎日がス …

殻付き牡蠣の剥き方!上手に剥く4つの手順!ステーキナイフでも代用

知り合いから殻付きの牡蠣が大量に送られてきた。冬の味覚として代表される牡蠣。 わ …

やっちまった!!IMEI(iPhone製造番号)を確認する前に初期化してしまった人たちへ。

  「あ~、IMEI製造番号のチェックせずに初期化してしまった!!」 …

即効で熱を下げる6つの方法!一日で高熱を早く下げるにはビタミンC

最悪です。年始早々から風邪を引いてしまいました。 なんとなく身体が怠いなぁ~と体 …

【結論!固定電話の必要性】子供の連絡網はどうするの?

あなたの自宅に固定電話はあるだろうか? 一昔前にこういう質問をすれば、逆に「固定 …

そこまで酷かったか!自転車のタイヤ交換してみた。

  ついに来たか。そんな感じです。   先週末、クリーニング …

まだ間に合う!多摩川花火大会2015場所取り状況と穴場

本日8月22日は多摩川花火大会が開催されますね。夏休みも後半の子ども達も楽しみな …

驚愕!ダブルダッチを日体大「乱縄」さんに教えてもらった。

あなたは「ダブルダッチ」というスポーツをご存知だろうか? 簡単に言えば2本のロー …