ホームページ制作、千太の絵空事

ブログにアップロード「ペイントでOK！」名前アイコンの作り方17

「ペイントでOK！」名前アイコンの作り方17

2006-04-13
《仕上げ》3
いよいよ、ブログにアップロードです。

ブログにアップロード

ログイン状態で、

• 自分のブログの右上にあるブログ設定をクリック
  

プロフィール設定ページに移動します。

• 下の方「画像情報の欄」名前アイコンのフィールド右横の参照をクリック
  
  
  

先ほど保存したファイルを探し、

• クリックして選択
  

ファイル名のフィールドに名前が自動ではいります。

• 開くをクリック
  
• ページ右下の[OK決定]をクリック
  
  

これで、名前アイコンがアップロードされました。
名前アイコンが表示されているか､確認しておきましょう。

※サーバ負荷上昇中はすぐに反映されない場合があるようです。
この場合､何度もアップロードを繰り返すとさらに、状況が悪化する可能性があります。

すぐに反映していない場合でも､後で反映するなどもあるので、静観してみてください。

---

【ヒント】

• アップロードとは？
  
• Ｙａｈｏｏブログでのアップロード機能
  

---

• 「ペイントでOK！」名前アイコンの作り方１
  
• 「ペイントでOK！」名前アイコンの作り方２ ：パソコンの設定と確認
  
• 「ペイントでOK！」名前アイコンの作り方３：キャンバスのサイズ設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方４：背景色の設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方５：前景色を設定し､キャンバスを塗り潰す
  
• 「ペイントでOK！」名前アイコンの作り方６：立体的なアイコン作り(ポイント、有り！)
  
  

背景に好きな絵を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方７：ペイントではイラストは描きにくいのか？
  
• 「ペイントでOK！」名前アイコンの作り方8：描きにくさの解消
  
• 「ペイントでOK！」名前アイコンの作り方9：切り取られる問題の解消
  
• 「ペイントでOK！」名前アイコンの作り方10：イラストを実際に描く
  
• 「ペイントでOK！」名前アイコンの作り方11：イラストを名前アイコンに入れる
  
  

文字を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方12：書式バーの表示
  
• 「ペイントでOK！」名前アイコンの作り方13：文字の設定と入力
  
• 「ペイントでOK！」名前アイコンの作り方14：位置や大きさの細部の調整
  

仕上げ

• 「ペイントでOK！」名前アイコンの作り方15：要らない部分の削除
  
• 「ペイントでOK！」名前アイコンの作り方16：名前アイコンの保存
  
• 「ペイントでOK！」名前アイコンの作り方17：ブログにアップロード
  
  

---

この記事は「名前アイコンの保存」『「ペイントでOK！」名前アイコンの作り方』17
更新：2006-04-13

• この記事：
  
• 編集：ホームページ制作 千太の絵空事
  

---

Copyright (C) 2006 ホームページ制作 千太の絵空事. All Rights Reserved.

名前アイコンの保存「ペイントでOK！」名前アイコンの作り方16

「ペイントでOK！」名前アイコンの作り方16

《仕上げ》2
さて､名前アイコン完成しましたかー。
それではパソコンに保存してみましょう。

名前アイコンの保存

メニューバーの

• ファイル＞「名前を付けて保存」をクリック。
  

[名前を付けて保存]のダイアログがでます。

• ファイル名のフィールドにa〜zまでの文字で名前を入れます。
  
• ファイルの種類のフィールドの右横の下向きの矢印をクリック
  

ファイルの種類が表示されます。

• GIF(*GIF)と書かれているファイルの種類名の部分でクリック
  
• [OK]をクリック
  

これで名前アイコンが、保存されました。

きちんとGIFで保存されているか確認してみましょう

• 【ポイント】GIFで保存
  
  Yahooブログで使用できる「名前アイコン」のイメージファイルの種類はGIFだけです。
  
  
  

[拡張子]の部分が、「….GIF」若しくは、「….gif」になっていますかー

※拡張子が表示されていない場合はファイル名だけが見えています。

---

【ヒント】

• 拡張子とは？
  
• 拡張子を表示させる
  

---

---

• 「ペイントでOK！」名前アイコンの作り方１
  
• 「ペイントでOK！」名前アイコンの作り方２ ：パソコンの設定と確認
  
• 「ペイントでOK！」名前アイコンの作り方３：キャンバスのサイズ設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方４：背景色の設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方５：前景色を設定し､キャンバスを塗り潰す
  
• 「ペイントでOK！」名前アイコンの作り方６：立体的なアイコン作り(ポイント、有り！)
  
  

背景に好きな絵を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方７：ペイントではイラストは描きにくいのか？
  
• 「ペイントでOK！」名前アイコンの作り方8：描きにくさの解消
  
• 「ペイントでOK！」名前アイコンの作り方9：切り取られる問題の解消
  
• 「ペイントでOK！」名前アイコンの作り方10：イラストを実際に描く
  
• 「ペイントでOK！」名前アイコンの作り方11：イラストを名前アイコンに入れる
  
  

文字を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方12：書式バーの表示
  
• 「ペイントでOK！」名前アイコンの作り方13：文字の設定と入力
  
• 「ペイントでOK！」名前アイコンの作り方14：位置や大きさの細部の調整
  

仕上げ

• 「ペイントでOK！」名前アイコンの作り方15：要らない部分の削除
  
• 「ペイントでOK！」名前アイコンの作り方16：名前アイコンの保存
  
• ブログにアップロード
  
  

---

この記事は「名前アイコンの保存」『「ペイントでOK！」名前アイコンの作り方』16
更新：2006-04-13

• この記事：
  
• 編集：ホームページ制作 千太の絵空事
  

---

Copyright (C) 2006 ホームページ制作 千太の絵空事. All Rights Reserved.

要らない部分の削除「ペイントでOK！」名前アイコンの作り方15

「ペイントでOK！」名前アイコンの作り方15

《仕上げ》１

要らない部分の削除

キャンバスのサイズを小さくして､作業スペースを削除します。
ここでの名前アイコンの部分のサイズは幅120pxと、高さ34pxのはずです。

• メニューバーの変形＞「キャンバスの色とサイズ」をクリック
  

「キャンバスの色とサイズ」と名前の付いたダイアログがでます

• [幅]のフィールドに120と記入します。
  
• [高さ]のフィールドに34と記入します。
  

※単位はピクセル、色はカラーにチェックが入っているか確認しておいてください。

• OKをクリック
  
  

どうですか、
名前アイコンの部分だけでいらない作業スペースは削除できたでしょう。

次に､名前アイコンのサイズを使うアイコンのサイズ幅60px、と高さ17px
にします。

ちょうど半分になるよう、[最初に設定]していたのでこれができると思います。

水平方向・垂直方向の各々を50%に設定します

• メニューバーの変形＞「伸縮と傾き」をクリック
  

「伸縮と傾き」と名前の付いたダイアログがでます
伸縮の欄で

• 水平方向のフィールドに50と記入します。
  
• 垂直方向のフィールドに50と記入します。
  
  
• OKをクリック
  

これで､名前アイコンが半分の幅と高さになります。

つまり､幅60px、と高さ17pxのアイコンの完成です。

どうですかー。難しかったですかー。

---

---

• 「ペイントでOK！」名前アイコンの作り方１
  
• 「ペイントでOK！」名前アイコンの作り方２ ：パソコンの設定と確認
  
• 「ペイントでOK！」名前アイコンの作り方３：キャンバスのサイズ設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方４：背景色の設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方５：前景色を設定し､キャンバスを塗り潰す
  
• 「ペイントでOK！」名前アイコンの作り方６：立体的なアイコン作り(ポイント、有り！)
  
  

背景に好きな絵を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方７：ペイントではイラストは描きにくいのか？
  
• 「ペイントでOK！」名前アイコンの作り方8：描きにくさの解消
  
• 「ペイントでOK！」名前アイコンの作り方9：切り取られる問題の解消
  
• 「ペイントでOK！」名前アイコンの作り方10：イラストを実際に描く
  
• 「ペイントでOK！」名前アイコンの作り方11：イラストを名前アイコンに入れる
  
  

文字を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方12：書式バーの表示
  
• 「ペイントでOK！」名前アイコンの作り方13：文字の設定と入力
  
• 「ペイントでOK！」名前アイコンの作り方14：位置や大きさの細部の調整
  

仕上げ

• 「ペイントでOK！」名前アイコンの作り方15：要らない部分の削除
  
• 名前アイコンの保存
  
• ブログにアップロード
  
  

---

この記事は「要らない部分の削除」『「ペイントでOK！」名前アイコンの作り方』15
更新：2006-04-13

• この記事：
  
• 編集：ホームページ制作 千太の絵空事
  

---

Copyright (C) 2006 ホームページ制作 千太の絵空事. All Rights Reserved.

位置や大きさの細部の調整「ペイントでOK！」名前アイコンの作り方14

「ペイントでOK！」名前アイコンの作り方14

2006-04-11
それでは、この文字を選択して移動させ、
名前アイコンの部分の好きな位置に表示させます。

位置や大きさの細部の調整

文字を選択して好きな位置に表示させます。

• 左側のツールより、「選択」を選択（左クリック）
  
• 文字を囲うようにドラック
  
• 点線で囲まれた部分の中でクリック
  
• ドラックさせて好きな位置に移動させます。
  
  

どうですかー。

うまくいいきましたかー。

え！、「はみでたー。」

ふふふ大丈夫､
サイズを変更させてやってみてください。

• ドラックさせてもう一度空いた作業スペースに移動させます。
  
• 点線の囲いの（右上・右下・左上・左下・上・下・左・右）の点にカーソールをあてます。
  

カーソールが斜め向きの矢印に変更します。

• ドラックして拡大・縮小させます。
  
  

どうですかー、いい大きさになりましたかー

• 【ポイント】拡大するより縮小
  
  イラストの際でもでしたが、拡大するより縮小する方がきれいに仕上がります。
  
  
  

この「選択して修正が効く」というのが、作業スペースを作ってやる利点なのです。
つまり最大のポイントなのです。

うまくいきましたかー。
それでは、

• 点線で囲まれた外をクリック
  
  

これで決定されました。

• 【ポイント】やり直す場合は「元に戻す」
  
  何度も繰り返すと､文字がくずれてしまうので、
  そんな場合は、
  メニューバーの編集＞元に戻すをクリック
  
  選択して移動させる前の状態に戻す事ができます
  
  
  

おー、これで名前アイコンの完成です！。
どうですかー、素敵にできましたか！。

---

---

• 「ペイントでOK！」名前アイコンの作り方１
  
• 「ペイントでOK！」名前アイコンの作り方２ ：パソコンの設定と確認
  
• 「ペイントでOK！」名前アイコンの作り方３：キャンバスのサイズ設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方４：背景色の設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方５：前景色を設定し､キャンバスを塗り潰す
  
• 「ペイントでOK！」名前アイコンの作り方６：立体的なアイコン作り(ポイント、有り！)
  
  

背景に好きな絵を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方７：ペイントではイラストは描きにくいのか？
  
• 「ペイントでOK！」名前アイコンの作り方8：描きにくさの解消
  
• 「ペイントでOK！」名前アイコンの作り方9：切り取られる問題の解消
  
• 「ペイントでOK！」名前アイコンの作り方10：イラストを実際に描く
  
• 「ペイントでOK！」名前アイコンの作り方11：イラストを名前アイコンに入れる
  
  

文字を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方12：書式バーの表示
  
• 「ペイントでOK！」名前アイコンの作り方13：文字の設定と入力
  
• 「ペイントでOK！」名前アイコンの作り方14：位置や大きさの細部の調整
  

仕上げ

• 要らない部分の削除
  
• 名前アイコンの保存
  
• ブログにアップロード
  

---

この記事は「位置や大きさの細部の調整」『「ペイントでOK！」名前アイコンの作り方』14
更新：2006-04-11

• この記事：
  
• 編集：ホームページ制作 千太の絵空事
  

---

Copyright (C) 2006 ホームページ制作 千太の絵空事. All Rights Reserved.

文字の設定と入力「ペイントでOK！」名前アイコンの作り方13

「ペイントでOK！」名前アイコンの作り方13

書式バーの設定で文字の種類や書体、大きさなどを設定してみましょう。

文字の設定と入力

ではこの書式バーで、そうですねー。
文字を太字にして､斜体にしてみますね。

• 右の[B]のアイコンと[I]のアイコンをクリックします。
  
  

んーん､文字サイズは、２０ぐらいかなぁ

これも、できるだけ読みやすいようなサイズを選んでください。
小さすぎすると読めません。
また、あとで半分に縮小しますから、そのことも考慮しておいてください。

何回か失敗すればわかりますよー（私もそうでした、汗）
次に文字の入力
書式バーの設定が済んだら、いよいよ文字の入力です。

• 点線で囲まれた部分で左クリック。
  

書式バーからフォーカスがテキスト入力部分に移ります。

これで入力可能な状態になります。

好きな言葉を入れてください。
（あ！。名前アイコンですから、呼ばれたい名前ですよね！[]）

あれ､文字色は？
大丈夫それは書式バーではなくて
下にあるパレットで前景色を設定し､文字の色を決めます。

その場合、背景との「コントラスト」に特に注意してください。
読めない、､読みにくいでは、「名前アイコン」の意味がありませんからね。

どうですか、文字がきれいに入ったでしょう！。

---

---

• 「ペイントでOK！」名前アイコンの作り方１
  
• 「ペイントでOK！」名前アイコンの作り方２ ：パソコンの設定と確認
  
• 「ペイントでOK！」名前アイコンの作り方３：キャンバスのサイズ設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方４：背景色の設定(ポイント，有り！)
  
• 「ペイントでOK！」名前アイコンの作り方５：前景色を設定し､キャンバスを塗り潰す
  
• 「ペイントでOK！」名前アイコンの作り方６：立体的なアイコン作り(ポイント、有り！)
  
  

背景に好きな絵を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方７：ペイントではイラストは描きにくいのか？
  
• 「ペイントでOK！」名前アイコンの作り方8：描きにくさの解消
  
• 「ペイントでOK！」名前アイコンの作り方9：切り取られる問題の解消
  
• 「ペイントでOK！」名前アイコンの作り方10：イラストを実際に描く
  
• 「ペイントでOK！」名前アイコンの作り方11：イラストを名前アイコンに入れる
  
  

文字を入れてみよう

• 「ペイントでOK！」名前アイコンの作り方12：書式バーの表示
  
• 「ペイントでOK！」名前アイコンの作り方13：文字の設定と入力
  
• 位置や大きさの細部の調整
  

保存してみよう。

• 名前アイコンの保存。
  

ブログにアップロード

• ブログにアップロード
  

---

この記事は「文字の設定と入力」『「ペイントでOK！」名前アイコンの作り方』12
更新：2006-04-11

• この記事：
  
• 編集：ホームページ制作 千太の絵空事
  

---

Copyright (C) 2006 ホームページ制作 千太の絵空事. All Rights Reserved.