子供、いらない

はりょ。少子化問題とは関係ありません。
カウンタが345678やその付近の方はベースノートに書き込んでね。

[IMG]ボタン サンプル

2005-05-12 19:01:00 | junk.test.body
gooブログの[IMG]ボタンでサムネイル画像(小さな画像)を貼り付けて拡大画像へのリンクも作成するための操作手順です。
拡大画像をそのまま貼り付ける場合は、「[IMG]ボタン サンプル2」の記事をご覧ください。

またこの操作を始める前に、gooブログの画像フォルダに画像ファイルをアップロードし、サムネイル画像拡大画像のURLもテキストエディタ(メモ帳)などに一時的に保存済み またはすぐにコピーできる状態にしておいてください。
  1. ブラウザでgooブログの記事投稿・編集画面(ブログ > 編集画面 > 新規記事 または ブログ > 編集画面 > 記事の編集)を表示する。

  2. 適当なタイトルとカテゴリを指定して、本文欄にブログに投稿したい記事を書く。
    ここでは、「書きかけの記事。(改行)この文の直後に[IMG]ボタンで画像を追加する。(改行)」とする。

  3. 画像を追加するために[IMG]ボタンを押す。
    編集画面でIMGボタンを押す

  4. テキストエディタなどに一時的に保存しているサムネイル画像のURL http://blogimg.goo.ne.jp/thumbnail/xx/xx/~_s.jpg をコピーする。
    サムネイル画像のURLをコピー

  5. コピーしたサムネイル画像のURLを、「画像のURLを入力してください」のプロンプトに貼り付けて、[OK]ボタンを押す。
    サムネイル画像のURLを貼り付け

  6. テキストエディタなどに一時的に保存している拡大画像のURL http://blogimg.goo.ne.jp/user_image/xx/xx/~ をコピーする。
    拡大画像のURLをコピー

  7. コピーした拡大画像のURLを、「リンク先のURLを入力してください」のプロンプトに貼り付けて、[OK]ボタンを押す。
    拡大画像のURLを貼り付け

  8. 編集画面の本文欄に、サムネイル画像(imgタグ)が拡大画像へのリンク(aタグ)に括られて追加される。
    編集画面にタグが追加された

  9. 本文欄に記事の続きを書く。
    ここでは、「(改行)[IMG]ボタンを押した直後。(改行) ここは記事の続き。」とする。
    編集画面で記事の続きを書く

  10. 貼り付けたい画像が複数ある場合は、3番以降を繰り返す。

9番までの操作をした場合は、以下のように表示される。


本文欄の内容 (青字赤字は[IMG]ボタンで追加された部分)
書きかけの記事。(改行)
この文の直後に[IMG]ボタンで画像を追加する。(改行)
<a href="http://blogimg.goo.ne.jp/user_image
/35/2c/4c22b0695fe10d67a3d6015ed2196e99.png">
<img src="http://blogimg.goo.ne.jp/thumbnail
/35/2c/4c22b0695fe10d67a3d6015ed2196e99_s.jpg">
</a>
(改行)
[IMG]ボタンを押した直後。(改行)
ここは記事の続き。
表示される内容
書きかけの記事。
この文の直後に[IMG]ボタンで画像を追加する。

[IMG]ボタンを押した直後。
ここは記事の続き。

なお、サムネイル画像のURLが間違っている場合は、画像の表示されるべき位置に [X] が表示されたりします。
また、拡大画像のURLが間違っている場合は、サムネイル画像をクリックしても拡大画像が表示されません。
更に、のようなサムネイル画像の周りの枠線を消したい場合は、imgタグにborder="0"を追記してください。

● 2005年06月08日追記
2005年6月8日のgooブログ仕様変更により、[IMG]ボタンにより画像が挿入される位置は、本文欄の最後からカーソルのある位置に変更されています。

● 2005年06月17日追記
2005年6月8日~6月17日11:00の期間は、gooブログの仕様変更により、画像のURL(サムネイル画像URL)リンク先のURL(拡大画像URL)のプロンプトが逆順でした。
# 現在は、上記サンプルの順序に戻っています。

【2005年06月08日~6月17日の仕様】
  1. コピーした拡大画像のURLを、「リンク先のURLを入力してください」のプロンプトに貼り付けて、[OK]ボタンを押す。
    拡大画像のURLを貼り付け

  1. コピーしたサムネイル画像のURLを、「画像のURLを入力してください」のプロンプトに貼り付けて、[OK]ボタンを押す。
    サムネイル画像のURLを貼り付け

最新の画像もっと見る

25 コメント

コメント日が  古い順  |   新しい順
imgタグの間にスペースを入れるか、marginのスタイルを指定する (かつを)
2006-06-01 19:40:48
>わかりやすい説明をして頂いてやっと画像がUPできました。

うまくいったみたいで、よかったです>しまじろう



>画面に横に並べて画像を三枚ぐらい貼り付けたい時は、URLを続けて入力すれば良いみたいなのですが、写真と写真の間にスペースを空けたい場合はどうすればよいのでしょうか?

imgタグの間に英数字の空白「 」を入れれば、ちょっとだけスペースが設けられます。

# 編集画面で英数字の空白「 」を何個挿入しても、表示上のスペースは1個分となります



もしも英数字の空白「 」1個分よりも多く隙間を設けたいなら、日本語の空白「 」を使うと簡単でよいでしょう。日本語の空白「 」なら、挿入された数だけ隙間が設けられます。

また、imgタグに隙間のスタイルを付加するという手段もあります。



例)

現在:<img src="画像1"><img src="画像2"><img src="画像3">

英語の「 」を使う:<img src="画像1"> <img src="画像2"> <img src="画像3">

漢字の「 」を使う:<img src="画像1">  <img src="画像2">  <img src="画像3">

余白のスタイルを付加:<img src="画像1" style="margin: 0 10px"><img src="画像2" style="margin: 0 10px"><img src="画像3" style="margin: 0 10px">

(各画像の左右に10px分の隙間を設ける=画像間に20pxの隙間ができる)





なお、画像の横幅が大きすぎる(3個が1行におさまらない)場合は、



[画像1] [画像2]

[画像3]



のように折り返されてしまいます。

これは、一行の文字数が多いときに自動的に分の途中で折り返されるのと一緒なので、【imgタグで表示する】画像の横幅を小さくするか、諦めてください。

# 【aタグでリンクする画像】は大きくても構いません



画像の大きさ(横幅)に関しては、以下の記事も参考にしてください。

● 大きい写真を貼る サンプル

http://blog.goo.ne.jp/mid_knight/e/79e9c18716cd9a720c7cafeb67d3132e



いかがでしょうか?
返信する
画像のスペース (しまじろう)
2006-06-01 16:04:34
わかりやすい説明をして頂いてやっと画像がUPできました。

GOOブログ初心者です!

画面に横に並べて画像を三枚ぐらい貼り付けたい時は、URLを続けて入力すれば良いみたいなのですが、写真と写真の間にスペースを空けたい場合はどうすればよいのでしょうか?

教えてください。
返信する
よろしく (かつを)
2006-01-12 02:10:03
ちょっとは役立ったみたいで、嬉しいです。



junk.test.goo のカテゴリは、gooブログ向けの各種お試し記事があるので、もしかしたら「こんなことできないのかな?」という疑問が解消される記事があるかも知れません。

# ちゅうか、目次作れよって?



ということで、今後ともよろしくね。
返信する
はじめまして☆ (HALCA)
2006-01-12 01:55:21
かつをさん、はじめまして!

当方、HALCAと申します!!

こちらのBLOGを当方とも仲良しさんから教えてもらい、

いままでは、記事の上に一つの画像しか入れることができませんでしたが、

無事、記事中に画像挿入することができました!



またお世話になることがあるかと思いますが、よろしくおねがいします(*^^*)
返信する
できます (かつを)
2005-09-16 16:36:52
はい、できます>luna



[IMG]ボタンはgooブログの「TEXTエディター」の機能です。

# この記事を書いた時点(2005年05月12日)では、「HTMLエディター」はありませんでしたし



それから、「HTMLエディター」の場合は[画像挿入]ボタンが[IMG]ボタンと機能的に近いような気がするのですが、実は「HTMLエディター」は殆んど使ったことがないので、よく分かりません(わは)。
返信する
Unknown (luna)
2005-09-16 16:31:45
済みません。基本的なことなのですが、わからなくて・・・・。上記の処理はTEXTエディター上でも出来ますか?
返信する
ども (かつを)
2005-09-06 14:22:31
検証ありがとうございました>えっけん



ふつーのGIFがPNGに変換される理由はよくわからないのですが、まぁ実害はないかなぁと。

今時PNGに対応していない画像表示可能なブラウザって、流通していないと思うし。

ちょっと前なら特許問題があるからGIFを避けていたとかいう理由(言い訳)が付けられなくもなかったんですけどね。



gooブログは、コメントが検索できないからなぁ>やっとみつけた!
返信する
やっとみつけた! (えっけん)
2005-09-04 16:58:44
最近試してみたのですが、アニメGIF、確かにアップできました。

ただし、普通のGIFはやはりPNGに変換されるようです。
返信する
どじょ (かつを)
2005-08-25 01:07:07
結果が分かったら教えてください。
返信する
すみません (えっけん)
2005-08-25 00:24:25
>流石にこれは一人では検証できないので、「猫さん」とか「DFFのバナー」のアップロードを試して貰えませんか?

>もしアップロード出来れば、アニメGIFの形式の問題なのかも知れません。



ゴミ片付けに時間を取られて、この宿題のこと忘れてました。



もう眠いので、週末の宿題にします。
返信する
ナンでかな (かつを)
2005-08-24 18:05:29
gooブログでも使っている「1キロバイトの素材屋さん」にあった「猫さん」のアニメGIFは、.gifのままで「動いて」ます。

静止画GIF(含む透過GIF:鰹くん)は確かにPNGになりますが、まぁこれはさほど問題ないかなと。



● アーカイバと圧縮ツール (冒頭)(猫さんと鰹くんのいる記事)

http://blog.goo.ne.jp/mid_knight/e/286d3db12eae4ba1069a8f5531397f1c



>ユーザーが使っているサーバーによって違うのかなぁ?



流石にこれは一人では検証できないので、「猫さん」とか「DFFのバナー」のアップロードを試して貰えませんか?

もしアップロード出来れば、アニメGIFの形式の問題なのかも知れません。



なお、自作のアニメGIFは試していませんので、どうなるかは分かりません。
返信する
多重削除すんませんでスタ (えっけん)
2005-08-24 17:44:50
あらら、GIFあっぷできますか。

おかしいなぁ。

ウチでは何度やってもPNGになっちゃいます。

GIF作成ソフトは持っていないのですが、アイコンなどのフリー素材は全てpngに変化。



ユーザーが使っているサーバーによって違うのかなぁ?
返信する
動画GIFなんですが (かつを)
2005-08-24 16:38:25
どうも、動画GIFもアップロードできるんですよ、最近は。



http://blogimg.goo.ne.jp/user_image/3d/82/26308ee729c32e5c307c346f2098f401.gif

http://blogimg.goo.ne.jp/thumbnail/3d/82/26308ee729c32e5c307c346f2098f401_s.gif



取り敢えず、2005-07-21の時点ではできました。

http://blog.goo.ne.jp/mid_knight/e/5607799e17a2f361e6dfc66b8f2ec46d



FAQにも「GIFは静止画だけ」って書いてあった気がしたんですが、まぁ今は出来るってことみたいです。



静止画GIFについては、ブログサークルに間違いをかいてますね…。

訂正しておきました。ありがとうございます。
返信する
Unknown (えっけん)
2005-08-24 15:18:41
こんにちは。

gooブログサークルからやってきました、えっけんというモノです(←死



さて、かつをさんはgooブログサークル内で、

マックユーザーに画像の貼り方を教示されていましたが、

あそこでGIF アニメGIFの説明について質問です。

gooブログでアニメGIF、アップロードできました?

以前試した時は出来なかったのですが。

それとGIF画像については、自動的にPNGに変換されていますけど、

これは僕だけに限ったハナシでしょうか。



(透明GIF画像をアップしても、勝手にPNGに変換されます)
返信する
そのページを見ていないので想像ですが (かつを)
2005-07-05 07:45:40
「5. コピーしたサムネイル画像のURLを、「画像のURLを入力してください」のプロンプトに貼り付けて、[OK]ボタンを押す。」のところが間違っているのではないでしょうか?

# 表示が変な記事のURLが分かればもう少し的確な指摘ができるかも知れません



それらか、記事に画像を直に貼るなら「[IMG]ボタン サンプル2」の方がいいかも知れません。

# あんまり大きな画像は、直に貼らない方がいいですけどね



で、みなさんはまぁこんな面倒な処理をしているんですよ。

このブログは、面倒倒なので(をぃ)一つの記事の画像は0~2個程度ですけどね。
返信する
Unknown (ぶーみん)
2005-07-04 21:40:47
文字の切り替えの件ではお世話になりました。一つの記事に複数の画像を張り付けようと、このページからガンバって見たのですが、一応出来たと言えば出来たのですが 本文中には小さい四角の枠しか現れなくて、そこをクリックすると画像がでると言った具合です。どうしたら普通に本文と画像とを見られるのでしょうかねー。みなさん、とってもきれいに記事を作っていらっしゃいますが みなさんこんな面倒な処理をしているのでしょうか・・・。
返信する
[IMG]ボタンの仕様が元に戻るようです (かつを)
2005-06-17 01:55:39
2005年6月8日の仕様変更で順番が入れ替わった[IMG]ボタンですが、6/17の午後からは元に戻るそうです。
返信する
ボタンとTB (iina)
2005-06-14 16:46:06
貴重なご意見をありがとうございました。



>gooの[IMG]ボタンが、既定の動作がとなっている理由を推測しました。

>・大きな画像を直に貼ると重い

⇔・・・ことを配慮して二重にしているとの解釈はありえそうですね。

要は、このような画像貼付になっていますと、説明があれば好いのだと思うのです。

どうも説明がキチンとなされていないため、混乱しているように思えます。

しかし、BLOGを無料で利用できることを思えば、ユーザーの理解が必要になるのでしょうか。

枠については、iinaもリンク枠つけるのと消すのを使い分けております。



>本来TBは自分の記事で 相手の記事を紹介した(リンクを貼った)際に、それを相手に知らせる機能なんだそうです。

⇔そこらの特徴を知ったうえで利用する必要がありますね。



また、何か気づいたら一言コメントくださいね。
返信する
今回の仕様変更はかなり疑問です (かつを)
2005-06-14 03:28:32
新しい仕様(HTMLエディタやおえかきツール)を追加することには(仮に自分が使わなくても)やっきになって反対する気はないのですが、今まで使えていたものが使えないとか手順が変わるってのは、ちょっといただけないですね。



私はたまたま[IMG]ボタンを使っていません(し、無くなっても困りません)が、[IMG]ボタンが使えなくなったり仕様が変更されることには、賛成できません。



分からないことには出来るだけ答えますので、今後ともよろしくお願いします。
返信する
読んで頑張ります (きたむー)
2005-06-13 22:21:49
こんばんは。

おたすけBBSでも質問に丁寧に答えて頂きましてありがとうございます。きたむーです。

パソコン用語などに、今一つ疎いもので、よくわからない事も多いのですが、この記事をよく読んで頑張ってみたいです。

でも、今までと同じようにしているのに、急に出来なくなるって言うのって、どうしていいか分からなくなりますね。

gooの対応に疑問を感じます。
返信する
それもそうですね (nao)
2005-06-13 17:02:16
重ねてありがとうございました。

確かにそうですよね。

単に面倒なのと小さいより大きいほうが見やすいかと思っていたのですが、手順を省略することで他に影響があるかも?と不安になったのでした。

よくわかりました。すみません。単純なことをきいてしまいました。
返信する
いけないというより (かつを)
2005-06-13 15:34:34
リンク先と表示する画像を一緒にするのは意味がないというべきでしょうか。

<a href="大きな画像"><img src="大きな画像"></a>

の場合は、表示される画像(img)も大きな画像だし、その画像をクリックして表示される画像(a)も大きな画像ということになります。



あんまり意味ないですよね?

そういう場合は、手動で <a href="大きな画像"> と </a> を削除したほうが良いですね。

# img src="大きな画像"> だけにする



ただし、凄く大きい(320x240をはるかに超える)画像をそのまま張ってしまう(imgだけにする)と画像が全部綺麗に表示されないこともありますので、気をつけてください。

# 試しに貼ってみてどのように表示されるか確認した方が良いでしょう。また、表示の崩れ方はテンプレート次第なので、今は大丈夫でもテンプレートを変更したときから表示が崩れたりもします。
返信する
反則技? (nao)
2005-06-13 14:55:20
ありがとうございました。急に複数画像を貼り付けられなくなった(事前説明なし?)ので右往左往していましたが、かつをさんの丁寧な説明で理解できました。

ところで拡大画像のURLは「リンク先のURLを入力してください」のプロンプトに貼り付けずにここを[OK]ボタンで送ってしまって、次にサムネイル画像のURLを「画像のURLを入力してください」のプロンプトに貼り付けると大きいままの画像が貼り付けられるのですが、これはいけないことなのでしょうか?
返信する
どうもです (かつを)
2005-06-11 11:52:34
「連続画像貼り付け」というのは、[IMG]ボタンを2回以上連続で使うということでしょうか?



こんなサンプルを書いておきながらなんなのですが、サンプルを書くときくらいしか[IMG]ボタンを使ってないんですよね…。



もしよろしかったら、ご使用中の環境(OSやブラウザの名称・バージョン)を明記して、gooブログサークルに、発生した現象や手順をできるだけ詳しく質問された方が良いかも知れません。

同じ環境の方がいれば、現象の再現を試みて答えてくれるかも知れません。

# 同じ環境がうちにもあれば試してみますが、なければお手上げです…。
返信する
画像の貼り付け (すなじろう)
2005-06-11 11:01:20
最近連続画像が貼り付けられなくなりました。

上のようにさせて頂きましたが、貼り付けられませんでした。
返信する