掲示板が新しくなりました
閲覧のみなら登録は不要です。書き込みをする際に登録が必要になります。
旧掲示板をご利用のユーザー様も、書き込みをする際は、お手数ですが新規登録からお願い致します。
（※土日祝は、掲示板サポートはお休みさせて頂きます）
旧掲示板をご利用のユーザー様も、書き込みをする際は、お手数ですが新規登録からお願い致します。
（※土日祝は、掲示板サポートはお休みさせて頂きます）
解決済み
正方形のマスクを長方形（横4：高さ3 など）にする方法
カテゴリ：静的htmlテンプレサイト（Template Party）
tp_mix1_bussan テンプレートの「施設のご案内」で使われている、正方形の型抜き「マスク」を、長方形にする方法を教えていただけませんか。
<section id="link1">
<h2 class="c"><span class="fade-in-text">施設のご案内</span><span class="small">Information</span></h2>
<div class="grid-mask">
当スレッドの受付は終了しました
回答（1件）
cssフォルダのstyle.cssを編集してください。
style.cssの、
/*画像*/
.grid-mask figure {
aspect-ratio: 1 / 1; /* アスペクト比1:1の正方形 */
}
.grid-mask figure img {
transition: 0.3s;
width:100%;
height:100%;
object-fit: cover;
display:block;
}
を以下に置き換え。
/*画像*/
.grid-mask figure img {
transition: 0.3s;
width:100%;
height: auto;
display:block;
}
あとは、style.cssの冒頭にある長いコード群（/*以下は、「施設のご案内」のマスク用*/）を以下に書き換えて下さい。preserveAspectRatio='none'がなかったので追加しています。
/*以下は、「施設のご案内」のマスク用*/
--mask1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
--mask2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
--mask3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
--mask4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
--mask5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
--mask6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
}