このブロックは特にこだわったスタイルは指定していません。
ただ、要素に対してcというclassを指定し、内容をセンタリングしています。
上の画像はかなり大きいので、ウィンドウ幅いっぱいに広がって見えると思いますが、サイズが小さくてのも左によらずにセンタリングされます。
このブロックは、親となるブロックにtp-boxというclass名をつけ、その中に２つのブロックを作ります。
２つのdivタグにもそれぞれphotoとtextというclassをつけて下さい。
tp-box内に作るブロックは必ず２つにして下さい。３つ以上になるとレイアウトが崩れます。どうしても３つ以上にしたい場合は、いったん２つだけ作りその中で小分けにして下さい。
写真の影をなくしたい場合は、cssフォルダのstyle.cssの.tp-box .photo {の中にあるbox-shadowの１行を削除して下さい。その他調整もそこでできます。
ここに説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。サンプルテキスト。サンプルテキスト。
ここに説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。サンプルテキスト。サンプルテキスト。
画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>フォトスタジオ(写真館)向け 無料ホームページテンプレート tp_photostudio1</title>
を編集しましょう。
あなたのホームページ名が「Photo Studio」だとすれば、
<title>Photo Studio</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Photo Studio All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴのaltタグも変更しましょう。
html側に、
alt="Photo Studio"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
imagesフォルダに入っていない画像（アイコン）は全てBootstrap Iconsの素材です。
Bootstrap Icons アイコン一覧
iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合の２通りで使用しました。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。
Bootstrap Iconsを使う為に必要なタグ、ファイル類。
cssフォルダのstyle.css冒頭で読み込んでいる「Bootstrap Iconsの読み込み」のブロック。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、style.cssの冒頭でCDNから読み込んでいるBootstrap Icons関連のファイルのバージョンを変更して動作するか確認してみて下さい。
AI出力されたものを梱包していますのでそのまま再利用頂いても構いませんが著作は当サイトにあります。
このテンプレートの公開時点では、AIサイトによると「著作は作り出した人のもの」（＝当サイト）という規約になっているようです。
AI出力でないリアルな画像に入れ替えたい場合は写真ACさん（無料写真サイト）がおすすめです。
トップページのスライドショーには、vegasを使用しています。
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。
vegas 公式サイト：https://vegas.jaysalvat.com/
オプション一覧：https://vegas.jaysalvat.com/documentation/settings/
トランジション一覧：https://vegas.jaysalvat.com/documentation/transitions/
上記の「トランジション一覧」で、色々なスライドショーのパターンを見る事ができます。お好みで設定を変更してみて下さい。jsフォルダのvegas.jsの値を変更するだけです。
画像を入れ替える場合や、枚数を変更したい場合。
画像を入れ替えたい場合は、imagesフォルダの1.jpg〜3.jpgを上書きして下さい。
枚数を変更する場合や画像ファイル名を変更する場合は、jsフォルダのvegas.jsを開いて編集して下さい。枚数追加は、既存の画像読み込み行をコピペして画像ファイル名を入れ替えるだけでOKです。
16:9の比率の背景画像をレスポンシブ化しています
サンプルテンプレートでは、16:9の画像がレスポンシブになるようcssで設定されています。
この比率以外でも問題なく表示されますが、部分的に切り抜かれるので、16:9以外の比率の画像を全部表示させたければ以下を調整して下さい。
cssフォルダのstyle.cssの、
#mainimg-box {
の中にある、
padding-top: 56.25%;
を調整します。56.25というのは、9÷16=56.25の事です。
もし、3:2の画像を使いたければ、2÷3=66.66
padding-top: 66.66%;
と書き直せばOKです。
vegasを使う為に必要なタグ、ファイル類。
1. html冒頭のhead内にある「vegas.min.css」の読み込みの１行。
2. htmlにある「スライドショー」のブロック。
3. html下部にある「jQueryの読み込み」のブロック。※下のjsファイルより先に読み込んで下さい。
4. その下の「スライドショー（vegas）」のブロック。
5. jsフォルダ内の「vegas.js」。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、CDNから読み込んでいるjQueryのバージョン及びvegas関連のファイルのバージョンを変更して動作するか確認してみて下さい。
slickを使ったスラドショーになっています。slick 公式サイト
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。
写真の縦横サイズを予め揃えておくと綺麗に並びます。
枚数は自由に変更できます。html側に既存の写真ブロックをコピペして新しい画像ファイル名に書き換えて下さい。
スライドショーの設定は、jsフォルダのslick.jsで調整できます。
slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryファイルの読み込み」のタグ。※下のjsファイルより先に読み込んで下さい。
2. その下にある、「スライドショー（slick）」からの数行のタグ。
3. jsフォルダ内の「js/slick.js」。
以下のような出現のアニメーションサンプルをsample_inview.htmlにまとめています。
好きなアニメーションに簡単に変更できますし、オリジナルのものを作る事もできます。
以下は「よく頂く質問」を例にサンプルを用意していますが汎用的な開閉ブロックなので、基本的にはどこにでも使えます。
クリック対象としたいブロックにclass="openclose"とつければ、続く要素が自動的に開閉ブロックになります。
もしすでにclass指定がある場合は、半角スペースで区切って追加すればOKです。
例：class="sample openclose"
トップページのNEWSブロックは左右に分かれています。特にNEWS専用で作った訳ではないので、汎用的に使って下さい。
一番外側のブロックに、.lrというclass名をつけ、その中に２つのブロックを作ればOKです。３つ以上になるとレイアウトが崩れるので、ブロックを小分けしたい場合は、その下の階層で小分けして下さい。
ここのスタイルは、cssフォルダのstyle.cssで.lrとテキスト検索すれば出てきます。
このテンプレートではあまり使っていませんが、マウスオン時に枠線を囲むアニメーションボタンもあります。
ボタンのhtml側を見ればわかりますが、外側にanimation-btn、内側にanimation-btn-innerをつける事で動作します。必ずセットで使って下さい。
その外側のdivタグのclassは左右の配置についてです。左よせでいいなら一番外側のdivは削除してもOKです。
テキスト右側の矢印（）は上で解説しているBootstrap Iconsです。iタグなので使わないならhtml側からiタグを削除して下さい。
枠線の色など変更したければ、cssフォルダのstyle.cssで「アニメーションボタン」とテキスト検索してみて下さい。説明もあります。