crescent eve（ホームページ編集ソフト）の使い方...

Crescent Eveの

（ホームページ編集ソフト）

のテンプレート編集方法

下に続きますCopyright (C) TempNate All Rights Reserved.

このマニュアルでは、TempNateが配布しているテンプレートを

編集するための方法を解説しております。

マニュアルの手順を参考にしながら、ホームページを作成してく

ださい。宜しくお願いいたします。

テンプレートを編集して完成したホームページの例

Copyright (C) TempNate All Rights Reserved.

テンプレート素材のダウンロード方法


http://tempnate.com/

TempNate

まず初めに、TempNateにアクセスして、

お好みのテンプレートをダウンロードしてください。（無料）


http://tempnate.com/responsive/

コチラの詳細ページから素材をダウンロードできます

スマホ対応テンプレート（レスポンシブテンプレート）

ダウンロード


Startupシリーズ

ZIPファイル

フォルダ

上記のように、デスクトップなどに、

中身のフォルダを取り出して保管してください。

（ZIPファイルとフォルダが２つある状態）

ホームページファイルの取り扱いについて

※ZIPファイルとは、ファイルのサイズを小さくするために

圧縮されたファイルのこと。

そのままではファイルを使用できないため、

中身のフォルダをコピーして

デスクトップなどにペーストしておいてください。

ダウンロードしていただいた

テンプレート素材のファイルは、

ZIPファイル形式になっています。


テンプレート素材のファイルのご説明


※テンプレートによって中身が変わります。


Terapad

Crescent Eve など


テンプレートの編集方法

テキストエディターのご紹介


無料のテキストエディターで人気ソフトの「 Crescent Eve 」をご紹介いたし

ます。下記URLからダウンロードしていただけます。

●Crescent Eve（フリーソフト）https://forest.watch.impress.co.jp/library/software/crescenteve/

→老舗のフリーソフト紹介サイト「窓の杜」からダウンロードできます。

Crescent Eve

Crescent Eveでテンプレートを開いた時の表示例です。

無料のテキストエディター「Crescent Eve」


テンプレートの編集方法

HTMLファイルを編集する手順


テキストエディターを立ち上げてください。

次に、HTMLファイルを開いてください。


CLICK

CLICK


このように、HTMLファイルの中身が表示されます

HTMLソース

（プログラムの中身）

日本語の部分を書き換えていきましょう。


見本サイトのトリミングサロン「トリミングネート」

の中身の内容を参考にしながら解説していきます。

トリミングサロン「トリミングネート」


<title>

ホームページ・タイトル

</title>

●ページのタイトル

まず初めに、ページのタイトルを記入しましょう。

修正前

修正後

<title>

天府市のトリミングサロンなら「トリミングネート」

</title>

下記を参考にしてテキスト文字を記入してください。


<h1>

こちらにはメインキーワードや紹介文を入れてください

</h1>

修正前

修正後

●H1タグ（１行紹介テキスト）


<h1>

天府市のトリミングサロン「トリミングネート」

</h1>


<h2><a href="index.html">

テンプレートカンパニー

</a></h2>

修正前

修正後

●サイトタイトル


<h2><a href="index.html">

トリミングネート

</a></h2>


<p class="h_sub">

Template Company

</p>

修正前

修正後

●サイトタイトル下のサブタイトル


<p class="h_sub">

Salon de TrimmingNate

</p>


修正前

修正後

●ナビゲーション

店舗案内に変更へ


<h2>

私たちが選ばれる６つの理由

</h2>

修正前

修正後

●選ばれる理由の見出しタイトル


<h2>

トリミングネートが選ばれている６つの理由

</h2>


修正前

●選ばれる理由の本文 (1～3)



修正後




修正前




修正後




修正前

●ごあいさつ



修正後

●ごあいさつ



修正前

●サービスのご案内（サービス１）



修正後

●サービスのご案内（サービス１）



修正前


●サービスのご案内（サービス２）


修正後


●サービスのご案内（サービス２）


修正前


●サービスのご案内（サービス３）


修正後


●サービスのご案内（サービス３）


修正前

●会社概要（基本情報など）


修正後



修正前



修正後



修正前

●お問い合わせ


修正後

●お問い合わせ


修正前

●最新情報＆更新情報



修正後

●最新情報＆更新情報



修正前

●ナビゲーションフッター


修正後

●ナビゲーションフッター

店舗案内に変更へ


<p class="copy">

Copyright (C) 20xx SITE NAME All Rights Reserved.

</p>

修正前

修正後

●フッターのコピーライト表記


<p class="copy">

Copyright (C) トリミングネート All Rights Reserved.

</p>


ブラウザを立ち上げて、表示を確認してみましょう。

「ツール」→「ブラウザプレビュー」から、

ブラウザを選択してください。

この様な手順を繰り返して、ホームページの表示を

確認しながら、本文などの内容を編集してください。


Crescent Eveで画像を掲載する方法

Crescent Eveでホームページに画像を掲載する方法をご説明いた

します。

まずはホームページに掲載したい写真ファイルを用意しましょう。

写真ファイルをご用意いただいて、テンプレートフォルダの中にあ

る「img」フォルダの中に入れておいてください。

imgというフォルダには

すべての画像ファイルが入っています。

こちらに新しくホームページに掲載する

写真を入れてください。

imgフォルダを開くと、

中にある画像ファイルが表示されます。

こちらの中に掲載したい写真ファイル

を入れておいてください。

Crescent Eveを立ち上げて、

先ほどの写真ファイルの場所から

画像を呼び出してホームページに

表示してみましょう。


Crescent Eveで画像を掲載する方法

するとホームページに写真が

表示されます。

（１）写真を掲載したい場所をクリック

（２）像の挿入をクリック

テンプレートフォルダの中にある

Imgフォルダをクリックしてください。

先ほど用意しておいた写真ファイルを

選択してください。


ブラウザで表示を確認するとこのように表示されます。


indexというファイルをダブルクリックして

開いて確認することができます。

実際のサイトの表示の確認方法について


お疲れさまでした。

以上でページの編集が完了です。


メインビジュアル画像の変更方法について


メインビジュアル画像とは

最初に表示される大きなイメージ画像のことです。

メインビジュアル画像

横幅：１２００px

縦幅：

６００px

画像のサイズについて


画像のフォーマット（種類）について

ホームページに使用する画像は、3種類のフォーマットがあります。

当テンプレートでは、「gif」「jpg」「png」を使用しています。

画像名の後に、「.jpg」という名前がついています。

こちらが画像ファイルです。

メインビジュアル画像の例（PNG画像）

画像ファイルは

「img」フォルダの中にあります。


メインビジュアル画像は「img」フォルダにあります。

「img」フォルダは、画像ファイルが入っているフォルダです。

メインビジュアル画像がある場所



こちらがメインビジュアル画像のファイルです。

head_img.png

PNGという画像フォーマットです。

メインビジュアル画像を差し替える場合は、

必ず同じファイル名の画像を作成して

上書き保存をして差し替えてください。


（１）新しいメインビジュアル画像を作成します。

PNGという画像フォーマットで作成してください。

（３）画像を「img」フォルダ内に上書き保存してください。

というファイル名で作成してください。

head_img.png（２）

コピー＆ペーストなどで張り付けると上書き保存できます。

画像を上書き保存して差し替える手順

上書き後の例


画像のサイズを確認する方法

（１）メインビジュアル画像を選択します。

（２）マウスを右クリック →「プロパティ」をクリック

「詳細」をクリックすると、画像のサイズが確認できます。

幅が「横幅」です。高さが「縦幅」です。

※レスポンシブテンプレートでは、

横幅は900px～1200pxとなっております。






サイトの表示の確認方法について


写真素材の無料配布サイトのご案内

写真AC - フリーフォト、無料写真素材サイト

https://www.photo-ac.com/

ぱくたそ - フリーフォト、無料写真素材サイト

https://www.pakutaso.com/

足成 - フリーフォト、無料写真素材サイト

http://www.ashinari.com/

Pixabay - 商用利用可 [海外サイト]

https://pixabay.com/ja/

ピクスタ – 高品質な写真素材 [有料]

https://pixta.jp/

有料

無料

おすすめの写真素材配布サイトをご案内いたします。


ペイントでのメインビジュアル画像作成方法

まずは、ご自分で用意された、オリジナル写真を用意しましょう。

そして画像編集ソフトなどを利用してサイズを編集します。

画像のサイズの変更は、Windowsなどに付属されている

「ペイント」などのソフトでも画像のサイズを変更できます。

上記画像の様に、あたらしく画像を変更しましょう。


ペイントでの画像サイズ変更方法

（Windowsなどに付属しています）

使用したいお手持ちの写真（画像）を、デスクトップなどに

コピーをして用意しておいてください。

Windowsの場合、左下の「スタートボタン」

→「すべてのプログラム」→「アクセサリー」→「ペイント」

を開きます。

※ペイントを開いた画面


次に、ペイントのメニューから、

「ファイル」→「開く」→「デスクトップ」→「画像ファイル名」

をクリックして用意しておいた新しい画像を開きます。

「ファイル」から、「開く」をクリック。

デスクトップなどに用意した、画像を選択します。


それでは、デジカメなどで撮影した写真をホームページのメイン画像に使用しましょう。

そのままではなく、切り抜いて使用する手順を紹介いたします。


すると、そのサイズで画像が切り抜かれます。


画像の横幅をホームページ掲載サイズに整えます。「サイズ変更」をクリックしてください。

1200


メインビジュアル画像は「img」フォルダに入っています。


画像を「img」フォルダ内に上書き保存してください。

メインビジュアル画像の上書き方法


PNGという画像フォーマットで作成してください。

というファイル名で画像を作成してください。

head_img.png


上書き後の例

上書きする画像ファイルの注意点

head_img.png

※ブラウザでホームページを確認した際に、画像が差し変わって

いない場合は、画像ファイル名が間違っている可能性があります。


ペイントを活用した画像サイズの変更方法


【ペイントでの画像サイズ変更方法】

ホームページの本文などで使用する写真素材のサイズの変更方法を

ご説明いたします。

ピクセルをクリック

ペイントを立ち上げて、写真を開いて「サイズ変更」をクリック


横幅

高さ

こちらの画面から写真の横幅や高さを変更できます。

最後に保存してください。

ファイルが保存されます。


写真ファイルは「img」フォルダに入っています。

保存した写真を「img」フォルダ内に上書き保存してください。

写真の上書き方法


同じファイル名で画像を作成してください。





すでにある画像を上書き保存する場合は、

同じファイル名で画像を作成してください。





point01.jpg

point01.jpg

本文箇所で使用している写真はJPGという形式のファイルになります。






お客様の声


HTMLテンプレート形式の特徴について


トップページ

アクセスページ

お問い合わせページ

転送アップロード

HTMLテンプレート形式は、ファイル型ホームページです。

HTMLファイルと呼ばれるファイルを、必要なページ数だけ作成

して展示しておくホームページ構築方法です。

Webスペース（サーバー）

展示（設置）

※ ３ページの例

トップページの例


【ホームページを表示する方法】

（１）読者が、ウェブブラウザから

「.com」などのアドレスを入力して

リクエストすることで、ファイルを

呼び出して表示します。

【HTMLファイル形式の特徴】

・管理画面がありませんので、定期バージョンアップのメンテナンスは必要ございません。

・３ファイルをパソコンに保管しておくことがバックアップになります。

（２）サーバーにあるファイルの

内容のホームページが表示されます。

～～～.com/responsive/model/trimmingnate/

トップページの例


レンタルサーバーの選び方


レンタルサーバーとは？

ここでは、レンタルサーバーについてご説明いたします。

レンタルサーバーとは、サーバーを貸し出すサービスのことです。

作成をしたホームページを、インターネットで一般公開するために必要になります。


ホームページを開設する手順

（１）ホームページファイルを作成する

（２）レンタルサーバを利用する

（３）レンタルサーバーにホームページファイルを設置する

（４）ホームページが表示されます

このように、まずホームページファイルを作成して、レンタルサーバーを利用していただきます。

そして、ホームページファイルをサーバーに転送（アップロード）して設置をします。

これにより、ホームページが表示されるようになります。

レンタルサーバーの種類と特徴

レンタルサーバーは、無料と有料のサービスがあります。


無料のレンタルサーバーについて

XFREE

https://www.xfree.ne.jp/


おすすめの有料レンタルサーバーのご案内

ロリポップ（月100円）

https://lolipop.jp/

さくらのレンタルサーバー（月130円ほど）

https://www.sakura.ne.jp/


独自ドメインについて

「.com」などのホームページアドレスを取得したい場合は、

「ムームードメイン」「お名前.com」などのサービスが人気です。

（※ムームードメイン引用）

ドメインとは、ホームページのURLアドレスの事です。

よく、「.com」とか、「価格コム」などの言葉を聞くと思います。

「http://あなたのドメイン.com」


この "あなたのドメイン" の部分を自由に決める事ができます。

さらに、「.com」「.jp」「.net」などが自由に選べます。

費用は「.com」なら年間で1000円程度です。

商用などのホームページでは、最低限必要な料金になります。

「ムームードメイン」「お名前.com」などのサービスが人気です。

ドメインを取得されるさいは、このどちらかのサービスを利用してみてください。

ムームードメイン

https://muumuu-domain.com/

お名前.com

https://www.onamae.com/

なお、ドメインまでは必要ないという場合は、

レンタルサーバーのドメインをご利用いただけます。

レンタルサーバーでは、最初にサブドメインと呼ばれる

専用ドメインが用意されています。

そちらをホームページのアドレスとしてご利用いただけます。


ホームページファイル

のアップロード方法


無料のファイル転送ソフト「FFFTP」

●FFFTP（フリーソフト）https://forest.watch.impress.co.jp/library/software/ffftp/

→ 老舗のフリーソフト紹介サイト「窓の杜」からダウンロードできます。

FFFTP

FFFTPを開いた時の表示例です。

無料のファイル転送ソフトで人気ソフトの「 FFFTP 」をご紹介いたします。

下記URLからダウンロードしていただけます。


ここでは、FFFTPを活用したホームページファイルのサーバーへの

アップロード方法をご紹介いたします。

●まず初めに、FFFTPを開いてください。

●上メニューの「接続」から「ホストの設定」をクリック。

●すると、このような画面が表示されます。


●「新規ホスト」をクリックしてください。

●すると下記のような画面が表示されます。


●サーバーに接続するために、「FTP」情報を入力してください

※サーバーに接続するには、ご利用のレンタルサーバーに接続す

るための情報が必要です。FTP情報などと呼ばれています。

現在ご利用のレンタルサーバーの管理画面から確認してください。


【さくらのレンタルサーバーをご利用の場合】

さくらの管理画面である

コントロールパネルにログインしてください。

※さくらサーバーにお申し込みの際に、

ログイン情報がメールで届いていると思います。

左メニューにある

「サーバー情報の表示」 → 「サーバーに関する情報」をクリック

「FTP設定に関する情報」からFTP情報をみる事ができます。

※パスワード情報が記載されていませんが、パスワードはログイン時のパスワードと同じ事が多いです。（ローマ字の羅列など）

こちらの情報をFFFTPの画面に入力してください。


【ロリポップレンタルサーバーをご利用の場合】

ロリポップの管理画面（ユーザー専用ページ）にログインしてください。

＊ロリポップにお申し込みしていただいた

際にログイン情報がメールで届いています。

ロリポップ・ユーザー専用ページ

https://user.lolipop.jp/

ユーザー専用ページの左メニューにある

「アカウント情報」をクリックしてください。

「サーバー情報」という項目にＦＴＰサーバー情報が記載されています。

その中の「FTPサーバー」「FTP・WebDAVアカウント」

「FTP・WebDAVパスワード」という３つの項目をご覧下さい。

こちらのFTP情報を、FFFTPソフトの画面に入力してください。


【XFREEサーバーをご利用の場合】

まずはXFREEに登録してください。

そして管理画面にログインしてください。

XFREE

https://www.xfree.ne.jp/

こちらがXFREEに

ログインした画面です。

「HTML」の「利用を開始する」をクリックしてください。


クリックしてください。


サーバー管理パネルが表示されます。


「FTPアカウント設定」をクリックしてください。

こちらにFTP情報が表示されています。

FFFTPソフトで情報を入力してサーバーに接続できます。

ホームページファイル一式をアップロードすることでサイトが表示されます。

※詳細はXFREEのサイトをご参照ください。


「新規ホスト」をクリックしてください。

FFFTPを立ち上げて、上メニューの「接続」→「ホストの設定」を


FTP情報の入力方法


サイト名などを記載して下さい ftp ～など

temptemp など

CLICK

この画面で、サーバーに接続するための

FTP情報を入力してOKをクリックしてください。

・ホストの設定名 → サイト名などでOK。こちらは自由に設定していただけます。

・ホスト (アドレス) → レンタルサーバーのFTP情報を記入してください

・ユーザー名 (ユーザーＩＤ) → レンタルサーバーのFTP情報を記入してください

・パスワード → レンタルサーバーのFTP情報を記入してください


そしてメニューの「接続」から、先ほど作成したホスト名を選択して「接続」をクリックしてください。

トリミングネートのHP

CLICK

サーバーに接続されます。下記のような画面が表示されます。

左側右側

パソコン内

のファイル

こちらがサーバーにある

ファイルです。


右側がサーバーにあるファイルになります。

右側にファイルをアップロードして下さい。

左側右側

パソコン内

のファイル

こちらがサーバーにある

ファイルです。

実際にホームページ・ファイルをサーバーにアップロード

しましょう。

デスクトップなどに用意してあった、ホームページファイル一式

のフォルダの中身をまとめて選択しましょう。

（index、imgフォルダ、cssフォルダ、jsフォルダ）


①ファイルを全部選択します

②ドラッグしながら…

③右側に、フォルダの中身をドラッグして入れてください

そのまま、FFFTPソフトの画面の右側に、

ドラッグする（マウスの左クリックを押したまま、

FTPソフトの右側で離す）だけでアップロードできます。


または、左側にホームページファイル一式を表示しましょう。

CLICK

デスクトップなどを

選択してください。

ホームページファイル一式

のフォルダを選択してください。

このように左側に

ファイルが表示されます。


ファイルを選択してください。

上矢印のアイコンをクリックするとファイルをアップロード

することができます。

※左側のアップしたいファイル名をクリックして選択すると

アップロードできる状態になります。（矢印の色が変わります）


imgフォルダを選択すると、画像ファイルをまとめて

アップロードできます。

cssフォルダ、jsフォルダも同じようにアップしてください。

すべてのファイルをアップロードして完了になります。

下記のようになっていれば成功です。左側と同じ状態にして下さい。

右側サーバーにある

ファイルです。左側


ホームページ・ファイルをサーバーに転送（アップロード）

した後は、アップロードしたサーバーのURLアドレスを入力して、

お使いのブラウザでホームページの表示を確認してみてください。

無事表示されれば完成です

http://triming～.com

注意点です


HTMLタグのご説明


■ＨＴＭＬタグについて

ホームページのレイアウトはHTML というマークアップ言語

（プログラム）で構成されています。

ホームページは、Internet Explorer などのブラウザでアクセスすると、

見やすくきれいに表示されていますが、実際は、裏でHTML という言語で

指令を出して構成されています。

「表」がGoogleクロームやFireFox（ブラウザ）などで見たホームページ

画面です。「裏」がHTML ソースです。

●タイトルタグ

<title>～</title> タイトルタグです。ここにはサイト名を記載し、

メインキーワードを配置しましょう。メインキーワードを先にもってくる、

というのも１つの方法です。また、テキストは35文字程度までに

抑えてください。こちらはSEOでは大変重要な項目です。

●見出しタイトルタグ

<h2>～</h2> これはブログでいう記事の見出し部分です。

「ごあいさつ」「更新情報」などコンテンツの見出しタイトルが入ります。


●本文タグ

<p>～</p> これはコンテンツ部分です。こちらに本文を記載しましょう。本文はなるべくこの「ピィ」のタグで囲んで下さい。

●画像表示タグ

<img> これは画像を表示するタグです。「.gif」「.jpg」でサーバーにある画像ファイルを指定します。その際は、かならず alt属性にキーワードを入れてください。

<img src="http://●●●" border="0" alt="画像のタイトル" / >

●強調タグ

<b>～</b> は文字を太字で強調するタグです。検索エンジンでは、普通の太字として認識されるようです。

●改行タグ

<br /> は改行です。


最後に


ホームページ作成の参考になれば幸いです。宜しくお願いいたします。

以上になります。最後までご覧いただき誠にありがとうございます。

テンプレートを編集して完成したホームページの例


http://tempnate.com/

TempNate

まず初めに、TempNateにアクセスして、

お好みのテンプレートをダウンロードしてください。（無料）

テンプレート素材のダウンロード方法


http://tempnate.com/responsive/

コチラの詳細ページから素材をダウンロードできます

スマホ対応テンプレート（レスポンシブテンプレート）

ダウンロード


Startupシリーズ

ZIPファイル

フォルダ

上記のように、デスクトップなどに、

中身のフォルダを取り出して保管してください。

（ZIPファイルとフォルダが２つある状態）

ホームページファイルの取り扱いについて

※ZIPファイルとは、ファイルのサイズを小さくするために

圧縮されたファイルのこと。

そのままではファイルを使用できないため、

中身のフォルダをコピーして

デスクトップなどにペーストしておいてください。

ダウンロードしていただいた

テンプレート素材のファイルは、

ZIPファイル形式になっています。


最後のページ

完


crescent eve（ホームページ編集ソフト） の使い方...

Documents

crescent eve（ホームページ編集ソフト）の使い方...