レスポンシブ Web デザイン61

スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート 61 です。

無料テンプレートの利用規約はこちらです。

Free Template 61 をダウンロード（zip）
サンプル（動作確認）はこちら

基本的な仕組みは無料テンプレート 59・60 と同じです。（ナビゲーションのデザインが少し異なります）

ブロックの増やし方や、アニメーションのスピードを変更する方法は、無料テンプレート 59・60 の編集方法をご確認ください。

無料テンプレート 61 には、スパイスの写真を使用しました。

写真はそのままご利用頂いても構いませんし、他の写真に変更することもできます。

もちろん、テクスチャや単色を指定することもできます。

ウェブサイトのテーマに合わせて、ワンページスクロールなどのスピードも変更してみてください。

不透明度の異なる画像を images フォルダに梱包しました。

タイトルとコンテンツの背景を変更したい場合は、style.css で指定してください。

タイトル背景の不透明度を変更（71行目）
#site_title{
padding: 15px;
background: url(images/bg-title-white-80.png) center no-repeat;
}

赤字が変更箇所です。

70 に変更すると背景は薄くなり、90 に変更すると背景は濃くなります。

コンテンツ（h1タグ・pタグ）背景の不透明度を変更（85行目）
div[class^="bg-text"] {
background-image: url(images/bg-white-70.png);
margin-left: 5px;
margin-right: 5px;
border-radius: 10px;
padding: 30px;
}

赤字が変更箇所です。

不透明度は、10 ～ 100 で選択できます。（数字が大きいほど、色が濃くなります）

フッターは、指定箇所が異なります。

コンテンツ背景（フッター）の不透明度を変更（114行目）
#bg-text-footer {
background-image: url(images/bg-white-70.png);
margin-left: 5px;
margin-right: 5px;
border-radius: 10px;
padding: 30px;
}

赤字が変更箇所です。

bg-white-70.png は、ワンページスクロールの ON/OFF ボタンの背景にも使用されているので、ご希望に合わせて変更してください。

当サイトの無料テンプレートがお役に立ちましたら幸いです。