Google風のサイトロゴ画像を作ってみませんか

つぎのような Google 風のサイトロゴ画像を作る方法をご紹介します

---

　 はじめに

livedoor Wiki に Wiki 開設したんだけど『何かトップページが淋しいなぁ』なんて思っているオーナーの方はいませんか？でしたら、画像によるサイトロゴを作って設置してみると良いですよ。「livedoor Wiki ピックアップ」に紹介されている Wiki の中には特色のあるサイトロゴを設置している例が多いですね。
ということで、このページでは Google 風のサイトロゴ画像を作る方法をご紹介します

　 ロゴ画像作成上の制限事項

これからご紹介する Google 風のロゴの作成サイトでは、用意されている文字の種類が、アルファベット、数字と記号の一部なので、残念ながら日本語のサイトロゴは作成できません。

使用できる文字

アルファベット：A-Z、a-z、数字：0-9、記号：@,.;:+-=?!"#$'%&()/^~_*` スペース

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234567890@,.;:+-=?!"#$'%&()/^~_*` スペース 

　 必要な道具

必要な道具というとちょっと大げさですが、ロゴ画像作成にあたってつぎのソフトが必要です

• Web ブラウザ（当たり前ですね失礼しました）
• 画像編集ソフト（Windows であれば、標準搭載の「ペイント」や「Microsoft Photo Editor」が利用できます）

　 Google風ロゴ作成の手順

(1) まず、Web ブラウザで Google 風のロゴの作成サイト「Google Logo Maker-Google風ロゴ作成-Logogle」にアクセスしてください

Google風ロゴ作成サイト - Logogle トップページ（画像をクリックすると大きな画像にリンクしています）

(2) では、Google風ロゴを実際に作成しましょう。上のスクリーンショットが Logogle のトップページです。このページの左上に作成するロゴの文字列を入力するインプットボックスがありますから、作成したいロゴの文字列を入力して［Logo作成］のボタンを押してください。簡単でしょう。

ページの左上のインプットボックスに作成するロゴの文字列を入力し［Logo作成］のボタンを押す

(3) そうするとつぎのスクリーンショットのような Google のトップページを模したページが表示されます。

作成された「WikiFan」のGoogle風ロゴ（画像をクリックすると大きな画像にリンクしています）

(4) このページの画面をキーボードの [Alt]+[PrtScr] を押してクリップボードにコピーします（ [Alt]+[PrtScr] キーはアクティブなウィンドゥをクリップボードにコピーする操作です）

(5) さらにペイント等の画像編集ソフトに貼り付け、ロゴ部分を切り出して画像ファイルとして保存してください。なお、画像ファイルのフォーマットは JPEG か PNG が一般的です。

(6) 以上で、 Google 風のロゴ画像が作成できました

　 サイトロゴ画像をトップページに設置してみよう

ここでは、トップページ（FrontPage）に設置する前提で説明します

(1) まず、作成したサイトロゴ画像を「添付」の機能を利用してアップロードします

(2) トップページ上部中央の［添付］のリンクをクリックします



(3) ［添付］の設定画面が表示されます。［添付ファイル］のインプットボックス右の［参照］ボタンを押します。ファイル選択のダイアログボックスが表示されますから、さきほど作成したサイトロゴ画像のファイルを選択してください。

［添付］の設定画面（画像をクリックすると大きな画像にリンクしています）

ファイル選択のダイアログボックス（画像をクリックすると大きな画像にリンクしています）

(4) ファイルの説明を入力してください

ファイルの説明を入力する

(5) ［アップロード］のボタンを押します



(6) 自動的にトッフページに戻りますので、ページ最下部中央の［添付ファイル一覧］の一覧でさきほどのサイトロゴ画像が正常にアップロードされているか確認してください。なお、アッフロードしたファイルは、livedoor Wiki 内部でファイル名が変更されてしまいますので、アッフロードしたときの名称とは異なります注意してください。また、実際の確認方法ですが、アップロードした日付をたよりに添付ファイルのリンクをクリックしてください。さきほどのサイトロゴ画像が表示されれば正常にアップロードされています。

ページ最下部中央の［添付ファイル一覧］

添付ファイルのリンクをクリックした結果（画像をクリックすると大きな画像にリンクしています）

(7) では、実際にトップページにサイトロゴ画像を表示するように、トップページを編集しましょう。

(8) まず、さきほどアップロードしたサイトロゴ画像の URL を取得します。先に説明したページ最下部中央の［添付ファイル一覧］の中からのサイトロゴ画像のファイルのリンクをクリックしてください。さきほどのサイトロゴ画像が表示されると思います。この時の Web ブラウザのアドレスバーの表示をマウスカーソルでなぞって選択し [Ctrl]+[C] キーを押してクリップボードにコピーしてください。この、URL がサイトロゴ画像の URL になります。

Web ブラウザのアドレスバーの表示をマウスカーソルでなぞって選択し [Ctrl]+[C] キーを押してクリップボードにコピーする

(9) トップページ上部中央の［編集］のリンクをクリックして、編集画面を開き、編集画面の一番上の行にさきほどクリップボードにコピーしたサイトロゴ画像の URL を貼り付けます。具体的には [Ctrl]+[v] キーを押します。これで、さきほどのサイトロゴ画像の URL が貼り付けられたと思います。

トップページ上部中央の［編集］のリンクをクリックする

編集画面を開き、編集画面の一番上の行にさきほどクリップボードにコピーしたサイトロゴ画像の URL を貼り付けます。具体的には [Ctrl]+[v] キーを押します。これで、さきほどのサイトロゴ画像の URL が貼り付けられたと思います（画像をクリックすると大きな画像にリンクしています）

(9) ［保存］して完了です

(10) 「サイトロゴ画像」がトップページの最上部に表示されていれば成功です。おめでとうございます。

トップページに WikiFan の Google 風サイトロゴが表示されました

　 Google風ロゴ作成上の Tips

• 各文字に割り当てられる色は作成するたびにランダムに変更されるようです。気に入った色の並びになるまで試してみると良いようです。私は５回ほど試して、上のスクリーンショットの色の並びにしました。

専用の掲示板で作者の方から回答をいただきました

• 各文字に割り当てられる色は、作成するたびにランダムに割り当てられるのでしょうか？ - ブースカ [2005/07/26 00:58:42]
• そうです色はランダムです。先頭は青ってのだけ決まってます。また隣り合う文字も同色にならないようにしてます。 - 管理人 [2005/07/26 01:09:51]
• ＞管理人様、各文字に割り当てられる色の件、ご回答ありがとうございました。何回か作成し直して、気に入った色の並びを使ってみました。 - ブースカ [2005/07/26 01:37:31]

• 各文字ごとに単独の画像（たとえば、"W"の文字は、w0l.gif、"i"の文字は、i1.gif）になっており、「WikiFan」という文字列全体で一つの画像ではありません。画像として利用する場合は作成された画面をスクリーンショットとして保存してロゴ部分を画像編集ソフトで切り出すのが良いようです。

　 姉妹サイト内関連ページ

• WikiFan - ニュース／コメント（2005年07月）

　 関連リンク

• Google Logo Maker-Google風ロゴ作成-Logogle
• Logogle : Google風ロゴメーカー:パンパでガウチョ
• Going My Way: Google風のロゴを作成してくれるGoogle Logo Maker
• Google風ロゴ作成-Logogle 〜 Google Logo Maker

　 このページの作成・変更履歴

• 作成：2005年07月26日(火) 21:50 by ブースカ
• 改訂：2005年07月27日(水) 08:02 by ブースカ
• 改訂：2005年07月31日(日) 00:13 by ブースカ - Google Logo Maker Logogle で使用できる文字種（記号）が増えたので修正しました

　 コメント（発言や質問はこちらへどうぞ）

• 発言や質問がありましたらお気軽にどうぞ、なお、できたら発言の識別用にハンドルネームで結構ですので名前を記入してください。

コメント表示

コメント投稿