カラムをデザインする

カラムを使用すると、コンテンツを整理されたレイアウトで配置でき、見やすくナビゲーションしやすいサイトになります。このガイドでは、色、配置、モバイルでの外観など、カラムのデザインをカスタマイズする方法について説明します。

このガイド内

質問がある場合

カラムの色を変更する

カラムの背景色を追加または変更するには、次の手順で行います。

カラムごとに異なる色を選択する場合は、同じ手順に沿って行いますが、「リスト表示」では「カラムブロック」全体ではなく、個々の「カラムブロック」を選択します。

新しいカラムにコンテンツを追加すると、デフォルトではカラムのコンテナの一番上に沿って配置されます。カラム内のコンテンツの位置を変更するには、次の手順で行います。

「上揃え」、「中央揃え」、「下揃え」から選択し、カラム内のすべてのコンテンツがカラムのコンテナの上部、中央、下部に配置されるようにします。

カラムごとに異なる配置を選択する場合は、同じ手順に沿って行いますが、「リスト表示」では「カラム」全体ではなく、個々の「カラム」を選択します。こうすることで、次のようなばらばらのレイアウトになります。

カラムレイアウトを使用する場合、モバイルデバイスからのサイト訪問者にはどのようにカラムを表示するかを検討する必要があります。スマートフォンは画面が小さいため、複数のカラムをすべて1行に収めると、コンテンツの読みやすさに影響を及ぼす場合があります。

モバイル画面ではカラムを「縦積み」するオプションを使用すると、1行にすべてのカラムを表示するのではなく、カラムを上下に並べて表示できます。

この切り替えに基づき、ページまたは投稿がモバイルデバイスに表示されたときに、カラムを水平で表示するか、縦積みで表示するかが決まります。デスクトップまたはノートパソコンの画面で表示した場合とモバイル画面で表示した場合の縦積みカラムの例は次のとおりです。