スイカについて
スイカは、ウリ科の植物で、キュウリやカボチャの仲間になるので、植物学的には「野菜」とされています。しかし、甘くて果汁が多いフルーツとして食べられる為、日本では一般的に「果物」として扱われます。
夏の果物として甘くてみず美味しい果肉が特徴で、日本では夏の風物詩として親しまれております。
スイカの栄養
カリウムやスイカの果汁から発見されたアミノ酸の一種・シトルリンが多く含まれており、むくみの解消や利尿作用、老廃物の排出を促すため、高血圧の予防にも効果的だといわれています。またシトルリンには、疲労回復、動脈硬化の予防効果もあるとされています。 赤い果肉には、抗酸化作用のあるカロテンとリコピンが含まれています。
スイカの選び方
果皮のツヤがあり、シマ模様がくっきりしているものを選びましょう。 軽く叩いた時の音がにハリがあり、弾むような澄んだ音がするもの。低い音が熟しているサインです。
スイカの保存方法
収穫直後が美味しいので、なるべく早く食べましょう。丸のままで保存する場合は、風通しのいい涼しい場所で。 カットしたものは、水分が飛ばないようにラップに包んで冷蔵します。 一口サイズに切って冷凍保存も可能です。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>幼稚園・保育園・キッズクラブ向け 無料ホームページテンプレート tp_kids7</title>
を編集しましょう。
あなたのホームページ名が「さんぷる幼稚園」だとすれば、
<title>さんぷる幼稚園</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© さんぷる幼稚園 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴのaltタグも変更しましょう
html側に、
alt="さんぷる幼稚園"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
テンプレートの色変更について
全体のカラー変更は簡単にできます。
cssフォルダのstyle.cssを開き、冒頭の、
:root {
の中にある、
--primary-color:
〜〜〜
他数行の設定を変更すればサイト全体の色変更ができます。
※必要に応じてテーブルやカラムブロック内の調整が必要になる場合もあります。
メニューについて
メインメニューは開閉ブロックタイプになります。
メニュー本体のコードはhtml下部の方にある、
<div id="menubar">
からのブロックです。
メニュー幅は画面幅の最大70%に設定されており、これを超えることはありません。設定箇所は、cssフォルダのstyle.cssの、
.small-screen #menubar > div {
の中にある、以下の行です。
max-width: 70%;
これよりコンテンツ量が少なければその分メニューが記載されているブロック幅も狭くなります。
※当テンプレートのメニュー関連のコードは2024年4月最新版を使っています。
基本的な動作チェックは行いましたが、様々な動作チェックをされた場合に不具合が発生する可能性があるので、発見された際はお手数ですがサポート掲示板からご連絡下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。
bg1背景画像について
使い方
<section>
を、
<section class="bg1">
にするとこのように背景装飾ボックスになります。
背景画像は入れ替えることもできます。
imagesフォルダに「bg1_top.png」と「bg1_bottom.png」があるのでお好みの画像に入れ替えます。
その後、cssフォルダのstyle.cssを開き、
/*bg1ブロック（色がついた装飾タイプのブロック）
でテキスト検索をかけて下さい。
設定方法などはコメントで記載されています。
文字が入っている部分
単色の背景色で指定します。タイプにより、style.css冒頭の
--bg1-colorで設定するものもあれば、直接.bg1内で設定している場合もあります。
テキスト専用のフェードイン効果について
class="fade-in-text"を指定すると、この見出しのようなフェードイン効果になります。
アニメーションの速度などの調整は、cssフォルダのstyle.cssから「.char」でテキスト検索をかけて下さい。説明もコメントで書いています。また、jsフォルダのmain.js内にも設定箇所があります。
お好みで調整して下さい。
ポップアイコン
トップページで使っているポップアイコンです。img要素にclass="pop1"とすればOKですが、他のブロックで使う場合はコツがいります。
テキストもアイコンもセンタリングしたい場合、ここのhtmlのようにh2の外側に<div class="c">〜</div>を追加して下さい。
通常のh2要素の中に入れると
こんな感じで画面サイズによっては端っこにアイコンが出てしまいます。
インラインのh2でアイコンは左に
これはh2要素にinline-blockを指定し、アイコンにleftというclassを追加した例です。
お好みで使い分けて下さい。
アイコンはどんなものでもOKです。htmlに直接配置して下さい。
アイコン部分が他の要素に重なってしまう場合があるので、その際は余白を作って下さい。
ギャラリー
