ホームページをもっとよくする!Jimdoワンポイント講座

ホームページをもっとよくする!Jimdoワンポイント講座

第23回目「ロゴ画像とページタイトル設定のコツ」

せっかく作ったホームページ、一人でも多くの人に見て、読んでもらいたいですよね。しかし「思うように表現できない」「うまく伝わらない」そんなケースが多いようです。このコラムでは、ホームページ作りに役立つ「ちょっとしたコツ」をご紹介いたします。
第23回目は「ロゴ画像とページタイトル設定のコツ」です。それでは、スタート!

ルドルフ

えーっと、うーんと・・・えいっ、えいっ


ルドルフ

ルドルフくん、何をしているの?


笑顔アリーナ

友達に頼まれて新しいホームページを作ってるんだよ。すごいでしょ!


ルドルフ

あら?ルドルフくん、ロゴもタイトル画像も設定していないのね。


笑顔アリーナ

うん・・・あとからやろうと思っていたんだけど・・・


ルドルフ

ひょっとして、やり方がよくわからないとか?解説しましょうか?


笑顔アリーナ

う、うん!!ありがとう、アリーナちゃん!


【ロゴ画像とページタイトル設定のコツ】

 

Jimdoのヘッダーには、「ロゴ」と「ページタイトル」の2か所、設定できる部分があります。レイアウトによっては「ロゴ」エリアしかないもの、あるいは「ページタイトル」エリアしかないものもありますが、ここでは両方設置されているパターンを例に解説します。

 

ロゴ画像やページタイトル設定をコツをおさえておくと、ホームページがより見やすくなったり、印象に残りやすくなります。ぜひ覚えて、活用してくださいね。

(1)「ロゴ」と「ページタイトル」の違い

まずはじめに「ロゴ」と「ページタイトル」の違いを覚えておきましょう。

「Barcelona(バルセロナ)」というレイアウトでは、以下のように「ロゴ」と「ページタイトル」が配置されています。

ロゴは「画像をアップロードする」エリア、ページタイトルはホームページの題名を、「文字を打って」入力するエリアです。

ロゴとは?

会社名や商品名、サービス名、雑誌名、団体名などの文字列を図案化したもの。「ロゴタイプ」の略。

▼ロゴのサンプル(企業名やサービス名が入っている図案・例)


▼「ロゴ」エリアをクリックしたところ

▼「ページタイトル」エリアをクリックしたところ

 

スマートフォンで確認すると、次のように反映されています。

(2)「ロゴ」エリアに画像を設定してみよう

会社名やサービス名などの正式ロゴがある場合は、Jimdoの「ロゴ」エリアに画像をアップロードして設定しましょう。以下の手順で進めます。

 

1) ログイン後「ロゴ」エリアをクリックします。

2) ファイルをアップロードする画面が表示されますので、設定したい画像を選んでクリックしましょう。

3)ロゴ画像が設定されました。

(3)ロゴをきれいに表示させるコツ

Jimdoにロゴ画像をアップロードした際、レイアウトによっては以下のように背景画像に重なります。

このときロゴの周りに白いフチ(余白)があると、見栄えがよくないことがあります。

 

ロゴの周りにある白い余白の部分を、「透明」にする処理をし、「gif」もしくは「png」形式で保存してから設定すると、きれいに表示されます。

(※「jpg」「jpeg」形式のままだと透明になりません)

ロゴの余白を透明にする方法
・ロゴを制作した担当者(会社)に「ロゴの余白を透明にしたデータが欲しい」と依頼する
・透明にする機能がついた画像ソフトで、処理をする
・ロゴを透明にするWebサービスを利用する(「ロゴ 透明 サービス」などで検索すると表示されます)

などです。もし難しければ、お近くにあるJimdoCafeで相談してみてくださいね。

▼ロゴの余白を透明にして、再度設定しました。

ロゴを新規で作りたい場合

新規で作りたい場合、自力で制作する、あるいはプロに依頼するのどちらかになりますが、クラウドソーシングというサービスを利用して作るという手もあります。比較的安価で、複数のデザイン提案を受けることができます。

ランサーズ:http://www.lancers.jp/

ロゴのサイズを知りたい場合

ロゴを設置するエリアの大きさは、レイアウトごとに異なります。詳しくは、Jimdoのヘルプページに一覧表が掲載されていますので、ご確認ください。

ロゴとヘッダーテキストの設定:http://jp-help.jimdo.com/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/%E3%83%AD%E3%82%B4%E3%81%A8%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A/

(4)タイトルを設定してみよう


今度は「ページタイトル」を設定してみましょう。(「ページタイトル」エリアがないレイアウトもあります。)

 

1) ログイン後、「ページタイトル」エリアをクリックします。

2)文字が入力できます。あらかじめ入力されていた文字は消して、設定したい文字を入れていきます。入力し終わったら「保存」をクリックしましょう。

3)ページタイトルの文字の大きさや色などを変更したい場合は、「スタイル」機能を使用します。右側のツールバーから「スタイル」をクリックしましょう。

4)マウスがペンキを塗る刷毛状になりますので、「ページタイトル」へ合わせてクリックします。

5)以下のような画面が表示されるので、好みに合わせて設定しましょう。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②フォント ページタイトルの文字のフォントを変更することができます。Pro、Businessにアップグレードすると、使用できるフォントの種類が増えます。
③フォントサイズ タイトル文字の大きさを変更できます。
④太字 文字を太字にします。
⑤斜体 文字を斜めにします。
⑥フォントカラー 文字の色を変更することができます。
⑦配置 文字の配置を、左・中央・右へ変更することができます。
⑧文字設定 英字を使ったときの大文字、小文字の設定ができます。

「ページタイトル」と「ロゴ」は、必ずしも両方使わなければならないということはありません。「ロゴだけ」、あるいは「ページタイトルだけ」という使い方も可能です。

 

輝くルドルフ

できたー!アリーナちゃん!ロゴもページタイトルも設定してみたよー!


ウインクアリーナ

よかったわ、ルドルフくん♪


まとめ

Jimdoのヘッダー部分には「ロゴ」と「ページタイトル」を設定できる箇所があります。(レイアウトによっては、「ロゴのみ」「ページタイトルのみ」のパターンもあります)

この部分はホームページの「看板」ともいえる場所なので、ぜひ有効に使ってくださいね。


ルドルフの小言

泣くルドルフ

ホームページを良くしていくのってなかなか難しいよね。

詳しい人に相談できるといいんだけど・・・


ウインクアリーナ

そんな時はJimdoCafeがオススメよ!

JimdoCafeのことは、ここのページを見てみて!

▶︎▶︎ Jimdoユーザーの駆け込み寺「JimdoCafe」