三等分に写真を配置 部品

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


ポップアップ機能のついた部品もあります。ポップアップは原寸で表示されますので、ポップアップ機能月の部品を使う時は写真を大きめに作る必要があります。


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

PH-008  (コンテンツ内で三等分に写真を配置)

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

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

os
1
2
2
os
「写真-PH-008」編集解説
配置部品の記述を見ると 
<!-- 右側の写真ここから -->
<img src="image/user-photo/sample-photo01.jpg" width="100%" height="auto" alt="1" />
<!-- 右側の写真ここまで -->

こんな画像タグが見つかると思います。こちらが右側の写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
同じように他の画像も差し替えてみてください。
PH-009  (コンテンツ内で三等分に写真を配置)+ルビ付き

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

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

os
1

ルビを入れる、ルビ

2

ルビを入れる、ルビ

2

ルビを入れる、ルビ

os
「写真-PH-009」編集解説
配置部品の記述を見ると 
<!-- 右側の写真ここから -->
<img src="image/user-photo/sample-photo01.jpg" width="100%" height="auto" alt="1" />
<!-- 右側の写真ここまで -->

こんな画像タグが見つかると思います。こちらが右側の写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
同じように他の画像も差し替えてみてください。ルビはエディター上で打ち直してください
PH-010  (コンテンツ内で三等分に写真を配置)+ POP UP機能

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

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

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

os
1
1
1
1
1
1
os
「写真-PH-010」編集解説
配置部品の記述を見ると 
<!-- 左側の写真ここから -->
<div class="wdd">
<dl>
<dt><img src="image/user-photo/sample-photo01.jpg" alt="1" class="photo100">
</dt>
<dd><img src="image/user-photo/sample-photo01.jpg" class="photo100"></dd>
</dl>
</div>
<!-- 左側の写真ここまで -->

こんな画像タグが見つかると思います。こちらが左側の写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。2箇所あります。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
同じように他の画像も差し替えてみてください。
PH-011  (コンテンツ内で三等分に写真を配置)+ POP UP+タイトル+解説エリア

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

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

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

os
の内容がここに入ります
1
1
あああああああああああああす
classああああああああああああああああああああああああああああああああああああああああああます
の内容がここに入ります
1
1
あああああああああああああす
classああああああああああああああああああああああああああああああああああああああああああます
の内容がここに入ります
1
1
あああああああああああああす
classああああああああああああああああああああああああああああああああああああああああああます
os
「写真-PH-011」編集解説
配置部品の記述を見ると 
<div class="aretsu-title" style="background-color: #03bda9;"> の内容がここに入ります</div>
<!-- 左側の写真ここから -->
<div class="wdd">
<dl>
<dt><img src="image/user-photo/sample-photo01.jpg" alt="1" class="photo100">
</dt>
<dd><img src="image/user-photo/sample-photo01.jpg" class="photo100"></dd>
</dl>
<div class="aretsu--text01"> あああああああああああああああああああす</div>
<div class="aretsu--text02"> classああああああああああああああああああああああああああああああああああああああああああます</div>
<div class="tos">tos</div>
</div>
<!-- 左側の写真ここまで -->

こんな画像タグが見つかると思います。こちらが左側の写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。2箇所あります。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
#03bda9 こちらは上部の帯の色です。好きな色のコードに差し変えてください
同じように他の画像も差し替えてみてください。
文字の打ち直しや文字の色などはワードプレスのエディター上で編集していきます。
os