写真のデザイン配置 部品

いろいろな写真デザインでの配置部品を並べてみました。

写真のロールオーバー効果

これは配置部品ではないけれど、ページ全体の中の写真に関してのロールオーバー効果のつけ方です。
注意点としては、すでに写真に効果が発動する部品の写真には適用しないこと!ただの静止写真なら部品内の写真にも効果を付け加えても大丈夫です。
ロールオーバーとは2枚の写真を用意してオンマウス時に写真を切り替えて表示することを言います。

os
1
「ロールオーバー効果」編集解説
基本的には画像を2枚作るだけです。 マウスが乗らない時の写真と乗っている時の写真です。
2枚の写真は大きさは必ず同じにしてください。

ロールオーバー効果は、写真の名前のつけ方で発動します。 例えば aabbcc という名前の写真を作るとします。
マウスが乗っていない時に表示させる写真の方を aabbcc_off という名前にします。
マウスが乗ると表示される方の写真を aabbcc_on として保存します。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
同じ名前で 違いは _off と_on という2枚の写真をアップしたら
後は写真配置部品を使い _off の方の写真を配置します。
写真の組み込まれた部品を配置したなら、同じようにその部品の写真に_offの方をセットすれば後は勝手にロールオーバーがかかります。
すでに写真に効果が発動する部品に関しては、ロールオーバーを足すと崩れることもあるので、無効果の静止写真にだけつけてください。
DZ-01  商品イメージ画像が作れないという場合だけですが(色変え自由)

この写真具品は、色を入れるとその色のDVD商品イメージになります。文字等はワードプレスで大きさや色を編集していきます。右側のブロックは自由に部品を組み合わせて作っていってください。当然ご自身で商品イメージを作れる場合は使用しないほうがよいです。あくまでも緊急対策的な部品です。白で抑えてあるのでコンテンツの地色は白が望ましいです。

os
1
タイトルダミーのたいとる
タイトルダミーのたいとる
あああああああああああああああああああああ
商品のイメージ画像

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

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

os
「DZ-01」編集解説
<div class="sp-dvd" style="background-color: #a11762;">
 こんな記述が配置後の部品内に見つかると思います。
#a11762 がDVDの家おになります。好きな色のコードに書き換えてみてください。
写真は自動でこの幅に拡大縮小配置されますので、横幅をだいたいで合わせて作れば大丈夫です。高さは自由なので縦長の写真でも大丈夫です。

DVDないの各文字は和^ドプレスのエディターで 文字の打ち替え、色の編集。大きさの編集を行います。
文字数や大きさによっては位置が合わないかと思います。各文字ブロックの先頭にstyle="left: 30px; top: 26px;という記述がそれぞれあります。
この場合だと左から30ピクセル 上から26ピクセルの位置から文字がスタートという指示になっています。 文字を打ち替えて編集したら 、ここの数値を変えて文字の位置を調整していきます。
DZ-02  商品イメージ画像が作れないという場合だけですが(色変え自由)

この写真具品は、色を入れるとその色のCD商品イメージになります。文字等はワードプレスで大きさや色を編集していきます。右側のブロックは自由に部品を組み合わせて作っていってください。当然ご自身で商品イメージを作れる場合は使用しないほうがよいです。あくまでも緊急対策的な部品です。白で抑えてあるのでコンテンツの地色は白が望ましいです。

os
os
1
タイトルダミーのたいとる
タイトルダミーのたいとる
あああああああああああああああああああああ
商品のイメージ画像

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

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

os
「DZ-02」編集解説
<div class="sp-dvd" style="background-color: #03bda9;">
 こんな記述が配置後の部品内に見つかると思います。
#03bda9 がDVDの家おになります。好きな色のコードに書き換えてみてください。
写真は自動でこの幅に拡大縮小配置されますので、横幅をだいたいで合わせて作れば大丈夫です。高さは自由なので縦長の写真でも大丈夫です。

CDないの各文字は和^ドプレスのエディターで 文字の打ち替え、色の編集。大きさの編集を行います。
文字数や大きさによっては位置が合わないかと思います。各文字ブロックの先頭にstyle="left: 30px; top: 26px;という記述がそれぞれあります。
この場合だと左から30ピクセル 上から26ピクセルの位置から文字がスタートという指示になっています。 文字を打ち替えて編集したら 、ここの数値を変えて文字の位置を調整していきます。
DZ-03  配置した写真がパソコン画面に取り込まれる感じの表現

この写真具品は、パソコン画面に写真が表示されているような感じで配置されます。パソコンの周りは白い色で抑えてあるのでコンテンツエリアの色は白色の時に使える部品です。
部品エリアは自由に組んでいけます。

1

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

os
「DZ-03」編集解説
まずは、配置する画像を作ります。
写真は自動でこの幅に拡大縮小配置されますので、縦横の比率をだいたいで合わせて作れば大丈夫です。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると2行目に
<div class="paso-box-left" style="background-image: url(image/user-photo/sample-photo04.jpg);">
こんな画像タグが見つかると想います。
ピンクの sample-photo04.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
内容ブロックは自由に組んで行ってください。
<!-- ◯◯◯ 内容ブロックはここから◯◯◯--><!-- ◯◯◯ 内容ブロックはここまで◯◯◯--> この間に部品を入れて行ってください。
DZ-04  配置した写真がパソコン画面に取り込まれる感じの表現

この写真具品は、パソコン画面に写真が表示されているような感じで配置されます。パソコンの周りは白い色で抑えてあるのでコンテンツエリアの色は白色の時に使える部品です。
部品エリアは自由に組んでいけます。

動的な見出し文字007あああああああああああああ

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

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

1
os
「DZ-04」編集解説
まずは、配置する画像を作ります。
写真は自動でこの幅に拡大縮小配置されますので、縦横の比率をだいたいで合わせて作れば大丈夫です。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると2行目に
<div class="paso-box-left" style="background-image: url(image/user-photo/sample-photo04.jpg);">
こんな画像タグが見つかると想います。
ピンクの sample-photo04.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
内容ブロックは自由に組んで行ってください。
<!-- ◯◯◯ 内容ブロックはここから◯◯◯--><!-- ◯◯◯ 内容ブロックはここまで◯◯◯--> この間に部品を入れて行ってください。
DZ-05  少し遅れて重なり合う写真たいとる

この部品は、画像が作れる方専用です。3枚同じ大きさで重なり合う、写真背景が透明の写真(PING-24での保存が望ましいです。GIF保存はできればNG)を正確に作らないといけないので。画像が作れない場合はきびしいですが ひときわ目をひく部品になります。

1
os
2
3
os
「DZ-05」編集解説
まずは、配置する画像を作ります。 3枚作ります。まず最初に右からスライドしてくる画像、次に左からスライドしてくる画像、最後に真ん中でふわっと浮き出てくる画像の3枚です。
3枚は同じ大きさで作ってください。最後に重なるので背景は透明で作ります。なので保温形式はPNG-24 形式での画像保存となります。GIFでもいけますがGIFは画像のエッジが綺麗ではないので最終手段的な感じです。PNG-24がベストです。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると2行目に
<div class="paso-box-left" style="background-image: url(image/user-photo/sample-photo04.jpg);">
こんな画像タグが見つかると想います。
ピンクの sample-photo04.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
部品記述の中に
<div class="delay-k01">
<img src="image/user-photo/delay01.png" width="100%" height="auto" alt="1">
</div>
こんな記述が見つかると思います。
ここが最初の右からくる画像です。delay01.png を作られた画像の名前にしてください。
他の
class="delay-k02"  class="delay-k03"  も同じように編集してください。
DZ-06  配置した写真がフィルムの感じで並ぶ表現

この写真具品は、フィルム風に並んで斜めに配置されます。
高さを合わせないと崩れるので、必ず各写真の大きさは縦横を合わせる必要があります。

os
fos
fos
fos
os
「DZ-06」編集解説
まずは、配置する画像を作ります。
作る枚数は4枚です。
各写真は大きさを同じにしてください。 縦横を揃えないと各シャイsんの高さがばらばらになってしまいフィルム風に見えなくなるので!

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると
<img src="image/user-photo/sample-photo01.jpg" />
こんな画像タグが4つ見つかると想います。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
DZ-07  配置した写真がフィルムの感じで並ぶ表現

この写真具品は、フィルム風に並んで斜めに配置されます。
高さを合わせないと崩れるので、必ず各写真の大きさは縦横を合わせる必要があります。

os
fos
fos
fos
os
「DZ-07」編集解説
まずは、配置する画像を作ります。
作る枚数は4枚です。
各写真は大きさを同じにしてください。 縦横を揃えないと各シャイsんの高さがばらばらになってしまいフィルム風に見えなくなるので!

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると
<img src="image/user-photo/sample-photo01.jpg" />
こんな画像タグが4つ見つかると想います。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
DZ-08  配置した写真が帯に映り込む感じ

この写真部品は、配置セットすると帯に映り込みができているような表現になっています。ツルツルの帯の上に写真があるみたいな...
少し立体感も出てきます。注意点は、フリー部品エリア内の文字や部品を配置画像の高さより大きくしないことです。

os
1
1
os

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

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

os
「DZ-08」編集解説
まずは、配置する画像を作ります。
作る枚数は1枚です。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると
<img src="image/user-photo/sample-drum.jpg" />
</div>
<div class="hansya-photo-btm">
<img src="image/user-photo/sample-drum.jpg" />

こんな画像タグが2つ見つかるとおいます。
それぞれ2箇所ピンクの sample-drum.jpg を 作られた画像の名前に差し替えてください(拡張子も含めてです)。
内容ブロックは自由に組んで行ってください。
<!-- ◯◯◯ 内容ブロックはここから◯◯◯--><!-- ◯◯◯ 内容ブロックはここまで◯◯◯--> この間に部品を入れて行ってください。
DZ-09  配置した写真が帯に映り込む感じ

この写真部品は、配置セットすると帯に映り込みができているような表現になっています。ツルツルの帯の上に写真があるみたいな...
少し立体感も出てきます。注意点は、フリー部品エリア内の文字や部品を配置画像の高さより大きくしないことです。

os

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

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

os
1
1
os
「DZ-09」編集解説
まずは、配置する画像を作ります。
作る枚数は1枚です。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると
<img src="image/user-photo/sample-drum.jpg" />
</div>
<div class="hansya-photo-btm">
<img src="image/user-photo/sample-drum.jpg" />

こんな画像タグが2つ見つかるとおいます。
それぞれ2箇所ピンクの sample-drum.jpg を 作られた画像の名前に差し替えてください(拡張子も含めてです)。
内容ブロックは自由に組んで行ってください。
<!-- ◯◯◯ 内容ブロックはここから◯◯◯--><!-- ◯◯◯ 内容ブロックはここまで◯◯◯--> この間に部品を入れて行ってください。
DZ10  写真4枚整列その上に1枚が斜め乗っかり

この写真部品は、4枚の写真の上に1枚だけ少し斜めに乗っかる部品です。写真は大きさを揃えるとこのサンプルの感じになりますが、縦長の写真などを混ぜてもランダム感が出るので良い感じになります。写真部品の大きさはセット後に調整が可能です。

os
os
「DZ-11」編集解説
まずは、配置する画像を作ります。
作る枚数は5枚です。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると
<img src="image/user-photo/sample-photo01.jpg" />
こんな画像タグが5つ見つかるとおいます。
1番目が左上、2番目が右上、3番目が左下、4番目が右下、5番目が全体の上に乗っかる写真です。
それぞれピンクの sample-photo01.jpg を 作られた画像の名前に差し替えてください(拡張子も含めてです)。
記述1行目に、<div class="col-box" style="margin-left: 0%;margin-right: 0%;"> こんな記述が見つかると思います。
これが大きさと全体の位置です。left の方のパーセントは左の余白幅です。 right の方は右の余白幅なので、今は0ですがここを数値を入れることで写真部品全体が小さくなっていきます。両方同じ数値なら小さくなって真ん中に。数値を例えばleftを0でright を30%としたなら、写真部品は70パーセントの大きさで左寄せでセットされます。
DZ11  写真4枚整列その上に1枚が斜め乗っかり+コルクボード

この写真部品は、4枚の写真の上に1枚だけ少し斜めに乗っかる部品です。写真は大きさを揃えるとこのサンプルの感じになりますが、縦長の写真などを混ぜてもランダム感が出るので良い感じになります。

up
2015.12.17 親睦会
os
os
btm
「DZ-12」編集解説
まずは、配置する画像を作ります。
作る枚数は5枚です。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると
<img src="image/user-photo/sample-photo01.jpg" />
こんな画像タグが5つ見つかるとおいます。
1番目が左上、2番目が右上、3番目が左下、4番目が右下、5番目が全体の上に乗っかる写真です。
それぞれピンクの sample-photo01.jpg を 作られた画像の名前に差し替えてください(拡張子も含めてです)。
DZ12  写真2枚が重なり合う

この写真部品は、2枚の写真が重なり合う感じで配置されます。セット後は大きさを変更していけます。

os
「DZ-12」編集解説
まずは、配置する画像を作ります。
作る枚数は2枚です。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると
<img src="image/user-photo/sample-photo01.jpg" />
こんな画像タグが5つ見つかるとおいます。
1番目が下、2番目が上に乗っかる写真です。
それぞれピンクの sample-photo01.jpg を 作られた画像の名前に差し替えてください(拡張子も含めてです)。
記述1行目に、<div class="col-box" style="margin-left: 0%;margin-right: 0%;"> こんな記述が見つかると思います。
これが大きさと全体の位置です。left の方のパーセントは左の余白幅です。 right の方は右の余白幅なので、今は0ですがここを数値を入れることで写真部品全体が小さくなっていきます。両方同じ数値なら小さくなって真ん中に。数値を例えばleftを0でright を30%としたなら、写真部品は70パーセントの大きさで左寄せでセットされます。

二分割均等配置エリア部品の中にこの部品を配置するとこんなイメージになります。

os
os
os
os
DZ13  帯+写真まるトリミング+フリーエリア

この写真部品は、帯+丸くカットされた写真枠+フリー部品エリアの部品です。色を変えて連続してならべると良い感じかも。
注意点としては、写真は正方形の写真を作ってください。正方形だと正円になりますが、写真が縦長だと楕円になってきます。

os
1
タイトル文字がここに入ります
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
tos
tos
1
タイトル文字がここに入ります
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
tos
tos
1
タイトル文字がここに入ります
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
tos
tos
「DZ-13」編集解説
まずは、配置する画像を作ります。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると
<div class="ads"><img src="image/user-photo/sample-photo05.jpg" alt="1" /></div>
こんな画像タグが見つかるとおいます。
それぞれ2箇所ピンクの sample-photo05.jpg を 作られた画像の名前に差し替えてください(拡張子も含めてです)。
1の部分にはその画像の簡単な説明文を
style="background-color: #b3caff !important;"こんな記述が1行目にあると思います。
#b3caffが帯の背景の色になってい ます。好きな色に変えてみてください
内容ブロックは自由に組んで行ってください。
<!-- ◯◯◯ 内容ブロックはここから◯◯◯--><!-- ◯◯◯ 内容ブロックはここまで◯◯◯--> この間に部品を入れて行ってください。
DZ14  ムービーオブジェクト

背景にムービーを配置した目立たせる帯オブジェクトです。重ためなので使いすぎは禁物です!
使い方はワードプレスの配置したい場所にボタンで配置したら、あとはビジュアルエディターで文字をうちかえ、文字の色や大きさなどを編集していくだけです。

os
os
マトリックス風のオブジェクト
デザイン写真部品 DZ14-1
□□□自由余白□□□
炎めらめら風のオブジェクト
デザイン写真部品 DZ14-2
□□□自由余白□□□
水風のオブジェクト
デザイン写真部品 DZ14-3
□□□自由余白□□□
カミナリ風のオブジェクト
デザイン写真部品 DZ14-4
DZ-15  見えると4分割されたエリアが上下交互にスライドしてきます。

それぞれの背景は個別に色を設定できます。
文字等はビジュアルエディターでは見えないので、コードの方を打ち換えていきます。
注意点としては、見える範囲にこの部品を複数並べると全部同じ動きをするのでとても見ずらくなります。たまに出現するぐらいが一番インパクトがでます。連続配置は禁物です!

開くブラウザーによってはスライドではなくフェードインになる場合もあります。

os
1
タイトルを入れる

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

1
タイトルを入れる

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

1
タイトルを入れる

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

1
タイトルを入れる

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

os
「DZ-15」編集解説
まずは、配置する帯の中の画像を4枚作ります。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
次は帯を編集します。
<!-- ◇◇◇◇左の帯ここから◇◇◇◇ -->
<div class="equa4-1ss" style="background-color: #e7ffd0;">
<div class="equa-photo">
<img src="image/user-photo/sample-photo01.jpg" width="100%" height="auto" alt="1" />
</div>
<div class="dll-title" style="color: #000000;"> タイトルを入れる</div>
<hr style="margin-top: 1px;border-color: #999999;">
<p style="color: #000000;">あああああああああああああああああああああああああああああああああ</p>
</div>
<!-- ◇◇◇◇左の帯ここまで◇◇◇◇ -->
こんな感じで ここから ここまで という注釈で区切られています。 ここが帯1本分なのでここをそれぞれ編集していきます。
帯の色は、 1行目に<div class="equa4-1ss" style="background-color: #e7ffd0;">
が見つかると思います。#e7ffd0 この部分が帯の色です。好きな色のコードに差し替えてください。
写真は
<img src="image/free-photo/sample-photo01.jpg" width="100%" height="auto" alt="1" />
こんなイメージタグの記述があると思います。ピンクの部分を作っ他写真の名前に拡張子ごと入れ替えます。

文字は
この部品は隠れた文字が出現する部品なのでビジュアルエディターでは文字は見えないのでコードの方を編集します。
タイトル文字とテキスト文字の前に それぞれ color: #000000 が見つかると思います。ここが文字の色です。
仕切り線は
<hr style="margin-top: 1px;border-color: #999999;"> これが仕切り線でこちらも #999999 ここが色なのでここを入れたい色にうち変えます。
DZ-16  ふわふわした注釈イラスト

注釈の中の文字は打ち換えができます。
文字等の色や大きさなどはエディターで編集してきます。
フワフワしっぱなしなので部品の上下にはスペースが必要なので少し上下の部品とは離れます。

os

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

ここが
ポイント
os

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

ここが
ポイント
os

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

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

ここが
ポイント
os

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

ここが
ポイント
os

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

ここが
ポイント
os

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

ここが
ポイント
os

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

人気
第3位
os

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

ここが
ポイント
os

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

ここが
ポイント
os

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

金の枠
os

あああああああ

銀の枠
os

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

銅の枠
os
「DZ-16」編集解説
部品配置後は、エディターでタイトル文字や吹き出しの中の文字の編集をしていきます。大きさや色や文字の打ち替えです。

編集後は、吹き出しのイラストを差し替えていきます。
配置部品の記述を見ると
<div class="fuwa-photo01">
こんな記述が真ん中あたりに見つかるとおいます。
この 01 を変えてきます。  差し替えは12種類あるので 01 〜 12 となります。
差し替えの番号はこのサンプルの上から順番になっています。
DZ-17  ふわふわ注釈 オリジナル画像版

こちらは上のふわふわ注釈の部品と同じですが、ご自身が作られた画像イラストを配置できます。

os
os

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

333
os
「DZ-17」編集解説
部品配置後は、エディターでタイトル文字を編集をしていきます。大きさや色や文字の打ち替えです。

次に画像を作ります。
画像は横が104px 縦が75px の大きさで作ってください。背景が透明のPNG-24がベストですがコンテンツエリアと同じ色のJPGでもOKです。
大きさだけは必ずこの大きさでお願いします。
文字も含めた1枚もののイラストを作ってください。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
記述内に
<img src="image/user-photo/maruya-jisaku.png" width="104" height="75" alt="333">
こんな画像タグがあるので  maruya-jisaku.png ここをご自身で作られた画像の名前に差し替えてください。(拡張子ごとです)
DZ-18  見えると画像の真ん中から上下に向かって出現する写真

見えると写真のセンターラインから上下にわかれて展開するインパクト部品です。
これも複数並べるのは禁物です。同じ動きをするので見える範囲に2つあるととても目障り!
だけどたまにあるととてもインパクト大! たまに配置したり距離をおいて配置したりがベストです!

os
os
up
btm
「DZ-18」編集解説
まずは配置写真を作ります。 この部品は原寸での写真配置となりますので コンテンツから飛び出すような大きな写真だと全体が崩れてしまいます。コンテンツから飛び出さないように注意してください。
写真の最大の横幅は
ページの基本設定で設定したコンテンツエリアの幅から 120px 引いた数値が最大値です。


作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
記述内1行目に
<div class="hb50-box" style="height: 336px;">
こんなタグが見つかると思います。 ピンクの 336 ここを作られた写真の高さに打ち替えてください。
style="background-image: url(image/user-photo/sample-bunkatsu.jpg);"
こんな画像タグの記述が2箇所あると思います。 ピンクの部分を作られた画像の名前に差し替えてください。(拡張子ごとで2箇所とも同じ画像で)
DZ-19  サムネイルで写真切り替え

写真の表示の大きさは自由に調整ができます。登録写真の数は自由です。他の部品の中に配置も可能です。

os
os
「DZ-19」編集解説
配置した記述見ると1行目に style="width: 70%;" こんな記述が見つかると思います。
ここが横幅の設定です。コンテンツの文字のスペースに対してのパーセントですので100%tとすると文字エリアいっぱいの大きな写真となります。50%とすると半分の大きさという感じでここで横幅を設定します。
他の部品の中に配置する場合
この場合は横幅を100%にして配置します。
配置写真は自動で横幅が設定そた大きさに変化して配置されます。正し崩れないようにするためには全部の写真の大きさを合わせる必要があります。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
写真をセットする
記述内に
<!-- □写真ここから□ -->
<li><img src="image/user-photo/sample-photo01.jpg"></li>
<li><img src="image/user-photo/sample-photo02.jpg"></li>
<!-- □写真ここまで□ -->
こんな、ここからここまで という注釈が見つかると思います。この中で写真を増やしたり減らしたりします。
<li><img src="image/user-photo/sample-photo01.jpg"></li>
これで写真1つ分なのでこの記述をコピペで必要な分だけ並べてペーストしていきます。
<li><img src="image/user-photo/sample-photo01.jpg"></li> このピンクの部分が写真の名前なので作られた写真の名前に拡張子ごと差し変えてください。
os

二分割エリア部品に入れてみると

横幅を100%にして試しに2分割エリア部品の中に配置してみた例です。

写真の大きさは自動調整されるのでこんな感じで他の部品内にくみこんでもそのまま動きます。

os
DZ-20  トランスフォームとフリーエリア

オンマウスでキャプションアニメが動く部品とフリーエリアの組み合わせ部品です。

os
os
1

キャプタイトル

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

オンマウスでトランスフォームキャプション

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

os
「DZ-20」編集解説
まずは写真を作ります。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると 
<div class="abm-box">
<img src="image/user-photo/sample-photo04.jpg" width="100%" height="auto" alt="1">

こんな画像タグが見つかると思います。こちらが配置写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
<!-- □文字ここから□ -->
<h3 style="top: 20%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
<!-- □文字ここまで□ -->
この文字ここから ここまで これがアニメで動く文字です。打ち替えでエデォターで色や大きさを編集します。
各文字の先頭に top: 20%  こんなパーセントが表示されていると思います。これがその文字の位置です。入れる文字数により変わってくるのでここを調整して文字を適正な位置にセットします。この数値はsの文字の上からの距離です。ここは文字数次第なので文字を入れてから調整します。
<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 など好きな濃度を入れてください。
囲み罫線の色と地の色
記述1行目に  style="border-color: #999999; background-color: #FFFFFF;"
こんな記述が見つかると思います。
border-color: #999999 の  #999999 が罫線の色です。
background-color: #FFFFFF の  #FFFFFF  が地の色です。 好きな色のコードに書き換えてください。
<!-- □フリーエリアここから□ --> <!-- □フリーエリアここまで□ -->
これはフリーエリアです。この間に部品等を組んでいきます。
os
DZ-21  トランスフォームとフリーエリア

オンマウスでキャプションアニメが動く部品とフリーエリアの組み合わせ部品です。

os
os

オンマウでトランスフォーム文字

os

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

1

キャプタイトル

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

os
「DZ-21」編集解説
まずは写真を作ります。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると 
<div class="abm-box">
<img src="image/user-photo/sample-photo04.jpg" width="100%" height="auto" alt="1">

こんな画像タグが見つかると思います。こちらが配置写真です。
ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
<!-- □文字ここから□ -->
<h3 style="top: 20%;">キャプタイトル</h3>
<p style="top: 35%;">あああああああああああああああああああああああああああああああああああああああああああああ</p>
<!-- □文字ここまで□ -->
この文字ここから ここまで これがアニメで動く文字です。打ち替えでエデォターで色や大きさを編集します。
各文字の先頭に top: 20%  こんなパーセントが表示されていると思います。これがその文字の位置です。入れる文字数により変わってくるのでここを調整して文字を適正な位置にセットします。この数値はsの文字の上からの距離です。ここは文字数次第なので文字を入れてから調整します。
<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 など好きな濃度を入れてください。
囲み罫線の色と地の色
記述1行目に  style="border-color: #999999; background-color: #FFFFFF;"
こんな記述が見つかると思います。
border-color: #999999 の  #999999 が罫線の色です。
background-color: #FFFFFF の  #FFFFFF  が地の色です。 好きな色のコードに書き換えてください。
<!-- □フリーエリアここから□ --> <!-- □フリーエリアここまで□ -->
これはフリーエリアです。この間に部品等を組んでいきます。
DZ-22  見えるとブワンと大きくなる画像配置部品

この部品は画像部品で画像が見えると、ブワンと大きくなり元に戻ります。また見えると大きくなりを繰り返します。

このサンプルでは文字の画像で目立たせてみました。画像ならなんでもOKですがあまりに大きな画像はやめたほうが良いです。

見出し文字的な感覚で!左配置・センター配置・右配置が設定できます。

os

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

reia

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

「DZ-22」編集解説
まずは写真を作ります。
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると 
<div class="buwan" style="text-align: left;">
<img src="image/user-photo/sam-kaku2.jpg" alt="reia" class="sample111">
</div>

こんな記述が見つかると思います。
ピンクの sam-kaku2.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。

<div class="buwan" style="text-align: left;">
こちらが画像の配置位置です。
ピンクの部分を編集していきます。
left で左合わせ。 right で右合わせ。 center で中央合わせにセットされます。
あまり大きな画像のセットは避けてください。見出し的な感じでの使い方でお願いします。
DZ-23  整列写真とフリーエリア

この部品は4枚の写真が自動整列して反対側にフリー部品エリアが配置される部品です。
画像の大きさは自動で調整されるので、だいたいの大きさで作れば大丈夫ですが、4枚の大きさを揃えることが条件となります。

os
os
1
2
os
1
2
is

写真の大きさは4枚揃えて!

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

os
「DZ-23」編集解説
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると 
<!-- 左上の写真ここから -->
<img src="image/user-photo/sample-photo01.jpg" width="100%" height="auto" alt="1" />
<!-- 左上の写真ここまで -->
こんな記述が見つかると思います。
◯◯の写真ここから ここまで という注釈の中を編集してきます。ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
こんな感じで4枚の写真を入れ替えます。

<!-- 背景の色 -->
<div class="apop-wap-right" style="background-color: #D1FF99;">
<!-- 背景の色 -->
この注釈に挟まれた部分は、フリーエリアの背景色です。 #D1FF99 この部分を使いたい色のコードと差し替えてください。
<!-- ◯◯フリーエリアの内容ここから◯◯ --><!-- ◯◯フリーエリアの内容ここまで◯◯ -->この注釈の中を部品などで組み立てていきます。ここから ここまでの中にくんでいってください。
DZ-24  整列写真とフリーエリア

この部品は4枚の写真が自動整列して反対側にフリー部品エリアが配置される部品です。
画像の大きさは自動で調整されるので、だいたいの大きさで作れば大丈夫ですが、4枚の大きさを揃えることが条件となります。

os
os

写真の大きさは4枚揃えて!

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

is
1
2
os
1
2
os
「DZ-24」編集解説
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると 
<!-- 左上の写真ここから -->
<img src="image/user-photo/sample-photo01.jpg" width="100%" height="auto" alt="1" />
<!-- 左上の写真ここまで -->
こんな記述が見つかると思います。
◯◯の写真ここから ここまで という注釈の中を編集してきます。ピンクの sample-photo01.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
こんな感じで4枚の写真を入れ替えます。

<!-- 背景の色 -->
<div class="apop-wap-right" style="background-color: #D1FF99;">
<!-- 背景の色 -->
この注釈に挟まれた部分は、フリーエリアの背景色です。 #D1FF99 この部分を使いたい色のコードと差し替えてください。
<!-- ◯◯フリーエリアの内容ここから◯◯ --><!-- ◯◯フリーエリアの内容ここまで◯◯ -->この注釈の中を部品などで組み立てていきます。ここから ここまでの中にくんでいってください。
DZ-25  帯の上に画像が少し斜めに配置される

見出し的な部品ですが、画像を回転させているので画像部品なっていますが、使い方は見出しですね。

写真はサンプルのように角版でもよいし、切り抜いて背景を透明視したPNG-24 もしくはGIF などでもOKです。

見出し的な文字を1行で入れて下さい

3

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

「DZ-25」編集解説
作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると 
<img src="image/user-photo/sample-photo04.jpg" width="100%" height="100%" alt="3">
こんな記述が見つかると思います。
ピンクの sample-photo04.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
3のところはその画像の説明文を短めに、例えば alt="ゴルフ大会でのスナップ" など。

帯の色は
2行目に、 style="background-color: #ff52e5;" こんな記述が見つかると思います。
#ff52e5 この部分が帯の色なので、使いたい色のコードに差し替えてください。
文字はワードプレスのエディターで直接、打ち替え や文字の色などを編集していきます。
文字は1行で入れてみてください!
DZ-26 見えると左右から画像がスライド + フリーエリア
左
左

見えると左右から画像がスライド

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

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

右
右
os
「DZ-26」編集解説
まずは、配置する画像を作ります。
写真は自動でこの幅に拡大縮小配置されますので、縦横の比率をだいたいで合わせて作れば大丈夫です。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
画像を差し替える
<img src="../image/user-photo/slide01.png" width="100%" height="auto" alt="">
<div class="ss-moveleft2">
<img src="../image/user-photo/slide01.png" width="100%" height="auto" alt=""></div>
こんな画像タグが見つかると思います。
alt="" とある方が左側の写真で  alt="" が右側の画像です。
ピンクの slide01.png の部分が画像の名前なので、2箇所にアップした画像の名前を拡張子ごと差し替えてください。
右も同じように差し替えてみてください。
フリーエリア
フリーエリアは、部品を組んでいったり、文字を打ったり、自由に組んでみてください。
<!-- □フリーエリアここから□ -->
<p>見えると左右から画像がスライド</p>
<p>あああああああああああああああああああああああああああああああああああ</p>
<!-- □フリーエリアここまで□ -->
こんな記述が見つかると思います。この ここから  ここまで の注釈の間に挟まれるように部品を入れていってください。
DZ-27 見えると左から画像がスライド + 右側フリーエリア
写真
写真

見えると左から画像がスライド

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

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

os
「DZ-27」編集解説
まずは、配置する画像を作ります。
写真は自動でこの幅に拡大縮小配置されますので、縦横の比率をだいたいで合わせて作れば大丈夫です。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
画像を差し替える
<div class="ss-move2left">
<img src="../image/user-photo/slide03.png" width="100%" height="auto" alt="写真">
<div class="ss-move2left2">
<img src="../image/user-photo/slide03.png" width="100%" height="auto" alt="写真"></div>
こんな写真と書いてある画像タグが見つかると思います。
ピンクの slide03.png の部分が画像の名前なので、2箇所にアップした画像の名前を拡張子ごと差し替えてください。

フリーエリア
フリーエリアは、部品を組んでいったり、文字を打ったり、自由に組んでみてください。
<!-- □フリーエリアここから□ -->
<p>見えると左右から画像がスライド</p>
<p>あああああああああああああああああああああああああああああああああああ</p>
<!-- □フリーエリアここまで□ -->
こんな記述が見つかると思います。この ここから  ここまで の注釈の間に挟まれるように部品を入れていってください。
DZ-28 見えると右から画像がスライド + 左側フリーエリア

見えると右から画像がスライド

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

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

写真
写真
os
「DZ-28」編集解説
まずは、配置する画像を作ります。
写真は自動でこの幅に拡大縮小配置されますので、縦横の比率をだいたいで合わせて作れば大丈夫です。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
画像を差し替える
<div class="ss-move3right">
<img src="../image/user-photo/slide04.png" width="100%" height="auto" alt="写真">
<div class="ss-move3right2">
<img src="../image/user-photo/slide04.png" width="100%" height="auto" alt="写真"></div>
こんな写真と書いてある画像タグが見つかると思います。
ピンクの slide04.png の部分が画像の名前なので、2箇所にアップした画像の名前を拡張子ごと差し替えてください。

フリーエリア
フリーエリアは、部品を組んでいったり、文字を打ったり、自由に組んでみてください。
<!-- □フリーエリアここから□ -->
<p>見えると左右から画像がスライド</p>
<p>あああああああああああああああああああああああああああああああああああ</p>
<!-- □フリーエリアここまで□ -->
こんな記述が見つかると思います。この ここから  ここまで の注釈の間に挟まれるように部品を入れていってください。
DZ-29 見えると左の画像が下からふわっと + 右側フリーエリア
  • 写真
os

見えると画像が縦方向にふわっと軽く動く

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

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

os
「DZ-29」編集解説
まずは、配置する画像を作ります。
写真は自動でこの幅に拡大縮小配置されますので、縦横の比率をだいたいで合わせて作れば大丈夫です。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
画像を差し替える
<li class="list-mv06"><img src="../image/user-photo/slide03.png" width="100%" height="auto" alt="写真"></li>
こんな写真と書いてある画像タグが見つかると思います。
ピンクの slide03.png の部分が画像の名前なので、アップした画像の名前を拡張子ごと差し替えてください。

フリーエリア
フリーエリアは、部品を組んでいったり、文字を打ったり、自由に組んでみてください。
<!-- □フリーエリアここから□ -->
<p>見えると左右から画像がスライド</p>
<p>あああああああああああああああああああああああああああああああああああ</p>
<!-- □フリーエリアここまで□ -->
こんな記述が見つかると思います。この ここから  ここまで の注釈の間に挟まれるように部品を入れていってください。
DZ-30 見えると右の画像が下からふわっと + 左側フリーエリア

見えると画像が縦方向にふわっと軽く動く

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

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

  • 写真
os
「DZ-30」編集解説
まずは、配置する画像を作ります。
写真は自動でこの幅に拡大縮小配置されますので、縦横の比率をだいたいで合わせて作れば大丈夫です。

作られた画像は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
画像を差し替える
<li class="list-mv06"><img src="../image/user-photo/slide04.png" width="100%" height="auto" alt="写真"></li>
こんな写真と書いてある画像タグが見つかると思います。
ピンクの slide04.png の部分が画像の名前なので、アップした画像の名前を拡張子ごと差し替えてください。

フリーエリア
フリーエリアは、部品を組んでいったり、文字を打ったり、自由に組んでみてください。
<!-- □フリーエリアここから□ -->
<p>見えると左右から画像がスライド</p>
<p>あああああああああああああああああああああああああああああああああああ</p>
<!-- □フリーエリアここまで□ -->
こんな記述が見つかると思います。この ここから  ここまで の注釈の間に挟まれるように部品を入れていってください。
os