レイアウト

賢威7のWordPress版に用意されているCSSのスタイルを適用して記事のカラムを分割表示する方法を説明します。賢威7の標準機能の説明です。

下記は実際に記事のカラムを分割して表示しています。

カラムの分割表示を利用する際は、下記のサンプルコードをコピー&ペーストして利用してください。サンプルコードを用意していますので参考にしてください。

はじめに

カラムとは?

カラム(Column)とは、ページレイアウトにおいては、縦の列のことです。ページのレイアウトが縦方向に何個に分割表示されているかを表します。

例えば、2カラムの場合、ページのレイアウトが縦方向に2分割されている状態を表します。1カラムは分割なしの状態になります。

カラムを分割表示できる場所
  • 投稿の記事
  • 固定ページの記事
  • ランディングページの記事
  • トップページのメインビジュアル
  • サイドバーのウィジェット
  • フッター
サンプルの背景色

下記のサンプルにはカラムが視覚的にわかりやすくなるよう背景色を付けていますが、実際には背景色は表示されません。

2カラム

2カラム

記事のレイアウトを2分割で表示できます。

1つ目のカラムです。
2つ目のカラムです。
<div class="col2-wrap">
<div class="col">
1つ目のカラムです。
</div>
<div class="col">
2つ目のカラムです。
</div>
</div>

3カラム

3カラム(通常)

記事のレイアウトを3分割で表示できます。

1つ目のカラムです。
2つ目のカラムです。
3つ目のカラムです。
<div class="col3-wrap">
<div class="col">
1つ目のカラムです。
</div>
<div class="col">
2つ目のカラムです。
</div>
<div class="col">
3つ目のカラムです。
</div>
</div>

2カラム(2/3合体A)

記事のレイアウトを3分割で表示し、2/3を合体した状態です。

1つ目のカラムです。(合体)
2つ目のカラムです。
<div class="col3-wrap">
<div class="col col_2of3">
1つ目のカラムです。(合体)
</div>
<div class="col">
2つ目のカラムです。
</div>
</div>

2カラム(2/3合体B)

コードの記述順番を入れ替えれば、表示順番を入れ替えることもできます。

1つ目のカラムです。
2つ目のカラムです。(合体)
<div class="col3-wrap">
<div class="col">
1つ目のカラムです。
</div>
<div class="col col_2of3">
2つ目のカラムです。(合体)
</div>
</div>

4カラム

4カラム(通常)

記事のレイアウトを4分割で表示できます。

1つ目のカラムです。
2つ目のカラムです。
3つ目のカラムです。
4つ目のカラムです。
<div class="col4-wrap">
<div class="col">
1つ目のカラムです。
</div>
<div class="col">
2つ目のカラムです。
</div>
<div class="col">
3つ目のカラムです。
</div>
<div class="col">
4つ目のカラムです。
</div>
</div>

4カラム(2/4合体)

記事のレイアウトを4分割で表示し、2/4を合体した状態です。

1つ目のカラムです。(合体)
2つ目のカラムです。
3つ目のカラムです。
<div class="col4-wrap">
<div class="col col_2of4">
1つ目のカラムです。(合体)
</div>
<div class="col">
2つ目のカラムです。
</div>
<div class="col">
3つ目のカラムです。
</div>
</div>

4カラム(3/4合体)

記事のレイアウトを4分割で表示し、3/4を合体した状態です。

1つ目のカラムです。(合体)
2つ目のカラムです。
<div class="col4-wrap">
<div class="col col_3of4">
1つ目のカラムです。(合体)
</div>
<div class="col">
2つ目のカラムです。
</div>
</div>

以上

カスタマイズ方法を探す

スポンサーリンク

賢威7

ネタワンは「賢威7」を利用して運営しています。オススメのWPテーマです。

賢威7 詳細&レビュー

スポンサーリンク