当テンプレートの使い方
初心者向けマニュアル公開中
画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。
titleタグ、copyright、metaタグ等の設定
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>初心者向けホームページテンプレート tp_beginner9</title>
を編集しましょう。
あなたのホームページ名が「Sample Company」だとすれば、
<title>Sample Company</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Sample Company All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
サイト名（ロゴ）はテキストになっています
html側の「Sample Company」というテキストを直接入れ替えて下さい。
自作の画像ロゴに置き換えたい場合
ロゴ画像を準備したら、logo.pngにしてimagesフォルダに保存します。
次に、全htmlの、
<h1 id="logo"><a href="index.html">Sample Company</a></h1>
を、以下にすればOKです。この場合も「Sample Company」は書き換えておきましょう。
<h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="Sample Company"></a></h1>
ロゴの作り方については、初心者向けマニュアル(画像加工ソフト「Pixlr Editor」で画像を編集する（9:58）)で解説しています。
ロゴの画像幅は、cssフォルダのstyle.cssの、
#logo img {
の中にあるwidthの値で変更できます。
フォントサイズについて
cssフォルダのstyle.css冒頭で、基準となるフォントサイズを「２箇所」記載しています。
全体的にフォントサイズを大きくまたは小さくしたいなら、この基準サイズだけを変更すればOKです。
１つ目はstyle.cssの50行目前後に記載されている以下。
font-size: 13px;
２つ目はその数行下にある、画面幅900px以上の端末向けで、以下。
font-size: 16px;
お好みで変更して下さい。
左のメニューについて
画面幅が900px以下で、左のメニューが開閉ブロックタイプになります。
この数値を変更したい場合は、jsフォルダのmain.jsの、
if(window.innerWidth <= 900)
の、900の数値を変更して下さい。
テンプレートのカラー定義
cssフォルダのstyle.cssの冒頭に、
--primary-color
や、
--primary-inverse-color
という行がありますが、そこがこのテンプレートのテーマカラーを一括管理している場所です。
この２ヶ所をお好みのカラーコードに置き換えればテンプレート全体の色が一括変更できます。
--primary-colorはテンプレートのメインまたはアクセントカラー。
--primary-inverse-colorは、上のprimary-colorの対として使う色になります。
これらを読み込むには、
var(--primary-color)
や、
var(--primary-inverse-color)
と書きます。
もし他の色がいい場合は通常通り直接カラーコードで指定しなおして下さい。
↓Before
color: var(--primary-inverse-color);
↓After（赤色にしたい場合）
color: #ff0000;またはcolor: red;でもOK。
ul、ol要素
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
トップページのメイン画像
生成AIを使って当サイトで用意したもので、そのままご利用・編集頂いて問題ございません。
他の素材に入れ替えたい場合は以下ページをご覧下さい。
写真素材をお探しならこちら
イラスト素材をお探しならこちら
その他、テンプレートのカラーやデザイン変更などは
cssフォルダのstyle.cssで行って下さい。詳しい解説も書かれています。
cssの解説は、「/*」と「*/」の間にコメントとして入れています。「/*」と「*/」はcss用のコメントタグであり、飾りではないので削除をしないで下さい。もし解説を削除したい場合は、「/*」と「*/」含めて丸ごと削除して下さい。
うまく編集できない場合は
サポート掲示板からご質問下さい。対応可能な範囲内でサポートしております。