賢威テンプレートなら、多段カラムを簡単につくることができます。リストなどを表示させるには、カラムがある方が分かりやすいです。
このブログのサイトマップはプラグインを使っていますが、記事の数が増えてくると読みたい記事を探すのに時間がかかります。
なので、パソコンの表示画面の場合は、横にもリストを作成すると良いのではないかと思います。このほうが、より分かりやすくなるはずです。
そこで、4カラム、3カラム、2カラムの作り方と使い方を紹介します。
このページの目次
4カラムを作る
まずは4カラムでテキストだけのプログラムから見ていこう！
4カラムでテキストを表示させる
テキストのみで4カラムにするとこちらのようになります。ここはわかりやすいように文字に色を付けています。（ただし、スマホの場合は縦にしか表示されません。）
テキスト1が入ります。
テキスト2が入ります。
テキスト3が入ります。
テキスト4が入ります。
下のコードをコピペで貼り付けて下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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つに分割したカラムの半分だけを統合することが出来ます。
テキスト1とテキスト2を合わせた幅のテキストを入力することが出来ます。
テキスト3が入ります。
テキスト4が入ります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="col4-wrap"> <div class="col col_2of4"> テキスト1とテキスト2を合わせた幅のテキストを入力することが出来ます。 </div> <div class="col"> テキスト3が入ります。 </div> <div class="col"> テキスト4が入ります。 </div> </div> |
4カラムの3/4をつなげる場合
テキスト1、テキスト2、テキスト3を合わせた幅のコンテンツを入力できます。
テキスト4が入ります。
|
1 2 3 4 5 6 7 8 |
<div class="col4-wrap"> <div class="col col_3of4"> <span class="red b">テキスト1、テキスト2、テキスト3を合わせた幅のコンテンツを入力できます。</span> </div> <div class="col"> <span class="blue b">テキスト4が入ります。</span> </div> </div> |
3カラムをつくる
次は3カラムだよ！
テキスト1を入力
テキスト2を入力
テキスト3が入力
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="col3-wrap"> <div class="col"> <span class="red b">テキスト1を入力</span> </div> <div class="col"> <span class="orange b">テキスト2を入力</span> </div> <div class="col"> <span class="green b">テキスト3が入力</span> </div> </div> |
3カラムの2/3をつなげる場合
ここにテキスト1とテキスト2が入ります。
テキスト3が入ります。
|
1 2 3 4 5 6 7 8 |
<div class="col3-wrap"> <div class="col col_2of3"> ここにテキスト1とテキスト2が入ります。 </div> <div class="col"> テキスト3が入ります。 </div> </div> |
2カラムをつくる
テキストの1が入ります。
テキストの2が入ります。
|
1 2 3 4 5 6 7 8 |
<div class="col2-wrap"> <div class="col"> <span class="red b">テキストの1が入ります。</span> </div> <div class="col"> <span class="orange b">テキストの2が入ります。</span> </div> </div> |
カラムに見出しと記事のリンクを設置する場合
カラムに見出しを付けて記事のリンクを作成することも出来ます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="col4-wrap"> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> </div> |
下のようにすれば、サイトマップとしても利用できるかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<div class="col4-wrap"> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> </div> <div class="col4-wrap"> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> </div> |
4カラムの2/4をつなげて見出しと記事のリンクを作成する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="col4-wrap"> <div class="col col_2of4"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> <div class="col p40-r"> <h3>見出し</h3> <ul> <li><a href="記事のリンク">記事1</a></li> <li><a href="記事のリンク">記事2</a></li> </ul> </div> </div> |
記事の中にカラムを入れるなら、表示画面の確認をしてね！
特にパソコンとスマホでは、表示が違うから注意が必要になるよ。