ジャックラッセルテリア サクラと、 なんちゃって黒ラブ ワーブ  何だか迷惑掛けてます。

だいじょうぶだよ、サクラ。

.

スポンサーサイト

  1. --/--/--(--) --:--:--|
  2. スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

オリジナルバナー製作  その3

  1. 2008/08/30(土) 06:19:50|
  2. オリジナルバナーを作ろう!
  3. | トラックバック:0
  4. | コメント:10
画像にリンクを設定する。

実は今回一番手間取ったのがこの作業でした。頭が固くなってるのですね。

結局、いまいちタグってナンなの?と、解らずじまいで、FC2の管理画面を下書きにして記事を保存しながら確認すると言う作業を繰り返しながら見つけました。
しかし、逆に言うと、解らんなりにタグは貼れると言う事です。

どのブログサイトでも行けるのかも解らないのですが、男なら黙って
<a href="リンク先のURL"><img src="画像の場所"></a>を使用して下さい。

勿論 リンク先のURL、画像の場所は消して入れ替える訳です。  解りますよね?

それでは、始まり 始まり。


1、 まずは、「画像の場所」を作ります。ブログにいつも写真をアップロードしてる要領で前回までに作った画をアップロードします。  これで本棚に収まったわけです。  写真を直接右クリックで、



2、 ショートカットのコピーを選択して下さい。 

20080826 の映像 058_u20020080826 の映像 059_u200




3、 いつも記事を書いてる画面に落として行きます。

4、 もう一つ必要な「リンク先のURL」を取りにランキングサイトのバナーのページに行きます。  なるほど、ジャック・ラッセル・テリアの住所はココだな・・・  コピーします。
先ほどと同じ様に記事を書く画面に落とします。

20080826 の映像 060_u20020080826 の映像 061_u200

5、 間違って記事を更新したらマズイので、必ず「下書き」にチェックを入れて作業して下さいね。
この辺わかり辛いかな?  下で特化して追記します。

6、 確認画面にスグに反映されないので、記事を保存しながら確認します。  
ドキドキしますね。  クリックしてランキングに飛びますか?
飛べばそれで出来上がりです。   おめでとう御座います。


20080826 の映像 075_u20020080826 の映像 077_u200

7、  いちいちココに取りに来る訳にも行かないので、スタートからメモ帳に行って、

8、 ディスクトップに出しときましょう。

20080826 の映像 091_u20020080826 の映像 093_u200

9、 これで本当の出来上がりです。  本当に使えるか管理画面で確認出来たら、下書きの記事は消して良いです。  ご苦労さま。

20080826 の映像 095_u200





タグ打ち込み詳細 0023~6にかけて、もしかしたら「解んない」と言う人の為に追記します。 よくブログ開設できたもんだな?

イイですか?必ず記事は下書きにしてくださいね。







学校のセンセが黒板に書くみたいに、キチンと並べて画面に落とします。
(素人が間違いなく作業できる様にと言う意味で、同じ画面に並べなさいと書いてる訳で、解ったと言う人はこの限りで無い)
真ん中のタグの列はキーボードで打ってね。


タグ打ち込み詳細 006zz

 どっちからでも良いのだけれど、画像から行きますね。 1、ドラッグして 2、Deleteキーで消してから、 ” と ”の間に正確に上の画像の場所をコピーして入れて下さい。

失敗した時に、何処が悪いか解らないだろうから、必ずコピーで証拠を残しながら進んでね。

(追記1) Deleteキー使わんで良いと「かずやさん」からの指摘で試してみたら、あら、ホント。
簡単やんか。  以下そのまま引用。

①コピーしたいURL(文字)を、ドラックして青く反転させ、反転した所の上で右クリック、コピー

②挿入した居場所にある文字(記事では、リンク先のURLと、画像の場所)を、ドラックして青く反転させて、反転した所の上で右クリック、貼り付け


タグ打ち込み詳細 010zzタグ打ち込み詳細 012zz

同じ様に「リンク先のURL」を消してから画面中 下列に並べたランキングの住所を入れますが、注意するのは、この住所は、単体で出来上がったものですので、犬で言うと、頭と尻尾が付いた状態なんですね。 一つの体に頭と尻尾が二つあるとマズイですから、外します。  
かえって解り辛い説明かな?

兎に角、上の 画像にリンクを設定するタグ列とジックリ見比べて記号がダブらない様にします。
40歳以上は老眼鏡を準備ね。



タグ打ち込み詳細 023zz


これでどうだ? と、確認したら・・・

失敗してるやん!

タグ打ち込み詳細 026zz

原因は必ずありますよ。
ジックリ捜して下さいね。 その為にわざわざ並べてのですから・・・
外した筈の犬の頭が付いてました。  これを消したら上手く出来ました。

タグ打ち込み詳細 030zz


オマケのオマケ、細かい作業の時は 1、Shiftキーと 2、→キーを使いますと、巧く行くんだなぁ。


タグ打ち込み詳細 031zzタグ打ち込み詳細 032zz


3回に分けて掲載しました今回の企画は如何でしたか?  君のは犬ブログじゃないからなぁ~なんて声もチラホラですが、自分が苦労したものですから、他にも苦労してる人も居るだろうな?って思いました。

中高年で初めてパソコン触った人(ワシがそうです)の視点で書いて見ましたが、サクサク行く人から見たら可笑しいかも知れないですが、ここは変だと言う所有りましたら教えて下さいね。

バナーなんて興味無い人も、ブログのテンプレートのカスタマイズの足掛かりなんかにもなるかな? なんて思います。

退屈だった人、ゴメンなさい。  誰かの役に立てば良いのだけれど・・・

(追記2)
コメント欄に戴いてるけど、タグの説明はこっちの方が判り易いので、表に持って来ました。
以下引用。

このバナーつくりでは、2個のタグを使っています
<a href="リンク先のURL"><img src="画像の場所"></a>


<a href="リンク先のURL"></a>
↑これは、リンクしなさいというタグ

<img src="画像の場所">
↑これは、画像を表示しなさいというタグ

この2個のタグの組み合わせになります。

(有難う)


何位なのかな? 久し振りに記事を書く事だけに集中してしまった。  ま、低レベルのオタクって事で。

スポンサーサイト

オリジナルバナー製作  その2

  1. 2008/08/29(金) 01:40:13|
  2. オリジナルバナーを作ろう!
  3. | トラックバック:0
  4. | コメント:7
レイヤーを使って見やすい文字を入れる。

ピクトベアを起動して前回製作したバナーの画を呼び出して下さいね。
此処では説明画面が小さくなり過ぎるので、バナーにした元画を使用して説明しますが、便宜的なものなので、混乱なさらない様に・・・  では、 始まり  始まり。



と、ココでいきなり(追記1)だ。「その1」の記事に対してキャプチャー使えと言うかずやさんの指摘で、そうやん!キャプチャーと言う言葉があったなぁ・・・と、思いだした。
使い方は知らなかったが、もう使えるぞ!

しかしながら、全部仕上げた後なのよ。 使った時間は戻らない。
ええい!どうしても見難いと言う箇所があれば教えて下さい。修正します。

まず、ピクトベアでレイヤーの管理画面が出てない時は下の画の矢印クリックね。
(見やすいね。)

080828キャプチャー1




1、 ポインタを当てて二回クリックしてレイヤーを二枚用意します。


2、 描画ツールバーから文字列を選びます。



文字入れの説明 003_u200文字入れの説明 005_u200



3、文字の色を選びます。  パレットが出てなければ此処をクリックして色見本を出します。


4、ワシはこの色が好きなのだ。
 
文字入れの説明 011_u200文字入れの説明 012_u200


5、 写真の適当な所ポインタを当ててクリック。


6、 ココで文字を書きます。  字体はお好きに・・・



文字入れの説明 007_u200文字入れの説明 008_u200



7、 サイズの指定します。   今更ですが、やり直しする時は、メニューバーの編集で「元にもどす」というのがありますから、納得いくまで元に戻して下さいね。


8、 写真に書き込みました。

文字入れの説明 009_u200文字入れの説明 015_u200

9、 選択範囲から、不透明部分の選択をします。

10、 こんな感じになります。

文字入れの説明 017_u200文字入れの説明 018_u200


11、  選択範囲  →  選択範囲の変更  →  拡張と進んで、


12、  コレくらいかな~?  適当に・・・


文字入れの説明 019_u200文字入れの説明 022_u200

13、  こんな感じになります。


14、  このままだと文字がデカくなるだけだから、レイヤー1を有効にします。  面白いでしょ?
レイヤー。

文字入れの説明 023_u200文字入れの説明 025_u200

15、 文字を浮き立たせる為には白かな?  まぁ、好みで・・・


16、 編集 → 塗りつぶし をクリック。   何でこんな所に塗りつぶしがあるのかな?

文字入れの説明 026_u200文字入れの説明 028_u200

17、色が入った。


18、  廻りの点線を消しますよ。  選択範囲を解除して下さい。

文字入れの説明 029_u200文字入れの説明 031_u200

19、  ヤッホ~。  出来た?  まだ早い。

20、  イメージの統合して一枚の画にします。

文字入れの説明 032_u200文字入れの説明 035_u200

(追記2)  やってて気が付いた人もいるだろうが、NO,20の作業はそのままレイヤー操作のウインドでやった方が早いですね。  この辺をイジって色々発見して下さい。

0806月の映像 001-off



「その1」でやった様にファイルに保存して下さい。

レイヤーは理屈解らないでもやれば慣れます。  その内ピンと来ます。
数をこなせば、お酒ジャンジャン飲みながらいけますよ。
ワシ、毎日そうですから。

さて、お次は仕上げのタグだ。
ココまでは只の画ね。   中身を入れてバナーになる訳です。



役に立ちました? この作業が一番役に立つかも知れないですね。  基本中の基本ですから、しっかり覚えて色々出来る様になって下さい。  レイヤー無しで生きて行けなくなりますよ。

オリジナルバナー製作  その1

  1. 2008/08/28(木) 00:57:49|
  2. オリジナルバナーを作ろう!
  3. | トラックバック:0
  4. | コメント:6
前々から気になってたのです・・・ブログランキングのオリジナルバナー。

いつの間にかツジイちゃんのブログでベルが巧い事ポチッとしてるのを見て可愛いなぁ・・と、思ってました。    しかしながら、パソコン超初心者のワシにそんな高等技術ができるのか?

そこで、ツジイちゃんに聞いてみると、「簡単じゃん!ペイントで作った。」と言う。
ああ、そうか!ワシは常に画像の加工はフリーソフトのピクトベアを使って居るので、レイヤー使えば良いやんけ?と、思い付いたのです。  当たり前やんかと、思われた人も多いと思いますが、それ程ワシはビギナーなのよ。

マズはバナーをイジって良いのか、ランキングの規約をよ~く読むと、どうやら良いみたいです。
ただ、大きさに制限があります。  ツジイちゃんは130x50ピクセルにしたと言うので、ワシも真似する事にしました。


と、此処までは以前書いたですね。
いざやってみると、バナーにする画像自体はスグに出来たのだけど、タグを貼るのに手間取りました。
大体、HTMLタグなんてワシ解ってないです。  サッパリ解らないです。

そういえば、今はサクサク行くけど、画像処理するにも一年前は四苦八苦したなぁ・・・なんて思い出したので、此処は一つメチャクチャ解り易い記事を作ってやろうと思った訳です。

パソコンの基礎も無い人間がする事ですので、もしかしたら大間違いをしてるかも知れないので、その辺教えて戴けたら幸いです。


さて、どうすれば巧いマニュアルになるんだか考えたのだけど、面倒な事はせずにPC画面そのまま写真に撮れば早いやんか?と思ったので、それで書いて見ますね。

当たり前だけど、ウインドウズでピクトベア入れてる事が大前提です。
では、始まり  始まり



最初にピクトベア起動します。

先ず最初に覚えて欲しいのはメニューバーの編集に「元に戻す」と言う項目があるのを覚えて下さいね。失敗したな、マズイかな?って時、活躍します。

1、ファイルを開いてバナーに使う画を取り出します。 私はマイピクチャの中に保管してある画を取り出しました。


2、こんな感じに表示される筈です。

20080826 の映像 022m20080826 の映像 023m

3、バナーのサイズの130x50ピクセルを目指します。 メニューバーの(イメージ)からイメージのリサイズを選択します。キャンパスのリサイズも良く使いますが、今回はこれだけ使って見ます。


4、縦横比を固定したままで、先ず130に落として見たら行けそうだったので、チェックボックスのチェックを外して97を50にします。   そして実行。


20080826 の映像 024m20080826 の映像 029m

5、少しつぶれましたが、サイズ通りのチビサクラが出来ました。  勿論、選んだ写真によってキャンパスのリサイズも使わないとマズイ時もありますので、その辺は各自で研究して見て下さいね。

6、大事な元画なので、保存しましょう。メニューバーのファイルから・・・



20080826 の映像 030m20080826 の映像 031m

7、解り易い名前を付けてください。

8、ランキングサイトのバナーのページからバナーの画を貰います。  使用するバナーにポインタを当てて右クリックで、これも後々使えるので名前を付けて保存しました。

20080826 の映像 032m20080826 の映像 035m


9、 1、の手順でバナーの画を呼び出して、作業し易いように並べます。

10、メニューバーの選択範囲から全て選択して・・・


20080826 の映像 038m20080826 の映像 039m




11、この様にバナーが点線で囲まれました?

12、編集でコピーを選択します。



20080826 の映像 040m20080826 の映像 041m

13、サクラの画を有効にして貼り付けます。

14、勝手にレイヤーができてる所が偉い。  描画ツールバーからこのマークをクリックして

20080826 の映像 046m20080826 の映像 048m

15,16、バナーの画を適当な所に移動します。

20080826 の映像 049m20080826 の映像 050m

17、これで良しと思えば、選択範囲を解除します。

18、レイヤーも生きてますから、統合します。  アイロンでアップリケを落ちない様に貼り付けるみたいなもんです。

20080826 の映像 051m20080826 の映像 053m

19、後でいじくりたくなるかも知れないので、これも名前を付けて保存します。  この様に一つの一つの過程ごとに名前を付けて保存すると言うのはこの手の作業する時のポイントかと思います。

20080826 の映像 055m




此処まで出来ました?これでバナーと言う封筒の外側が完成しました。
全くの初めてなら、結構時間が掛かるかも知れませんが、良く見れば出来ると思います。

どうしても解らない所は、例えば11の説明画面の此処が判らんと、具体的に言えば記事に反映できるかと思います。  画面をスクロールしながら下書きをしてるのですが、疲れたので、此処で一旦UPします。
詰め込み教育はマズイのです。

このままでは少し淋しいので、次はレイヤーを使った見え易い文字入れをします。
その後はHTMLタグに進んで完成です。
重たくなるので、3つに分けますね。














NEW ENTRY  | BLOG TOP |  OLD ENTRY




上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。