ホームページライフ 活用ガイド

ホームページ作成ガイド
かんたんサイト作成で、サイトを立ち上げてみましょう!

ホームページ作成ガイド

かんたんサイト作成ガイド編

STEP3 基本情報入力

  • STEP1 URL確認
  • STEP2 テンプレートの選択
  • STEP3 基本情報入力
  • STEP4 コンテンツ設定
  • STEP5 入力内容確認
  • STEP6 プレビュー
  • STEP7 サイト設置完了!
ロゴ画像がない場合
ロゴ画像がない場合、ロゴ画像を作成するか・もしくはテキスト入力で打ち込むかになります。ここでは、自分でロゴ画像を作成する方法をご紹介します。
ロゴ作成用のソフトや、画像編集ソフトでも作成できますが、ここでは一番簡単に、「フリーフォントで簡単ロゴ作成」というWeb上で使用できる「ロゴ・ジェネレーター」を使ってロゴ画像の作成を行います。

下記のURLにアクセスしてください。
◆フリーフォントで簡単ロゴ作成
http://lightbox.on.coocan.jp/html/fontImage.php



これが最初の画面です。赤枠の部分でサイズ・フォント・色などを編集し、赤枠の中の上の方にある青色の「変更」ボタンをクリックすると、青枠の部分に反映されます。
テキストの編集

これが最初の画面です。赤枠の部分でサイズ・フォント・色などを編集し、赤枠の中の上の方にある青色の「変更」ボタンをクリックすると、青枠の部分に反映されます。
 まずは、「表示するテキスト」部分を編集しましょう。最初の文章を消して、サイト名を入力します。

入力したら、「変更」ボタンをクリックして反映させてみましょう。
編集したテキストが反映されました。このように編集→反映して確認の要領で進めていきます。

速水不動産
サイズ・フォント・色の変更
 順番に編集していきます。
まずはフォントを決めましょう。
セレクトボックスからフォントを選んで、「変更」ボタンをクリックすると選んだフォントに反映されます。
ここでは少し堅めの印象にしたかったので、「VLゴシックフォントファミリ」にしました。
 次はサイズを整えましょう。
「幅・高さ」を変更します。
この「幅・高さ」というのが枠の大きさで、「サイズ」が文字の大きさを表しています。
幅は200px、高さは40pxに変更します。

「変更」ボタンをクリックして反映させると、ロゴ画像が切れてしまいました。
「サイズ」と「x座標」「y座標」の数値を変更して、文字が枠の中にちょうど良く収まるように修正します。
色の変更

サイズの調整が完了したら、次は色を決めます。
右のカラーチャートで、「背景」「テキスト」「画像枠」の色を変更します。
「画像枠」はあまり設定する必要はありません。「背景」「テキスト」は自分が選んだテンプレートのカラーも考慮して、見やすい色を選択しましょう。



カラーチャートの中でカーソルを動かすと、左上の枠の色が変更されます。
左上を確認しつつ、まずはテキストのイメージに合う色を探しましょう。
 色が決定したら、カラーチャートの下の、「テキスト」ボタンをクリックします。すると、テキスト色の部分が選んだ色に変更されます。



「変更」ボタンをクリックすると文字色が変更されます。
背景色も同じ要領で変更してください。

 色の調整が完了したら、保存します。
画像の上で右クリックするとメニューが現れるので、「名前を付けて画像を保存」をクリックしてください。
※画像はPNG形式で保存されます。
ただし、透過はされないので、透過画像にしたい場合は更にこちらの手順を踏んで画像を透過してください。
 名前は何でもいいですが、logo.pngなどにしておくとわかりやすいでしょう。

「保存」ボタンをクリックして保存します。
このページの先頭へ