『click me!』やりたいことが何でも出来るWordpressテーマ-SWELL-『click me!』

SWELLの表ブロックの設定法!色んなデザインでオリジナルの表が作れる!

URLをコピーする
URLをコピーしました!

お知らせ

当ブログはAmazon.co.jpその他のプロモーションを宣伝し、リンクすることによって紹介料を獲得できる手段を提供することを目的に設定された、アフィリエイトプログラムを含みます

皆様が購入する商品の価格はなんら変動するものではございませんが、

応援として、本や電子機器などの欲しいものを買う時に当ブログのリンクを経由して購入頂けると非常に励みになります

リンクを経由さえすれば商品内容は問いませんので、気が向いた時には是非よろしくお願い致します。

この記事を読むのにかかる時間: 4
シエル

WordPressでブログを書いてるけど、表を使いたい!

シエルオルタ

けど、SWELLは表だけでも色々な設定があるから、何が出来るか先に知りたいなあ

こんな悩みに応えます。

こんにちは、おもデジ!ライブラリのたこなまです。

こんにちは、おもデジ!ライブラリのたこなまです。

おもデジ!ライブラリの概要
ノエル
ノエル
当ブログナビゲーター

『あの時こうすればよかった』
を無くす20代のための人生再スタートブログ

過去の選択に後悔があるからもう一度チャンスを!
に役立つ内容を記事にしています!

>>分かりやすいトップページで記事を探してみて!

今回は、SWELLで使える表ブロックで出来ることを紹介する記事。

通常のWordPressにも表機能は付いていますが、SWELLでは更にオリジナルの機能や設定が追加されています。

普通に表を使うのではなく、記事を彩るものとして表を使いこなせるようなものになっているので、ぜひ使ってみてくださいね。

デフォルト設定の時とは全く違う使い心地にびっくりするはずですよ。

では行こう!

目次

表ブロックの使い方

まず初めに、表ブロックの使い方から紹介していきます。

今回の記事では、ブロックエディターで表を使う時の方法のみ、お伝えしておきます。

使い方は簡単で、ブロックから『テーブルブロック』を選択してから…

行と列の数を決めて『表を作成』を押すだけ。

これで、表を使うことができます。

そしてなんと!通常ならこれ以上の機能は無いのですが、SWELLではこの表に細かいカスタマイズができます。

以降では、SWELLだけで使える表ブロックの設定やデザインをしっかり見ていきます。

場面に合った表や自分の好みに応じた表を作成して、ブログ記事をもっと華やかにしちゃいましょう!

表ブロックのスタイル一覧

まず、SWELLの表ブロックでは、4種類のスタイルを選ぶことができるようになっています。

表ブロックのスタイル一覧
TABLEBLOCK
CELL – 01ABCDEFG
CELL – 02HIJKLMN
CELL – 03OPQLSTUVWXYZ
デフォルト
TABLEBLOCK
CELL – 01ABCDEFG
CELL – 02HIJKLMN
CELL – 03OPQLSTUVWXYZ
ストライプ
TABLEBLOCK
CELL – 01ABCDEFG
CELL – 02HIJKLMN
CELL – 03OPQLSTUVWXYZ
シンプル
TABLEBLOCK
CELL – 01ABCDEFG
CELL – 02HIJKLMN
CELL – 03OPQLSTUVWXYZ
2重線

SWELLにのみ追加されている、表ブロックの設定項目

さらに、サイドバーには以下のような設定項目が用意されています。

テーブルの設定

「1列目のtdをth風に」

ブロックエディターの標準機能では今のところ、tdタグをthタグに変換することができません。

そこで、SWELLでは見た目だけthタグ風にできる設定が追加されています。

thタグ風にした時との比較

「各列で最低限維持する幅」

表ブロックは、1つの列の内容がとても長い時、その他の列の横幅が極端に狭くなってしまいます。

表のテキストがとても長い時の様子

この現象を防ぐため設定で、どの程度の横幅を最低限維持するか3段階で選べるようになっています。

テーブル設定を行う様子

「スマホでの追加設定」

さらに、スマホサイズで表示される時に表を組み替えて「縦並びに表示する」か「テーブルヘッダーを固定する」、または「表を横スクロールできるようにして表示する」かを選択できます。

表を横スクロール可能にするとき、自動でガイド表示も追加されるよ

テーブルブロックの「スマホで横スクロールを可能にする設定」がオンの時は、「スクロールできます」というガイドテキストが表の右上に表示されます。

こんな感じ!

SWELLの表ブロックで分かりやすい表にしよう!

SWELLで使える表ブロックは、場面に応じて柔軟にデザインを変更できる優れモノです。

表やリストをうまく使うことで、ブログ記事は非常に分かりやすいものに出来ると考えています。

文字ばかりで伝えるよりも、パッと見て分かる方がユーザーにとってはありがたい。

Google先生に評価してもらうためにも、表が使えそうなときはしっかり使ってあげると良いと思います。

公式にはない設定を追加してその他のSWELL機能の使い方も解説してますので、ぜひ。

では今回はここまで。

今後も当ブログでは、20代のための人生再スタートに役立つ情報を発信していきます!

収益化のための情報やスキルや、趣味として楽しむためのネタまで、幅広く発信していくので、良ければ当ブログのトップページから見てみてね!

>>記事を探しやすいトップページで記事を見てみて!

ばいっ

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる