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>

 

スポンサードリンク

まとめ

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

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

複業やってみたい仲間募集^^

わたしは外資系企業に勤め、月100時間を超える残業があるなかで、こつこつ複業やマーケティング・エンジニア・デザイナーの知識を学び、その生活から1年経つ頃には複業の収入が外コン収入を上回っていました。

複業のおかげで今の会社にも出会い、自由な生活と楽しい仕事を手に入れることができています!

ということで、もしこのようなライフスタイルに憧れる方がいたら、ぜひ複業家となるまでお手伝いや協業させてください!

まずはかたい雰囲気はナシでざっくばらんにお話できればと思います^^

このブログはWordPressテーマ「Diver」を使用しています

ともよ
ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

Diverを使えば、SEO対策はもちろん、ユーザビリティーを考えられたデザインで、サイト回遊率、直帰率、再訪問がアップします。アフィリエイターだってブロガーだって関係無しで、長い間愛されることの出来るコンテンツをDiverなら作成できます!!

Diverの購入はこちらから

おすすめの記事