単独写真の配置 部品

単独の写真を配置する部品です。


ご自身で作られた、タイトル帯やブロックの写真などもこちらで配置していきます。


PH-001  (自動でコンテンツエリアの淵まで写真を拡大配置)

写真を配置すると自動でコンテンツエリアの淵まで左右が拡大されます(縦は横幅に合わせて拡大されます)

この部品は、例えば自作の帯の画像を作ったり、ブロックでコンテンツ画像を作ったりしたときにこれで配置すると後でコンテンツ幅を変えても自動で写真の大きさが変わるので便利です。

1
「写真-PH-001」編集解説
まずは、配置する画像を作ります。
この部品はコンテンツエリアの端から端まで自動的に画像が拡大縮小されて配置されますので。だいたいご自身でセットしたコンテンツの幅の大きさに横幅を合わせて作ってみてください。自動調整されますので、だいたいで大丈夫です。

作られた画像は、 「 user-photo 」フォルダーの中に作ったフォルダーにアップしてください。
場所は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、
「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中に作った登録フォルダー内にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると <img src="image/user-photo/sample-photo-wide.jpg" width="100%" height="auto" alt="1" />
こんな画像タグが見つかると想います。
ピンクの sample-photo-wide.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
自動でコンテンツ幅にセットされるので例えば、ご自身で作られたオリジナル帯画像 や ブロック丸ごと写真なども コンテンツの幅を後から変えても自動調整されるのでこの部品で配置をお勧めします。
1

PH-002  (自動でコンテンツの文字幅まで写真を拡大配置)

写真を配置すると自動でコンテンツエリアの淵まで左右が拡大されます(縦は横幅に合わせて拡大されます)

この部品は、例えば自作の帯の画像を作ったり、ブロックでコンテンツ画像を作ったりしたときにこれで配置すると後でコンテンツ幅を変えても自動で写真の大きさが変わるので便利です。

1
「写真-PH-002」編集解説
まずは、配置する画像を作ります。
この部品はコンテンツエリアの文字の端まで自動的に画像が拡大縮小されて配置されますので。だいたいご自身でセットしたコンテンツの幅の大きさに横幅を合わせて作ってみてください。自動調整されますので、だいたいで大丈夫です。

作られた画像は、 「 user-photo 」フォルダーの中に作ったフォルダーにアップしてください。
場所は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、
「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中に作った登録フォルダー内にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると <img src="image/user-photo/sample-photo-wide.jpg" width="100%" height="auto" alt="1" />
こんな画像タグが見つかると想います。
ピンクの sample-photo-wide.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
自動でコンテンツ幅にセットされるので例えば、ご自身で作られたオリジナル帯画像 や ブロック丸ごと写真なども コンテンツの幅を後から変えても自動調整されるのでこの部品で配置をお勧めします。

写真を配置すると自動でコンテンツの文字幅まで左右が拡大されます(縦は横幅に合わせて拡大されます)

この部品は、例えば自作の帯の画像を作ったり、ブロックでコンテンツ画像を作ったりしたときにこれで配置すると後でコンテンツ幅を変えても自動で写真の大きさが変わるので便利です。


PH-003  (単独写真の原寸配置)

この部品は、単独の写真を原寸で配置するときに使います。配置後にセンター配置・左配置・右配置を編集できます。

このキットはコンテンツエリアの幅を調整できるので、コンテンツの文字幅より大きな写真を配置すると全体が崩れるので注意してください。写真の横幅の原寸配置での最大値は、例えばコンテンツ幅を「1000px」とセットした場合は「880px」です。

コンテンツ幅から120pxマイナスした数値が原寸での最大値です。微妙な場合は「PH-002」を使ってください。

1
「写真-PH-003」編集解説
まずは、配置する画像を作ります。
この部品は単独の画像を原審で配置するための部品です。

作られた画像は、 「 user-photo 」フォルダーの中に作ったフォルダーにアップしてください。
場所は、 「 wp-content 」フォルダーの中の、 「 fthemes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、
「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中に作った登録フォルダー内にアップしてください。ワードプレスは階層が深いので注意してアップしてください。
配置部品の記述を見ると <img src="image/user-photo/sample-photo-wide.jpg" width="100%" height="auto" alt="1" />
こんな画像タグが見つかると想います。
ピンクの sample-photo-wide.jpg を作られた画像の名前に差し替えてください(拡張子も含めてです)。
1 の部分にはその画像の文字表記を入れます。 例えば「ゴルフの風景」などなど。
部品の記述の中で1行目に text-align: center; こんな記述が見つかると想います。
今はcenter なので中央配置になっています。 ここを left  にすると左合わせになります。
right で右合わせにかわります。

os