企業などの沿革用にテーブルブロックをカスタマイズした例

カテゴリー: WordPress、カスタマイズ

WordPress コアのテーブルブロックをカスタマイズして、企業などの沿革のコンテンツで使えるようにしました。

カスタマイズ前のテーブルブロック

2020年	2月1日	○○○○○○○創業（新潟県南魚沼市）
	9月25日	長岡市に営業所を開設
	10月21日	新潟市に営業所を開設
2022年	10月1日	東京都品川区に営業所を開設
2023年	8月20日	法人化　株式会社○○○○○○○を設立
	9月29日	○○○○○、代表取締役就任
2024年	5月5日	△△△△△△△株式会社（現社名）に社名変更。
	11月5日	SDGs推進企業に登録

下記の2つはこのテーブルブロックをカスタマイズした例です。

カスタマイズ例①

2020年	2月1日	○○○○○○○創業（新潟県南魚沼市）
	9月25日	長岡市に営業所を開設
	10月21日	新潟市に営業所を開設
2022年	10月1日	東京都品川区に営業所を開設
2023年	8月20日	法人化　株式会社○○○○○○○を設立
	9月29日	○○○○○、代表取締役就任
2024年	5月5日	△△△△△△△株式会社（現社名）に社名変更。
	11月5日	SDGs推進企業に登録

カスタマイズ例①について

1列目のセルに年が入力されていない場合は上の行と同じ年として扱い、ボーダーを表示しない仕様になっています。
ボーダーの色はテーブルブロックの枠線スタイルで設定したものが反映されるようにしてあります。

カスタマイズ例②

2020年	2月1日	○○○○○○○創業（新潟県南魚沼市）
	9月25日	長岡市に営業所を開設
	10月21日	新潟市に営業所を開設
2022年	10月1日	東京都品川区に営業所を開設
2023年	8月20日	法人化　株式会社○○○○○○○を設立
	9月29日	○○○○○、代表取締役就任
2024年	5月5日	△△△△△△△株式会社（現社名）に社名変更。
	11月5日	SDGs推進企業に登録

カスタマイズ例②について

1列目のセルに年が入力されていない場合は上の行と同じ年として扱い、ボーダーを表示しない仕様になっています。
円形のマークはキーカラーが設定されています。

例①はテーブルブロックの面影が残っていますが、例②はテーブルブロックであることがわからないですね。

ブロックをいろいろ組み合わせれば例②のようなものを作ることができそうですが、ひとつのテーブルブロックだけで作ってあるところが今回のカスタマイズのポイントです。

お客様側でかんたんに更新できます

例②のようなコンテンツを制作する場合、HTML でコーディングしたり、いくつものブロックを複雑に組み合わせたりすることが多いと思います。

このカスタマイズではひとつのテーブルブロックだけで作ってありますので、ブロックエディターでかんたんに更新することが可能です。例えば、沿革を増やしたいときにはテーブルの行を追加するだけでできます。

また、ブロックエディターで編集しているときに、完成イメージに近い状態で表示されるようにしてありますので（下図参照）、お客様は安心して更新作業を行っていただくことができます。

【その他の使用例①】旅程表

沿革以外に以下のような旅程表を作るときにも役立ちます。

6日(土)	06:30	六日町IC集合・観光バス出発（関越道〜上信越道〜名神経由）
	09:30	途中SAで休憩（2回ほど）
	12:30	名神高速・桂川PA付近到着・昼食（お弁当 or PA食堂）
	13:30	京都市内・嵐山エリアへ
	14:00	【観光①】嵐山観光（渡月橋、竹林の小径、天龍寺）
	16:30	ホテルチェックイン（京都市内・四条または京都駅周辺）
	18:00	【夕食】ホテル内レストランまたは周辺で京料理
	19:30	自由時間・ホテルにて休憩
7日(日)	07:30	朝食（ホテル）
	08:30	【観光②】清水寺〜三年坂・八坂神社
	10:30	【観光③】銀閣寺・哲学の道
	12:00	昼食（市内レストラン・湯豆腐など）
	13:30	【観光④】金閣寺（バス移動）
	15:00	【観光⑤】北野天満宮または龍安寺（選択可）
	17:00	ホテル帰着・休憩
	18:00	【夕食】先斗町や鴨川沿いで自由食またはツアー夕食（京懐石）
	20:00	ホテル泊・自由時間
8日(月)	07:00	朝食・チェックアウト
	08:00	【観光⑥】伏見稲荷大社（千本鳥居を散策）
	09:30	バス乗車・帰路へ（名神高速→関越道）
	12:30	途中SAで昼食（自由食）
	15:30	休憩（赤城SAなど）
	18:30	六日町IC到着・解散

【その他の使用例②】一日の流れ

介護施設の入居者の一日の流れにも使えます。

一日の流れ	6:30	起床・身支度の介助・整容
	7:30	朝食（配膳・食事介助）
	8:30	服薬・バイタルチェック
	9:00	自由時間・居室整備・入浴
	10:00	レクリエーション・機能訓練
	11:30	昼食準備・口腔体操
	12:00	昼食（配膳・食事介助）
	13:00	服薬・口腔ケア・休憩／昼寝
	14:30	カフェタイム（お茶・おやつ）
	15:00	レクリエーション・散歩・趣味活動
	16:30	入浴（午後の部）
	17:30	夕食（配膳・食事介助）
	18:30	服薬・口腔ケア
	19:00	自由時間・テレビ・読書など
	20:00	就寝準備（整容・トイレ介助）
	21:00	消灯・就寝

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら