tp_portfolio2のメイン画像枠を自作したい場合
SVGが使えるソフトをお持ちならメイン画像枠の自作が可能です。
imagesフォルダに梱包されているmainimg-path.aiを開いてみましょう
これをベースに好きな形に変更してみて下さい。
「ファイル」→「別名で保存」→ファイル形式のプルダウンから「SVG」を選びます
好きな形に変形したら、「ファイル」→「別名で保存」→ファイル形式のプルダウンから「SVG」を選びます。
SVGコードをクリック
出てきたコードのうち、d=""の中身をコピーします
テンプレートのindex.htmlを開き、メイン画像のSVGのコードと置き換えましょう
同じdで始まるコードがありますので、中身を置き換えましょう。
今回は、同じSVGが解説でしたので同じコードになりますが、自作したコードになるという事です。
アスペクト比を変更したい場合
- svg枠の縦横比率を変更したい場合は、パスだけでなく、cssフォルダのstyle.cssの、
.mainimg .image {
の中にある、
aspect-ratio: 3 / 2;
も変更して下さい。 - 次に、index.htmlの以下の2箇所の数値も書き換えます。
それぞれ、1を横と縦のサイズで割った数字です。
配布テンプレの場合は、横600、縦400だったので、1÷600=0.001666…、1÷400=0.0025です。
- 以上です。
これらを書き換えない場合は、svg枠が少し間延びする事になりますが、気にならない程度ならここの編集は不要です。