WordPressの投稿で画像の横に文字入れし、カラム分け方法

画像挿入をしたあと、その横に画像と同じ縦幅で文字入れをしようとすると
うまくいかなかった経験ありませんか??

 

こんな感じで↓↓

 

どう頑張っても伝わらない自分の意志。

うまくいかない親子関係。

そんな親子間のズレを
認知神経科学の観点から考察し、
関係値を最大化するプロジェクトです。

 

でも、できればこんな感じでバランスよくいれたいですよね...

 

どう頑張っても伝わらない自分の意志。
うまくいかない親子関係。そんな親子間のズレを
認知神経科学の観点から考察し、
関係値を最大化するプロジェクトです。

 

 

今回はそれを実現する方法をお伝えします!

 

スポンサードリンク

 

具体的な変更方法

まずビジュアルエディタから、テキストエディタに変更します。

 

このあとで、それぞれ作りたいカラムの形に応じて

コードと文字の埋め込み方を書いていくので、

ぜひ試してみてください!

 

2カラム

2カラム

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

1つ目のカラムです。 2つ目のカラムです。
サンプルコード
1
2
3
4
5
6
7
8
<div class="col2-wrap">
<div class="col">
1つ目のカラムです。
</div>
<div class="col">
2つ目のカラムです。
</div>
</div>

3カラム

3カラム(通常)

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

1つ目のカラムです。 2つ目のカラムです。 3つ目のカラムです。
サンプルコード
01
02
03
04
05
06
07
08
09
10
11
<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つ目のカラムです。
サンプルコード
1
2
3
4
5
6
7
8
<div class="col3-wrap">
<div class="col col_2of3">
1つ目のカラムです。(合体)
</div>
<div class="col">
2つ目のカラムです。
</div>
</div>

 

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

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

1つ目のカラムです。 2つ目のカラムです。(合体)
サンプルコード
1
2
3
4
5
6
7
8
<div class="col3-wrap">
<div class="col">
1つ目のカラムです。
</div>
<div class="col col_2of3">
2つ目のカラムです。(合体)
</div>
</div>

 

スポンサードリンク

4カラム

4カラム(通常)

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

1つ目のカラムです。 2つ目のカラムです。 3つ目のカラムです。 4つ目のカラムです。
サンプルコード
01
02
03
04
05
06
07
08
09
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分割で表示し、2/4を合体した状態です。

1つ目のカラムです。(合体) 2つ目のカラムです。 3つ目のカラムです。
サンプルコード
01
02
03
04
05
06
07
08
09
10
11
<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つ目のカラムです。
サンプルコード
1
2
3
4
5
6
7
8
<div class="col4-wrap">
<div class="col col_3of4">
1つ目のカラムです。(合体)
</div>
<div class="col">
2つ目のカラムです。
</div>
</div>

 

スポンサードリンク

まとめ

いかがだったでしょうか。

お役に立てればシェアお願いします!

おすすめの記事