![](https://cxg-design.jp/wp-content/uploads/2024/02/febcalender-1.png)
テーブル作成プラグインFlexible Table Blockで、カレンダーを制作
WordPressのプラグインに「カレンダー」ブロックがあります。しかし、これは投稿した日付にリンクが付くだけで、休業日などを表示することが出来ません。HTMLでカレンダーを作成する場合、テーブルで作成しますが、ブロックエディターのテーブルブロックは、セルごとの色分けができないなど、機能が限定されています。
今回紹介する「Flexible Table Block」は、ブロックエディター上で編集できる、テーブル作成プラグインです。
![](https://cxg-design.jp/wp-content/uploads/2024/02/98c1c8add929086c9d5b39eddcf0c7a2.png)
出典 : Flexible Table Block
セルごとの色分けや、セル結合などあらゆる機能が装備されています。設定項目が多いですが、その分思い通りのテーブルデザインができるのが魅力です。今回は、プラグインでカレンダーを作りながら、使用する設定を紹介していきます。
今回のDEMOは、3種類のカレンダーです。Februaryはシンブルにモノトーンで、Marchはカラフルなカレンダーにしました。
Aprilはイベントを書き込めるカレンダーにしました。PCでは2カラム、SPでは1カラムになるように設定しています。
それぞれ、カバーブロックの中にカレンダーを配置しています。
February
![](https://cxg-design.jp/wp-content/uploads/2024/02/ac6966d3434fc020c9a4074e4740a3fe.png)
プラグインをインストール、有効化したら、編集画面に移動します。ブロックエディターの、テキスト>Flexible Tableをクリックします。カラム数7、行数6に設定して「表を作成」ボタンをクリックします。
1段目は、曜日のアルファベット3文字を、2〜6段目に日付をカレンダーを見ながら入力します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/6510adcf833b570778b56942e1ea947c.png)
Flexible Tableをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/02/062964924eed856fb01aef0d3cdbbee9.png)
カラム数7、行数6にして「表を作成」をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/02/2e89757e54b3726c24592372a7979553.png)
カレンダーを見ながら日付などを入力
まず、セルのスタイルを整えます。siftキーを押しながら、1段目の左上の「Sun」と、6段目の右の空白セルをクリックすると、すべてのセルが選択されます。右サイドバーのブロック>設定>複数セル設定をクリックします。「セルのパディング」を1EM、0、1EM、0に設定します。これで、上下にスペースができ、文字が見やすくなります。また、左右のパディングがなくなることによって、SPで横幅が狭くなっても、アルファベットが1列で見えるようになります。「セルのボーダー幅」を0にして、ボーダーを消します。「セルの配置」を左右中央に設定し、文字を左右中央配置にます。
![](https://cxg-design.jp/wp-content/uploads/2024/02/2f2195583a02fbed730265acf6cf1dca.png)
Siftキーを押しながら、テーブルの左上と右下のセルをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/02/ad8952a42c4fcc4906248e8b96380c51.png)
ブロック>設定>複数セル設定をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/02/1f5173a94f727ef5a289ceb3bc95659b.png)
セルのパディング、セルのボーダー幅、セルの配置を設定
次に文字のスタイルを設定します。テーブルの左上をクリックし、全体を選択します。右サイドバーのブロック>スタイル>タイポグラフィをクリックします。サイズを1.2em、外観をミディアムに設定します。これで、文字スタイルの完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/02/c8e5e01456ef074c7d299ee8b9fbbf28.png)
テーブルの左上をクリックし、全体を選択
![](https://cxg-design.jp/wp-content/uploads/2024/02/5f84ec55050458a3f25309599f43b59a.png)
ブロック>スタイル>タイポグラフィでサイズ1.2em、外観ミディアムに設定
最後に、HOLIDAYを設定します。commandキーを押しながら、HOLIDAYに設定する日のセルを全てクリックします。右サイドバーのブロック>設定>複数セル設定の、「セルの背景色」をグレーにします。
テーブルの下に「段落」ブロックを作成し、キャプションを入れます。ブロック>スタイル>色>テキストでカラーをグレーにします。タイポグラフィで、サイズ1.2em、外観ミディアムに設定し、文字スタイルをカレンダーに合わせて完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/02/922dbbaec751165867bfa6b427731d0a.png)
commandキーを押しながら、HOLIDAYのセルを全てクリック
![](https://cxg-design.jp/wp-content/uploads/2024/02/9e65a158038cca00e7ce5ea25a333bda.png)
ブロック>複数セル設定>セルの背景色をグレーに変更
![](https://cxg-design.jp/wp-content/uploads/2024/02/9601b2f2e076c72dc878e77db737e243.png)
テーブルの下に段落を作成し、ブロック>スタイル>色でテキストをグレーに、タイポグラフィをテーブルと同じ設定に。
キャプションのみ色変更はできない
キャプションのみの色の設定項目はありません。キャプションの文字色のみ変更する場合は、今回のDEMOのように、段落など新しくブロックを作成して入力しましょう。
March
![](https://cxg-design.jp/wp-content/uploads/2024/02/8d89ae9e72085def2ea8a881be07eb0c.png)
これは、Februaryの応用です。まず、同じスタイルのMarchカレンダーを作成します。Februaryのブロック全体を選択し、複製し、Marchに変更します。25のセルを選択し、メニューバー「テーブルを編集」の「行を下に挿入」をクリックします。追加した段の左の「>」をクリックし、1段すべてを選択します。「複数セル設定」で、セルスタイルを他の段に合わせ、カレンダーの日付などを変更します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/2ae3d911599faef5bd57f0095e812ab2.png)
25のセルを選択し、メニューバー「テーブルを編集」の「行を下に挿入」をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/02/5643dafa5f4c92d2d981398752fd8df8.png)
セルスタイルを他の段に合わせる
![](https://cxg-design.jp/wp-content/uploads/2024/02/a8e79392b2f4828126f14ca3bd38fa34.png)
日付などを変更
これを元にカラフルバージョンにします。まず、曜日の「Sun」のセルをクリックし、右サイドバーのブロック>設定>複数セル設定をクリックします。「セルの背景色」をピンクにします。他の曜日のセルも、色が被らないように「セルの背景色」を設定します。
次に、同じ行のセルが同系色になるように、セルを選択し、「セルの背景色」を設定します。ストライプになるように段の濃淡を合わせます。
![](https://cxg-design.jp/wp-content/uploads/2024/02/665f72f3936f3088bea07f553e746aab.png)
曜日に別々の色を設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/9feca295b69f855c24631dbde563fc56.png)
曜日ごとに同系色で交互に背景色を設定。ストライプになるよう濃淡を調整。
最後に仕上げです。カバーブロックの背景をピンクにします。曜日の段を選択して、複数セルの設定>セルのテキスト色を白に変更します。また、HOLIDAYになる日のセルを全て選択し、「セルのテキスト色」を赤に変更し、キャプションの文字も赤に変更します。
これでカラフルバージョンの完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/02/e1678b03cf41e7646009148a67a7a896.png)
背景をピンクにし、曜日の「セルのテキスト色」を白、HOLIDAYの「セルのテキスト色」を赤にして完成。
April
![](https://cxg-design.jp/wp-content/uploads/2024/02/b04ecfaf98d7d0479f55c3130108e9bd.png)
最後のカレンダーは、スケジュールカレンダーです。まず、3カラムを設置し、中央のカラムのみ幅を2emに設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/1310c3485c4e17af6a5025bc02e5f17c.png)
3カラムを作成
![](https://cxg-design.jp/wp-content/uploads/2024/02/573aff7cff6170a6f2066ce5b641dfef.png)
中央のカラムの幅を2emに設定
左のカラムにテーブルを行15カラム2で作成します。一番上の段の左セルに曜日を入力し、改行して日付を入力し、メニューバーから太字にします。同じように下の全てのセルに曜日と日付を入力します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/d2967cb42f764b02834baa90938963b4.png)
左のカラムに、カラム数2、行数15のテーブルを作成
![](https://cxg-design.jp/wp-content/uploads/2024/02/bf4a9928dd3a4f2d222ea916da0cdab7.png)
左のセルに、曜日と日付を入力し、メニューバーから太字に
次にセルのスタイルを設定します。左のセルを全て選択し、「複数セル設定」の「セルの幅」を4em、「セルのパディング」を1EM、0、1EM、0に設定します。
右のセルを全て選択し、複数セル設定>セルのパディングを1EMに設定します。
最後に色を同系色でストライプになるように、「セルの背景色」を設定します。左の行の「セルのテキスト色」を白に変更します。これで、左のカラムの完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/02/8c1b2bca39497159d9f9b7fe3652f3ee.png)
左のセルを全て選択し、ブロック>設定>複数セル設定で、パディングなどを設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/f32ee478ea5d0bad0eb8d87dbd53aae8.png)
右のセルを全て選択し、セルのパディングを1EMに設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/56fcd71445d721f392ea327627a09020.png)
ストライプになるように配色し、左の行の「セルのテキスト色」を白に変更。
左のカラムを右カラムにコピー&ペーストし、16日からの曜日と日付に変更します。このままだと、1カラムにした時に色が15日と16日でかぶるので、ストライプの色を入れ替えます。
スケジュール欄にテキストを入力して、スタイルを確認し、HOLIDAYを設定したら完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/02/ddf661003b1653c8bb0deee70724c9ee.png)
左カラムを右カラムにコピー&ペースト
![](https://cxg-design.jp/wp-content/uploads/2024/02/d55e9f416968b6ad6461aa93e301cfd6.png)
曜日、日付を変更し、ストライプの色を逆にする。
![](https://cxg-design.jp/wp-content/uploads/2024/02/d79578af376c88b5e1210d6982a1e04f.png)
スケジュール欄のスタイルを確認し、HOLIDAYを設定したら完成。
以上で、Flexible Table Blockを使用した、カレンダー制作の説明は終了です。サイドバーや、投稿など色々使えそうですね。パターンに登録しておいて、複製し、文字や色を変更すれば、新しいカレンダーが作れます。
WordPressには、テーブルプラグインが他にも有りますが、ブロックエディター上で編集できるのは珍しく、大変便利です。Flexible Table Blockでは、他にも横スライドや、行固定のテーブルが作成できます。
Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。