ホームページ作成サービス「グーペ」の15日間無料体験でお店のホームページの体裁を整えるまでを図解しながら紹介しています。

 15日間は無料ですので、とりあえず試してみてください。⇒グーペの始め方はこちら

グーペで作成中のサンプルホームページ

 これまでカスタマイズしてきたホームページのトップページです。

【PC】
goopetop11.png

【スマホ】
goopetop12.png

 なんか気になりますよね?

 そうです。ホームページのタイトルが、イマイチかっちょ良くないのです。キーワードだかなんだか知らないけど、長ったらしい名前つけて、しかも変な所で改行しちゃてるじゃないかっ!

というわけで、このタイトル部分を画像にします。

 画像にすることで、このホームページのタイトル(キーワード)はそのままに、見た目を良くできるのです。

PIXLR EDITORでタイトル画像を作成する

 まずはホームページのタイトルの画像を作るところからです。

 凝ったタイトル画像を作るとなると、それなりの技術が必要になってきますが、文字を画像にする程度であれば、それほど難しくありません。

 タイトル画像を作成できるソフトは色々ありますが、今回は「PIXLR EDITOR」というWEB上で使えるソフトを使ってみました。インストールしないで使えるのでお手軽です。

 まず「PIXLR EDITOR」にアクセスします。

 「新しい画像を作成」をクリックします。

Goopelogo

 名前は適当な名前をつけます。私は”さんぷるタイトル”としました。

Goopelogo2

 幅を400にして、高さを100にします。(ホームページのデザインOneplateの画像タイトルロゴのサイズです)

 透明にチェックを入れて「OK」をクリック。

 すると、こんな画面になります。PIXLR EDITORは高機能なソフトなので、いろんなことができます。

 ですが、大丈夫です。今回使うのは「A」と書いてあるやつだけです。

Goopelogo3

 「A」をクリックしたら、”書くところ”をクリックします。

 今回は”Cafe Dining さんぷる”というタイトル画像を作ります。”Cafe Dining”と”さんぷる”の文字を分けて、それぞれ違う書体、サイズにします。

 まず”Cafe Dining”の文字から。

テキストのところに”Cafe Dining”と書きます。

Goopelogo4

 フォントのところの三角をクリックすると、いろんなフォント(書体)がズラーっと出てきます。英語名ですが、気にせずカーソルをのっけると、入力した文字がその書体になるので、好きな書体を選んでください。

Goopelogo5

 ”Academy Engraved LET“というのにしてみました。

 あとは、サイズスタイルを選びます。

Goopelogo6

 サイズで文字の大きさを決めます。

 スタイルは、レギュラー、太字、斜体、太字&斜体から選びます。

 ”Cafe Dining”の文字はサイズ30、スタイルはレギュラーにしました。

 今度は色です。色のところをクリックすると

Goopelogo7

 こんな感じに色を選択するウィンドウが開きます。ここで選んでもいいんですが、「WEB」というところをクリックして

Goopelogo8

 ここから色を選びました。グレーです。「OK」をクリック。

Goopelogo9

 文字がグレーになりました。

 この文字をドラッグして、左上に移動させます。

Goopelogo10

 これで「OK」をクリック。

 今度は”さんぷる”を入力していきます。”書くところ”の適当なところをクリックして、テキストのところに”さんぷる”と入力して、フォント(書体)を選びます。

Goopelogo11

 フォントは”Hiragino Mincho Pro“を選びました。”ヒラギノ明朝プロ”です。

 ”Cafe Dining” と同じように、サイズ、スタイル、色を決めます。

 サイズは83、スタイルは太字、色はさっきと同じ色のグレーです。蜂の巣のような色を選ぶとこから選べば、色を揃えるのも簡単です。

 フォントのサイズは、文字数によってかなり変わってきますが、この”書くところ”になるべくいっぱいになるように、できるだけ大きく書きます。

 最後に、文字のサイズ、場所などを調整しながら、これだ!というタイトル画像に整えます。

 完成したタイトル画像です。

Goopelogo17

 いかんせん名前が”さんぷる”ですから締まりませんが。

PIXLR EDITORでタイトル画像を保存する

 PIXIR EDITORはWEB上で使えるソフトです。作ったタイトル画像もWEB上にあるってことになります。これを自分のPCに保存します。

 左上の「ファイル」から「保存」をクリックします。

Goopelogo13

 フォーマットのところから、PNG(透過、フルクオリティー)を選択して、「OK」をクリックします。

Goopelogo14

 今度は、自分のPCのどこの保存するか聞いてくるので、分かりやすいところに保存しておきます。私はデスクトップにしときました。

Goopelogo15

 「保存」をクリック。

 これで自分のPCに保存されました。

Goopelogo16

タイトル画像をホームページに設定する

 作ったタイトル画像を今度はグーペの管理画面からホームページに設定します。

  ホームページ設定の「基本設定」をクリックします。

Goopelogo18

 「ロゴ画像設定」をクリックします。

Goopelogo19

 サイトロゴを画像で表示のポッチをクリックします。
Goopelogo20

 「ファイルを選択」をクリックして、作成したタイトル画像を選択します。
Goopelogo21

 「開く」をクリック。
Goopelogo22

 「更新する」をクリックします。
Goopelogo23

 ロゴのサイズは、Originalのままで大丈夫です。

Goopelogo24

 これで、やっとタイトルを画像に変更することができました。左上の「サイトを確認」から自分おホームページを見てみましょ。

【PC】
goopelogo25

【スマホ】
Goopelogo26

 ちゃんとタイトル画像が入っていますね。最初と比べるとかなりいい感じです。

 これでトップページは、見られる感じになりました。

 ゆくゆくは凝ったタイトル画像にしたり、大きな画像にしたりして、もっと自分のホームページらしさをうち出していくこともできます。


グーペで作成中のサンプルホームページ