初心者でも作る 文字を可愛く装飾する サロンHP作成方法

初心者でも、お客様がみてわかりやすいHPの内容にするために、デザインでテーブルで綺麗にして、文字で、伝えたいことを伝わるように各たまに、文字の装飾をします。
色々なパターンがありますが、まずはどんなことができるのかを知ってください。

初心者でも作れるサロンHP作成方法の文字を可愛く装飾する

 

初心者でも作れるサロンHP作成方法の文字を可愛く装飾する

先ほどのテーブルの続きで、次はお客様に見やすくするためのデザイン自体ではなく、

文字で訴える為の文字の装飾の方法を説明します。

まずは基本を説明しますので、ドンドン自分でアレンジしてみてくださいね。

広告

 

 

 

 

先ほどのテーブルの続きから説明していきますので、テーブルの部分をアクティブにしてください。

 

文字の太さ等の装飾に使うのはメニューバーの青枠の部分になります。

ワードや、パワーポインタなどでもお馴染みのマークですが、これらを使ってそうさします。

 

フォントの装飾の方法説明

 

下記の画面の ””こんにちは”” と書いてある文字を赤字で大きくしていきます。 (画像では既になってますが・・・)

まず、 ””こんにちは”” と普通に書いてある文をドラック&ドロップで 黒く反転 させます。(←文字に対してアクティブになっている状態です。)

そして、上記画面の青枠の中の ”””B””” とかいてある部分をクリックします。←この時点で、太字になっています。

次に、上記の画像の青枠のすぐ隣のパレットみたいな絵をクリックします。

そして、カラーの中から 赤色 を選びクリックすると、下記の画像のように、赤文字で太字にする事ができます。

また、続けて、 ””こんにちは”” を黒く反転させてから、青枠の ””I”” や ””U”” や ”ABC” もクリックしてみてください。

それぞれ、色々な装飾文字にできますので、ご自分でやってみてください。 

 

HP作成時のフォントの装飾

 

 

 

 

 

 

 

 

 

次に字体の説明です。

初めに説明すると、自体はイロイロ変えれます。可愛いものや、かっこいいもの、手書き風なものまで多種ありますが、

javaで字体を設定しないと、いくらここで可愛い文字に設定しても、サーバーで普通の文字にされちゃいますので意味がありません。

使用できるものは、通常ワードで使用できるようなものだけになります。

 

理由は、多分ですが、お客様に読んでもらう時に文字を可愛くする必要がないからです(笑

 

読んでもらうためのHPなので、読んでもらいやすい書体しかありません。

もちろん、javaで設定したり、サーバーにプログラムをおけば、可愛い字や手書き風にHPを作れますが、

今現在の時点では、一番お客様が見やすく、反応が高いのが、普通に書いた黒文字なのです。

 

ですが、教科書みたいな文字や、習字みたいな文字であれば使えますので、ここではそれを説明します。

 

HP作成ソフトのメニューバー 初心者説明

 

先程 ””こんにちは”” を赤字の太文字にしたので、今回は真ん中のテーブルで書体変更をします。

ちなみに、この場でやっている書体は、サーバーにUPしてみると MSフォントに戻ってます。

理由は先程も言いましたが、サーバーに書体をおいてないのとjava等で設定していないからです。(多分ですが)

 

まずは、書体を変えたい文をドラック&ドロップで黒く反転させます。(さっきと同じで、アクティブにします)

次に、上記のフォントの部分で変更したい書体、フォントに変更します。

それだけです。 MSフォントだけではないので、特に何もしなくても、よく使われる書体であれば変更できるようですが、

基本、私は文章をしっかり読んで欲しいので、書体は変えません。 ※部分と場合によります。

 

書体を変えて、目立たせて見せたい時は、画像を使用します。

画像であれば、javaもサーバーも何も触らずに、そのまま伝えたい文字で、使えたい事を伝えれますので。

 

以下の画像が、テーブルの真ん中部分の書体を変えた、HP編集画面です。

プレビューでも変わっているように見えますが、サーバーにUPしてインターネットから見ると・・・・  実際にやってみてくださいね。

 

文字を装飾して見やすくする方法

 

 

 

 

 

 

 

 

 

 

次は、文の位置設定です。

cssを使えば、画像の回り込み等も設定できますが、今回の場合は、cssを使わずに、文字の位置を変更する方法です。

 

初心者でも作れるHP作成方法説明

 

上記の青枠の部分で、へんこうします。

下記の画像のテーブルの2段目を見てもらえればわかりますが、

テーブルの枠の中で、文字が、 左より、 真ん中より、 右寄り になってます。

 

先ほどと同じく、変更したい文をドラック&ドロップで黒く反転させてから、上記の青枠を押して見ると、

その枠のなかで、寄せる方向が変わります。

広告

ちなみに、テーブル以外でももちろん使用できますので、

トップページなどで、真ん中寄せをつかってもかっこよくなります。 (わたし的にはおすすめしませんが)

 

HP作成方法位説明の画像

 

 

 

では次は、いよいよHPの全体のデザインが変わっていく、画像の挿入方法です。

まだ画像の編集方法は説明してませんが、まずは挿入方法を覚えて、画像を作りしだいスグに入れれる状態にしておきます。

広告

HP作成過程

 

1 実際にアナタのサイトを作っていく順番説明

サイトを一通り読み終えたら、それを元にして、イヨイヨ完全無料でのサロンのHPを作成していきます。その手順を順番にかいてます。

2 あなたのHPになるテンプレートダウンロード

まずは、あなたのサロンのHPの元になるテンプレートをダウンロードします。
イロイロ分かるようになってきてから、完全オリジナルに編集していきます。

3 当サイトで使用無料作成ソフト 初心者向き説明 

当サイトで使用する完全無料のソフトの紹介です。このページから一括でダウンロードする事もできます。

4 HP作成後の集客出来るHP作成説明の
PDF・動画説明を見る

HPを作成した後の、テクニックの紹介です。コレをできるようになれば、今の私とまったく同じ知識がついているのと同じになります。SEOやHPの集客を強くするコツです。