写真の均等配置+トランスフォーム文字列 部品

まずは、配置する画像を作ります。
写真は自動で均等割されるのでだいたいの大きさで大丈夫ですが、左右の写真の高さを合わせるなら、同じ大きさで作る必要があります。


作られた画像は、 「 user-photo 」フォルダーの中に作ったフォルダーにアップしてください。
場所は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、
「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中に作った登録フォルダー内にアップしてください。ワードプレスは階層が深いので注意してアップしてください。

PH-020  (均等二分割写真+オンマウスでトランスフォーム文字)

コンテンツ内で、写真を二等分して配置する部品です。

写真は自動調整で横幅が決まりますので、左右の高さを揃えたい場合は入れる写真の大きさを合わせてください。

os
1

キャプタイトル

あああああああああああああああああああああああああああああああああああああああああああああ

1

キャプタイトル

あああああああああああああああああああああああああああああああああああああああああああああ

「写真-PH-020」編集解説
配置部品の記述を見ると 
<!-- 左側の写真ここから -->
<div class="abm-box">
<img src="image/user-photo/sample-photo04.jpg" width="100%" height="auto" alt="1">
<div class="abm-text">
<h3 style="top: 24%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</div>
<!-- 左側の写真ここまで -->

こんな画像タグが見つかると思います。こちらが左側の写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
<h3 style="top: 24%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
この部分がタイトルとその下の文字列です。ビジュアルエディターでは文字は見えないので、コード上で文字を打ち直してみてください 。
ピンクのパーセントの部分は、その文字の上からの配置距離です。文字数によってはここを変えて位置を調整していきます。数が増えるほど文字は下に移動します。減らすと上に移動です。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
この部分がホバーで現れる半透明の背景色です。部品配置後は濃いめのグレーになぅていますがここも色と濃度を調整できます。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
まずカンマで区切られた4つの数字のひだり3つが色です。今は ,0,0,0, なので黒です。ここはRGB似寄る色の数値を入れていきます。R=0 G=0 B=0  で黒というわけです。白なら 255 255 255 です。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
最後のブロックが濃度です。 ここは 0〜1 が入ります。0だと透明で 1だと透けないその色になります。なので 0.5だと50パーセントの色の半透明と成ります。0.3 屋0.7 など好きな濃度を入れてください。
同じように他の画像も編集してみてください。
PH-021  (均等三分割写真+オンマウスでトランスフォーム文字)

コンテンツ内で、写真を三等分して配置する部品です。ルビが付いています。

写真は自動調整で横幅が決まりますので、左右の高さを揃えたい場合は入れる写真の大きさを合わせてください。

os
1

キャプタイトル

あああああああああああああああああああああああああああああああああああああああああああああ

1

キャプタイトル

あああああああああああああああああああああああああああああああああああああああああああああ

1

キャプタイトル

あああああああああああああああああああああああああああああああああああああああああああああ

「写真-PH-021」編集解説
配置部品の記述を見ると 
<!-- 左側の写真ここから -->
<div class="abm-box">
<img src="image/user-photo/sample-photo04.jpg" width="100%" height="auto" alt="1">
<div class="abm-text">
<h3 style="top: 24%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</div>
<!-- 左側の写真ここまで -->

こんな画像タグが見つかると思います。こちらが左側の写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
<h3 style="top: 24%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
この部分がタイトルとその下の文字列です。ビジュアルエディターでは文字は見えないので、コード上で文字を打ち直してみてください 。
ピンクのパーセントの部分は、その文字の上からの配置距離です。文字数によってはここを変えて位置を調整していきます。数が増えるほど文字は下に移動します。減らすと上に移動です。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
この部分がホバーで現れる半透明の背景色です。部品配置後は濃いめのグレーになぅていますがここも色と濃度を調整できます。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
まずカンマで区切られた4つの数字のひだり3つが色です。今は ,0,0,0, なので黒です。ここはRGB似寄る色の数値を入れていきます。R=0 G=0 B=0  で黒というわけです。白なら 255 255 255 です。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
最後のブロックが濃度です。 ここは 0〜1 が入ります。0だと透明で 1だと透けないその色になります。なので 0.5だと50パーセントの色の半透明と成ります。0.3 屋0.7 など好きな濃度を入れてください。
同じように他の画像も編集してみてください。
PH-022  (均等四分割写真+オンマウスでトランスフォーム文字)

コンテンツ内で、写真を四等分して配置する部品です。写真クリックでポップアップします。

ポップアップは原寸で表示されますので、写真を大きめに作ってください。

写真は自動調整で横幅が決まりますので、左右の高さを揃えたい場合は入れる写真の大きさを合わせてください。

os
1

キャプタイトル

あああああああああああああああああああああああああああああああ

1

キャプタイトル

ああああああああああああああああああああああああああああ

1

キャプタイトル

あああああああああああああああああああああああああああああああ

1

キャプタイトル

あああああああああああああああああああああああああああああ

「写真-PH-022」編集解説
配置部品の記述を見ると 
<!-- 左側の写真ここから -->
<div class="abm-box">
<img src="image/user-photo/sample-photo04.jpg" width="100%" height="auto" alt="1">
<div class="abm-text">
<h3 style="top: 24%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</div>
<!-- 左側の写真ここまで -->

こんな画像タグが見つかると思います。こちらが左側の写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
<h3 style="top: 24%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
この部分がタイトルとその下の文字列です。ビジュアルエディターでは文字は見えないので、コード上で文字を打ち直してみてください 。
ピンクのパーセントの部分は、その文字の上からの配置距離です。文字数によってはここを変えて位置を調整していきます。数が増えるほど文字は下に移動します。減らすと上に移動です。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
この部分がホバーで現れる半透明の背景色です。部品配置後は濃いめのグレーになぅていますがここも色と濃度を調整できます。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
まずカンマで区切られた4つの数字のひだり3つが色です。今は ,0,0,0, なので黒です。ここはRGB似寄る色の数値を入れていきます。R=0 G=0 B=0  で黒というわけです。白なら 255 255 255 です。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
最後のブロックが濃度です。 ここは 0〜1 が入ります。0だと透明で 1だと透けないその色になります。なので 0.5だと50パーセントの色の半透明と成ります。0.3 屋0.7 など好きな濃度を入れてください。
同じように他の画像も編集してみてください。
PH-023  (均等五分割写真+オンマウスでトランスフォーム文字)

コンテンツ内で、写真を五等分して配置する部品です。写真クリックでポップアップ+タイトル帯と解説エリアもついた部品です。

ポップアップは原寸で表示されますので、写真を大きめに作ってください。

写真は自動調整で横幅が決まりますので、左右の高さを揃えたい場合は入れる写真の大きさを合わせてください。

os
1

キャプタイトル

あああああああああああああああああああああ

1

キャプタイトル

あああああああああああああああああああああ

1

キャプタイトル

あああああああああああああああああああああ

1

キャプタイトル

あああああああああああああああああああああ

1

キャプタイトル

あああああああああああああああああああああ

「写真-PH-023」編集解説
配置部品の記述を見ると 
<!-- 左側の写真ここから -->
<div class="abm-box">
<img src="image/user-photo/sample-photo04.jpg" width="100%" height="auto" alt="1">
<div class="abm-text">
<h3 style="top: 24%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</div>
<!-- 左側の写真ここまで -->

こんな画像タグが見つかると思います。こちらが左側の写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
<h3 style="top: 24%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
この部分がタイトルとその下の文字列です。ビジュアルエディターでは文字は見えないので、コード上で文字を打ち直してみてください 。
ピンクのパーセントの部分は、その文字の上からの配置距離です。文字数によってはここを変えて位置を調整していきます。数が増えるほど文字は下に移動します。減らすと上に移動です。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
この部分がホバーで現れる半透明の背景色です。部品配置後は濃いめのグレーになぅていますがここも色と濃度を調整できます。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
まずカンマで区切られた4つの数字のひだり3つが色です。今は ,0,0,0, なので黒です。ここはRGB似寄る色の数値を入れていきます。R=0 G=0 B=0  で黒というわけです。白なら 255 255 255 です。
<div class="abm-text" style="background: rgba(,0,0,0,0.7);">
最後のブロックが濃度です。 ここは 0〜1 が入ります。0だと透明で 1だと透けないその色になります。なので 0.5だと50パーセントの色の半透明と成ります。0.3 屋0.7 など好きな濃度を入れてください。
同じように他の画像も編集してみてください。
os