テーブル作成プラグインFlexible Table Blockで、カレンダーを制作

WordPressのプラグインに「カレンダー」ブロックがあります。しかし、これは投稿した日付にリンクが付くだけで、休業日などを表示することが出来ません。HTMLでカレンダーを作成する場合、テーブルで作成しますが、ブロックエディターのテーブルブロックは、セルごとの色分けができないなど、機能が限定されています。

今回紹介する「Flexible Table Block」は、ブロックエディター上で編集できる、テーブル作成プラグインです。

セルごとの色分けや、セル結合などあらゆる機能が装備されています。設定項目が多いですが、その分思い通りのテーブルデザインができるのが魅力です。今回は、プラグインでカレンダーを作りながら、使用する設定を紹介していきます。

今回のDEMOは、3種類のカレンダーです。Februaryはシンブルにモノトーンで、Marchはカラフルなカレンダーにしました。

Aprilはイベントを書き込めるカレンダーにしました。PCでは2カラム、SPでは1カラムになるように設定しています。

それぞれ、カバーブロックの中にカレンダーを配置しています。

February

プラグインをインストール、有効化したら、編集画面に移動します。ブロックエディターの、テキスト＞Flexible Tableをクリックします。カラム数7、行数6に設定して「表を作成」ボタンをクリックします。

１段目は、曜日のアルファベット3文字を、2〜6段目に日付をカレンダーを見ながら入力します。

まず、セルのスタイルを整えます。siftキーを押しながら、1段目の左上の「Sun」と、6段目の右の空白セルをクリックすると、すべてのセルが選択されます。右サイドバーのブロック＞設定＞複数セル設定をクリックします。「セルのパディング」を1EM、0、1EM、0に設定します。これで、上下にスペースができ、文字が見やすくなります。また、左右のパディングがなくなることによって、SPで横幅が狭くなっても、アルファベットが1列で見えるようになります。「セルのボーダー幅」を0にして、ボーダーを消します。「セルの配置」を左右中央に設定し、文字を左右中央配置にます。

次に文字のスタイルを設定します。テーブルの左上をクリックし、全体を選択します。右サイドバーのブロック＞スタイル＞タイポグラフィをクリックします。サイズを1.2em、外観をミディアムに設定します。これで、文字スタイルの完成です。

最後に、HOLIDAYを設定します。commandキーを押しながら、HOLIDAYに設定する日のセルを全てクリックします。右サイドバーのブロック＞設定＞複数セル設定の、「セルの背景色」をグレーにします。

テーブルの下に「段落」ブロックを作成し、キャプションを入れます。ブロック＞スタイル＞色＞テキストでカラーをグレーにします。タイポグラフィで、サイズ1.2em、外観ミディアムに設定し、文字スタイルをカレンダーに合わせて完成です。

March

これは、Februaryの応用です。まず、同じスタイルのMarchカレンダーを作成します。Februaryのブロック全体を選択し、複製し、Marchに変更します。25のセルを選択し、メニューバー「テーブルを編集」の「行を下に挿入」をクリックします。追加した段の左の「＞」をクリックし、1段すべてを選択します。「複数セル設定」で、セルスタイルを他の段に合わせ、カレンダーの日付などを変更します。

これを元にカラフルバージョンにします。まず、曜日の「Sun」のセルをクリックし、右サイドバーのブロック＞設定＞複数セル設定をクリックします。「セルの背景色」をピンクにします。他の曜日のセルも、色が被らないように「セルの背景色」を設定します。

次に、同じ行のセルが同系色になるように、セルを選択し、「セルの背景色」を設定します。ストライプになるように段の濃淡を合わせます。

最後に仕上げです。カバーブロックの背景をピンクにします。曜日の段を選択して、複数セルの設定＞セルのテキスト色を白に変更します。また、HOLIDAYになる日のセルを全て選択し、「セルのテキスト色」を赤に変更し、キャプションの文字も赤に変更します。

これでカラフルバージョンの完成です。

April

最後のカレンダーは、スケジュールカレンダーです。まず、3カラムを設置し、中央のカラムのみ幅を2emに設定します。

左のカラムにテーブルを行15カラム2で作成します。一番上の段の左セルに曜日を入力し、改行して日付を入力し、メニューバーから太字にします。同じように下の全てのセルに曜日と日付を入力します。

次にセルのスタイルを設定します。左のセルを全て選択し、「複数セル設定」の「セルの幅」を4em、「セルのパディング」を1EM、0、1EM、0に設定します。

右のセルを全て選択し、複数セル設定＞セルのパディングを1EMに設定します。

最後に色を同系色でストライプになるように、「セルの背景色」を設定します。左の行の「セルのテキスト色」を白に変更します。これで、左のカラムの完成です。

左のカラムを右カラムにコピー＆ペーストし、16日からの曜日と日付に変更します。このままだと、1カラムにした時に色が15日と16日でかぶるので、ストライプの色を入れ替えます。

スケジュール欄にテキストを入力して、スタイルを確認し、HOLIDAYを設定したら完成です。

以上で、Flexible Table Blockを使用した、カレンダー制作の説明は終了です。サイドバーや、投稿など色々使えそうですね。パターンに登録しておいて、複製し、文字や色を変更すれば、新しいカレンダーが作れます。

WordPressには、テーブルプラグインが他にも有りますが、ブロックエディター上で編集できるのは珍しく、大変便利です。Flexible Table Blockでは、他にも横スライドや、行固定のテーブルが作成できます。

Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。