WordPressで表の作成と枠を非表示にする方法&活用方法

  • このエントリーをはてなブックマークに追加

WordPressで表を作るのはとっても簡単です。

HTMLやCSSを知らなくてもちゃんと作れます。たまにしか使わないのでいつもどうだったっけ?と調べながら作っていたので備忘録も兼ねて紹介したいと思います。

この3頭の動物イラストは表を使って作成してあります。

枠を見えなくして、動物名の部分には色づけをしました。

リンクを貼ったり、表自体を中央に据えていろんな使い方ができます。

 

表を配置したい箇所へカーソルを合わせる

次に「表マーク」の▼をクリック

表のセル数を選択

右下のセルをクリックすると表の大きさが確定する

セル数は後で追加と削除ができます。多めに作っておくほうが便利です。

↓の工程は飛ばしてもいいです(カーソルを入力しやすくする為に引き伸ばす)

表を引き伸ばさなくてもカーソルをセルに表示できるのなら表を引き伸ばさず作業を進めてもいいです

ここで表を引き伸ばすと、その表の大きさの数値が入力されてしまうので後で数値を設定する必要があります

表に文字を入れてみる

保存してプレビューで表示してみました。

編集画面では2重の破線ですが、プレビューでは1本線の表が表示されました。

表の枠を消す方法です。

実際には消すというより線の色を背景色と同じ白色にして見えなくしています。

表を選択します。

「表マーク」横の▲から表のプロパティを選択します。

詳細タブをクリックし、枠線の色を「#ffffff」と半角で入力。fは6つです。

「#ffffff」は白色です。ほかの色を試したい場合は「#ffffff」と入力する右の□から色の選択ができます。

その下の背景色にも「#ffffff」入れてもいいです。(使っているプラグインによって初めから背景色が設定されている場合もあるので状況に合わせて使ってください。)

最後にOKをクリック。

表の外枠の破線が消えて(見えなくなって)一重破線になりました。この状態でプレビューを見ても変化はありません。

次にセルの破線を消します。

「あ」のセルを選択して今度はセルのプロパティから同じように「#ffffff」を入力します。

[セルのプロパティ]→[詳細]タブで枠線の色入力画面を表示。(やり方は表のプロパティと同じです)

「あ」の周りの線が消えました。

プレビューで見ると「あ」の周りだけ線がなくなっています。

「あ」「い」「う」を画像にしてみます。セル内にカーソルを合わせて、文字を消し、[メディアの追加]で画像を挿入してください。

画像を入れてもセルの大きさは変わりません。これは表をカーソルで広げてしまったため、表の横枠の大きさが固定されてしまったためです。

マウスで横にしか広げていなかったので縦はばは固定されていません。

(カーソルで表を広げずに作業を進めると、画像を挿入したとき画像の大きさまでセルが広がってくれます。)

固定された表の横幅を任意の幅に設定します。

セルのプロパティで幅と高さの大きさを半角で入力します。

[表マーク▼]→[セル]→[セルのプロパティ]

[一般]タブの幅と高さに数字を半角入力します。

単位はピクセルです。

ちなみにサンプルで使っている動物の画像は400×395ですが大きすぎるので1画像150×150に設定しました。

画像が大きすぎる場合もセルの大きさを指定することにより任意の数字(大きさ)で表示できます。

セルのプロパティでセルの縦横の大きさを設定しましたが、表の横幅が固定されているので縦だけ150になりました。

次に表の幅を設定しなおします。

マウスで横幅を広げたので表の横幅は91と固定されていました。

そこで単純に150(画像の大きさ)×3(画像の数)で450(合計)の横幅にします。

表を選択して[表マーク▼]→[表のプロパティ]→[一般]タブから幅に450と半角で入力します。

表の幅が広がってセルの中のイラストが見やすくなりました。

仕上げにセルの枠をすべて見えなくして名前の部分の背景に色を付けました。

一番下の「き」「く」「け」のセルはいらないので削除します。

「き」セルを選択して[表マーク▼]→[行]→[行を削除]で1行すべて削除。

セル内のイラストや文字の位置を中央にしたり見た目を整えたら出来上がりです。

プレビューで表示させた画面です。

表をHTMLやCSSなどの専門知識を使わず作成するコツは、表の大きさをマウスで広げたり、Enterキーで広げないほうがスムーズにできます。

WordPressのビジュアル編集画面は日本語を入力するだけで記事を書く事ができますが、マウスで表の大きさを変更したりEnterキーを使うと、意としないHTMLタグが生成されてしまうからです。

表を作ってプレビューで表示させたとき、思った通りの出来栄えでないときは編集画面で直しますが、何度直しても治らない場合はHTMLタグが生成されてしまっている場合があります。

タグを少しでもわかるとテキスト編集画面で手直しすることもできますが、全くわからない場合は新しい画面を開いて一から表を作ったほうがいいです。

うまくできた場合は、下書きで保存しておいて、コピーして使いまわすと楽ですよ。

 

 

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*