![ロゴ画像とページタイトル設定のコツ](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=jpg/path/s0e84577b02fd7261/image/ibf9e359c11be52a1/version/1548294475/%E3%83%AD%E3%82%B4%E7%94%BB%E5%83%8F%E3%81%A8%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%82%B3%E3%83%84.jpg)
ホームページを作成する上で、忘れてはいけないのが「ロゴ画像」と「ページタイトル」の設定です。素敵なホームページができても「あなたの」ホームページだと理解してもらうためには「ロゴ」と「ページタイトル」が必要です! 設定の方法も難しいものではありませんので、一緒に一から見ていきましょう。
1. 「ロゴ」と「ページタイトル」の違い
Jimdo のヘッダーには、「ロゴ」と「ページタイトル」の 2 か所、設定できる部分があります。レイアウトによっては「ロゴ」エリアしかないもの、あるいは「ページタイトル」エリアしかないものもありますが、ここでは両方設置されているパターンを例に解説します。
まずはじめに「ロゴ」と「ページタイトル」の違いを覚えておきましょう。
「Barcelona(バルセロナ)」というレイアウトでは、以下のように「ロゴ」と「ページタイトル」が配置されています。
![「ロゴ」と「ページタイトル」の違い](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/ie3fa80afc7772b35/version/1548293499/%E3%83%AD%E3%82%B4-%E3%81%A8-%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB-%E3%81%AE%E9%81%95%E3%81%84.png)
ロゴは「画像をアップロードする」エリア、ページタイトルはホームページの題名を、「文字を打って」入力するエリアです。
ロゴとは?
会社名や商品名、サービス名、雑誌名、団体名などの文字列を図案化したもの。「ロゴタイプ」の略。
▼ロゴのサンプル(企業名やサービス名が入っている図案・例)
![Jimdo ロゴ](https://image.jimcdn.com/app/cms/image/transf/dimension=220x10000:format=png/path/s0e84577b02fd7261/image/i222ca712e90ca1bc/version/1548291615/jimdo-%E3%83%AD%E3%82%B4.png)
![CPI ロゴ](https://image.jimcdn.com/app/cms/image/transf/dimension=220x10000:format=png/path/s0e84577b02fd7261/image/i7ef22e4f724508f4/version/1548291622/cpi-%E3%83%AD%E3%82%B4.png)
![Twillio ロゴ](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i3e40555c167905a3/version/1548291639/twillio-%E3%83%AD%E3%82%B4.png)
▼「ロゴ」エリアをクリックしたところ
![Jimdo 操作画面:ロゴエリアをクリックしたところ](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/ide616aece6bf8373/version/1548293506/jimdo-%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%83%AD%E3%82%B4%E3%82%A8%E3%83%AA%E3%82%A2%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D.png)
▼「ページタイトル」エリアをクリックしたところ
![操作画面:ページタイトルエリアをクリックしたところ](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i3a7374d0ff4eb88a/version/1548293511/%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%A8%E3%83%AA%E3%82%A2%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D.png)
スマートフォンで確認すると、次のように反映されています。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ie2bc6cfaf216ded2/version/1548293517/image.png)
2. 「ロゴ」エリアに画像を設定してみよう
会社名やサービス名などの正式ロゴがある場合は、Jimdo の「ロゴ」エリアに画像をアップロードして設定しましょう。以下の手順で進めます。
1) ログイン後「ロゴ」エリアをクリックします。
![操作画面: 「ロゴ」エリアに画像を設定してみよう](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i12125de4ce69c18f/version/1548293522/%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%83%AD%E3%82%B4-%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
2) ファイルをアップロードする画面が表示されますので、設定したい画像を選んでクリックしましょう。
![操作画面: 「ロゴ」エリアに画像を設定してみよう](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ib4641c8e088c10d2/version/1548293527/%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%83%AD%E3%82%B4-%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
3)ロゴ画像が設定されました。
![操作画面: 「ロゴ」エリアに画像を設定してみよう](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ib1e2204d803c6978/version/1548293533/%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%83%AD%E3%82%B4-%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
3. ロゴをきれいに表示させるコツ
Jimdo にロゴ画像をアップロードした際、レイアウトによっては以下のように背景画像に重なります。
このときロゴの周りに白いフチ(余白)があると、見栄えがよくないことがあります。
![操作方法:ロゴをきれいに表示させるコツ](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/if9b6990b40ff7478/version/1548293539/%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95-%E3%83%AD%E3%82%B4%E3%82%92%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B%E3%82%B3%E3%83%84.png)
ロゴの周りにある白い余白の部分を、「透明」にする処理をし、「gif」もしくは「png」形式で保存してから設定すると、きれいに表示されます。
(※「jpg」「jpeg」形式のままだと透明になりません)
![操作方法:ロゴをきれいに表示させるコツ](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ibb318be510f73c2c/version/1548293544/%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95-%E3%83%AD%E3%82%B4%E3%82%92%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B%E3%82%B3%E3%83%84.png)
ロゴの余白を透明にする方法
・ロゴを制作した担当者(会社)に「ロゴの余白を透明にしたデータが欲しい」と依頼する
・透明にする機能がついた画像ソフトで、処理をする
・ロゴを透明にするWebサービスを利用する(「ロゴ 透明 サービス」などで検索すると表示されます)
などです。もし難しければ、お近くにあるJimdoCafeで相談してみてくださいね。
▼ロゴの余白を透明にして、再度設定しました。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i25d8af8636efe78c/version/1548293551/image.png)
ロゴを新規で作りたい場合
新規で作りたい場合、自力で制作する、あるいはプロに依頼するのどちらかになりますが、クラウドソーシングというサービスを利用して作るという手もあります。比較的安価で、複数のデザイン提案を受けることができます。
ランサーズ:http://www.lancers.jp/
Canva を使えば無料で自作のロゴ作成もできますよ。
ロゴのサイズを知りたい場合
ロゴを設置するエリアの大きさは、レイアウトごとに異なります。詳しくは、Jimdoのヘルプページに一覧表が掲載されていますので、ご確認ください。
ロゴとヘッダーテキストの設定:https://jp-help.jimdo.com/design/logo-title/
4. タイトルを設定してみよう
今度は「ページタイトル」を設定してみましょう。(「ページタイトル」エリアがないレイアウトもあります。)
1) ログイン後、「ページタイトル」エリアをクリックします。
![Jimdo 操作画面:タイトルを設定してみよう](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ib2cb38e2ecfae5fc/version/1548293556/jimdo-%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
2)文字が入力できます。あらかじめ入力されていた文字は消して、設定したい文字を入れていきます。入力し終わったら「保存」をクリックしましょう。
![Jimdo 操作画面:タイトルを設定してみよう](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i642c7cc0ba0fe5e2/version/1548293561/jimdo-%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
3)ページタイトルの文字の大きさや色などを変更したい場合は、「スタイル」機能を使用します。左側のツールバーから「デザイン」をクリックした後、「スタイル」をクリックしましょう。
![Jimdo 操作画面:タイトルを設定してみよう](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i469d8308281dd7de/version/1548293569/jimdo-%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ife626f8e079ff8e6/version/1548292958/image.png)
![Jimdo 操作画面:タイトルを設定してみよう](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i50fe60f3e4d9945c/version/1548293575/jimdo-%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
4)マウスがペンキを塗る刷毛状になりますので、「ページタイトル」へ合わせてクリックします。
![Jimdo 操作画面:タイトルを設定してみよう](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ic6eb99c423c1f22d/version/1548293582/jimdo-%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
5)以下のような画面が表示されるので、好みに合わせて設定しましょう。
![Jimdo 操作画面:タイトルを設定してみよう](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ib54b857440373645/version/1548293588/jimdo-%E6%93%8D%E4%BD%9C%E7%94%BB%E9%9D%A2-%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
①詳細設定 | このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。 |
②フォント | ページタイトルの文字のフォントを変更することができます。Pro、Business にアップグレードすると、使用できるフォントの種類が増えます。 |
③フォントサイズ | タイトル文字の大きさを変更できます。 |
④太字 | 文字を太字にします。 |
⑤斜体 | 文字を斜めにします。 |
⑥フォントカラー | 文字の色を変更することができます。 |
⑦配置 | 文字の配置を、左・中央・右へ変更することができます。 |
⑧文字設定 | 英字を使ったときの大文字、小文字の設定ができます。 |
「ページタイトル」と「ロゴ」は、必ずしも両方使わなければならないということはありません。「ロゴだけ」、あるいは「ページタイトルだけ」という使い方も可能です。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i0d1ab8b0c44eb26c/version/1548293336/image.jpg)
いかがでしたか? 今回は「ロゴ」と「ページタイトル」の設定方法についてご紹介しました。Jimdo のヘッダー部分には「ロゴ」と「ページタイトル」を設定できる箇所があります。できる箇所があります。(レイアウトによっては、「ロゴのみ」「ページタイトルのみ」のパターンもあります)
この部分はホームページの「看板」ともいえる場所なので、ぜひ有効に使ってくださいね。
コメントをお書きください