LingHang テーマのカードコンテンツブロックは、デフォルトでページ上に3列で表示されます。これは、ほとんどの企業が製品、サービス、事例を表示するのに十分です。しかし、トップページや内部ページでより多くの情報(例:4つのコアビジネス、4つの製品シリーズ、4つの強み)を同時に表示したい場合、カードの列数を4列に変更すると、ページレイアウトがよりコンパクトになり、情報密度が高まります。
LingHang テーマは Gutenberg ブロックベースの柔軟なアーキテクチャを採用しているため、コードを一行も書かずにこの調整が可能です。以下、3つのステップで説明します。
操作手順
- 新しいページを作成し、カードコンテンツブロックのテンプレートを追加
管理画面で新しいページを作成し、„ブロックテンプレートを追加“をクリックします。LingHang テーマが提供するエンタープライズ向けテンプレートライブラリから„カードコンテンツ“(Content Card)を選択し、ページに挿入します。挿入後、„テンプレートを編集“を選択して詳細編集画面に入ります。 - カードを複製して4つ目のカードを生成
エディターで、3つのカードを含む„グループ“(Group)ブロックを見つけます。そのグループの右上にある三点リーダー(その他のオプション)をクリックし、„複製を作成“を選択します。これで、同じく3つのカードを含む新しいグループが作成されます。これで合計6つのカードになりますが、必要なのは1行に4つのカードなので、次のステップが重要です。 - CSS クラスを変更して列数を3から4に変更
一つ上のグループ(すべてのカードを含む大コンテナ)をクリックし、右側のブロックパネルで„詳細“タブの„CSS クラス“入力フィールドを見つけます。ここにcolumns-4(デフォルトがcolumns-3の場合は、そのまま置き換えます)と入力します。保存して編集を終了し、ページをプレビューすると、カードが自動的に4列に並んでいることが確認できます。
図解例



また、LingHang テーマは40以上のエンタープライズ向けブロックテンプレートを提供しています。詳細はテーマオプションとデモページをご覧ください。
なぜ4列カードを選ぶのか?
- 情報がより豊富:ファーストビューで4つのコアセールスポイントを表示でき、ユーザーが一目で理解できます。
- 対称性が美しい:ワイドスクリーンで4列が均等なグリッドを形成し、視覚的なバランスが取れています。
- 多様なコンテンツに対応:製品シリーズ、サービス項目、事例紹介、チーム紹介などのシーンに適しています。
LingHang テーマのカードブロックはレスポンシブデザインを内蔵しており、4列に変更後も、スマートフォンやタブレットでは自動的に2列または1列に調整されます。追加設定は不要です。これこそが軽量WordPress企業テーマの柔軟性です——Gutenberg ブロックを使ってビジネスニーズに合ったページを迅速に構築できます。
製造業や貿易会社の公式サイトを構築し、専門的で多言語対応の企業サイトを迅速に作成したい場合は、ぜひ LingHang テーマをお試しください。カードブロックの他にも、ブログ、製品、事例などのテンプレート、および内蔵の SEO 最適化と速度最適化機能を利用できます。
まとめ:カードグループをコピーしてCSSクラスを変更することで、LingHangテーマで4列のカードレイアウトを簡単に実現できます。この簡単なチュートリアルが、より効率的な工業製造業の企業ウェブサイトを作成するのに役立つことを願っています。
LingHangテーマのサイト構築テクニックをもっと知りたいですか?ぜひご覧くださいブログ記事。企業サイト構築の実践的な内容を随時更新しています。
