Web拍手

Web拍手のお礼画面に画像を載せる方法を探している方が
オレの他にもおられるようなので、
ここにその方法を書きたいと思います。

実は前々から書こうとは思ってたんですけど、
いやあ、めんどくさくって・・・
ねこさんのコメントで、やっとやる気がおきました(`・ω・´)
ありがとう!ねこさん!


えー、とりあえずオレの話でもしましょうか。
そんなもん読みたくねぇ!という人は飛ばしちゃってください。
キング・クリムゾン!(←ポチっと押すと『結果』だけが残ります)

自分のブログを持ってしばらくしてから、
なんとなく、Web拍手を設置してみたい!と思い、
設置したのはいいのですが、画像が表示されませんでした。
その画像はFC2にアップロードしていたため、
直リンが禁止されていたんですねー。
(直リンについては自分で調べてちょ)

うへぇ、と思いながらも、いろいろ調べまくっていたら、
公式Q&Aにそれらしいことが載っていました。
<iframe>(インラインフレーム)を使えば画像を表示できるとのこと。
以下、web拍手Q&Aより抜粋。

詳しい手順は以下の通りです。
・使用したい画像だけが表示されるHTMLページを作る。
・web拍手の登録内容変更画面に入り、<iframe>タグを利用して先ほどのページを呼び出すように設定する。

2番目の「<iframe>タグを利用して先ほどのページを呼び出す」のは、
まぁわかったのですが、
1番目の「画像だけが表示されるHTMLページを作る」というのが
どうしてもわからなくて困ってたんです。

ブログに画像だけの記事をアップしても
当然「画像だけが表示される」ページは作れないし、
FC2のホームページを借りて、
そこに画像だけのページを作ってみても、なんか広告がついてくるしで、
「画像だけが表示されるHTMLページ」が、
一体どうやったら作れるのか全く分かりませんでした。

あ、ちなみに、画像だけが表示されるHTMLファイルの作り方、
なら知ってたんですけどね。
ファイル作れても、インターネットと繋がってないから
インラインフレームで呼び出せない・・・(-_-;)


まあ、そんなこんなで半分諦めながら、
ブログを更新する日々を送っていたわけです。

で、そんなある日、いつものようにブログに載せるための画像を
アップしていて気づいたんです。

FC2にアップロードできる拡張子は
jpg/gif/png/mid/swf/ico/mp3/html/txt/css/js/rdf/xml/xsl


ああ、なるほど。
そういうことか。

つまり、「ネットに繋がってないのなら繋げればいいじゃない」という
マリーアントワネット的な考え方をすればよかったのですね。


1.使用したい画像だけが表示されるHTMLファイルを作る。

2.そのHTMLファイルと、使用する画像をどこかにアップする。

3.web拍手の登録内容変更画面に入り、<iframe>タグを利用して先ほどのページを呼び出すように設定する。


これで万事解決です! ヽ(*´∀`)ノ


具体的には以下に書き記します。(長いので続きにしておきますね)




1.使用したい画像だけが表示されるHTMLファイルを作る。

Σ(゚Д゚;≡;゚Д゚) HTMLファイルって何!?
私パソコン詳しくないし、そんなもの作れないよ!
という方。心配ゴム用です。

HTMLファイルは(Windowsの場合)メモ帳で簡単に作れます。
(他のOSは知らね(゜Д、゜)      すいません・・・)
メモ帳を開いて、適当なHTML文書を書いたら、
「名前をつけて保存」を選び、「*.html」(*の部分は好きな名前)と
保存すると、アラ不思議、HTMLファイルができちゃいました。

で、肝心の適当なHTML文書なんですが、

<html>
<head>
<title>タイトル</title>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="imagetoolbar" content="no">
</head>
<body>
<img src="画像のアドレス" alt="画像の代わりに表示される文字" width=画像の幅 height=画像の高さ>
</body>
</html>

上をコピペすればおk。(ただし、青字の部分は変えてね!)
画像の幅と高さは、プロパティでも見ればわかることでしょう。

例えば、238×214のサイズの「aa.jpg」というファイルの場合だと、

<html>
<head>
<title>拍手ありがとー!</title>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="imagetoolbar" content="no">
</head>
<body>
<img src="http://blog-imgs-41.fc2.com/d/s/n/dsnoriaki/aa.jpg" alt="" width=238 height=214>
</body>
</html>

こんな感じになります。

これを、さっきも書いたように、「なんたらかんたら.html」と保存すれば、
使用したい画像だけが表示されるHTMLファイルのできあがりです。


2.そのHTMLファイルと、使用する画像をどこかにアップする。

は・・・・・・別にいいですよね。説明しなくても。
各自でなんとかしてください。

というわけで次。


3.web拍手の登録内容変更画面に入り、<iframe>タグを利用して先ほどのページを呼び出すように設定する。

まずはweb拍手のお礼画面編集のページにいきます。
使用するスキンは自分で自由に決めてください。
よくわからない場合は何もしなくていいです。

本文は、

<iframe src="HTMLページのアドレス" width=画像の幅+20 height=画像の高さ+20 frameborder=0 scrolling="no">この部分はインラインフレームに対応していないブラウザのためのメッセージを書く</iframe>

こんな感じです。

+20 しているのは、ギリギリの大きさにすると
端の方ががちょっと切れちゃうからです。
例によって青字の部分はそれぞれ適当なものに置き換えてくださいね。

具体的に書くとこうなります。

拍手ありがとうございます!

<iframe src="http://blog-imgs-11.fc2.com/d/s/n/dsnoriaki/test.htm" width=258 height=234 frameborder=0 scrolling="no">インラインフレームを使用しています。
上の画像が見れない方は<a target="_blank" href="http://blog-imgs-11.fc2.com/d/s/n/dsnoriaki/test.htm">ココ</a>をクリックしてください。</iframe>

昔、専務に送った花京院のAAです。
よくがんばった、オレ!

このあと設定変更ボタンを押せば、
こんな感じのお礼画面ができていることでしょう。



以上で、「Web拍手に直リン禁止の画像を載せる方法」の
説明を終わらせていただきます。

もし、何かわからないことがあったら、
コメントなりメールなりWeb拍手なり、
何らかの方法で質問していただければ
可能な範囲でお答えいたしますので、
遠慮しないでどんどん言ってください!



いや、やっぱ少しは遠慮してください・・・


【Web拍手】ホンモノの拍手はこちらから

関連記事

コメント

感涙!!!!

のりあきサン、本っっ当にありがとうございました!
おかげさまでようやく理解することが出来ました!
只今大変感動しておりますょ!!!!
かなり悩んでたのですっきりしてコレもう!!
すごく助かりました。これで私のサイトにも花が一つ増えましたwwありがとうございました!((深々

Σ(゚д゚ノ)ノ オオッ
なんだか予想以上に感謝されちゃってビックリですよ。
いやあ、がんばって書いた甲斐があるってもんです。

こちらこそ執筆意欲ありがとうございましたっ!((深々々々

初めまして!突然すみません。web拍手で検索したら辿りつきましたー。
こちらを確認しながら作る事が出来ました。
解りやすい解説をありがとうございましたーっ!

そこで…ちょっとだけ質問なんですが、(すみません)
前にこちらのweb拍手をした時に
画像をクリックすると画像が変わったんですよね。
それはどうやって作成すると出てくるのですか?

お時間のある時に教えていただけないでしょうか。
よろしくお願いしますっ!!!

ともちさん初めましてー!
解りやすい解説とか言ってもらっちゃって、恐縮しつつもすごくうれしかったりする今日この頃です(〃∇〃)エヘヘ

さて、ご質問についてですが、「画像をクリックすると」ってあるけど、たぶん「拍手する度に」ってことだと思うのでその方向で説明させていただきます。
えーと、web拍手のお礼画面編集ページに行くと、
「メッセージのローテーションの法則」というのがありますよね?
メッセージ1のスキンを選ぶところのすぐ上です。
そこで、「メッセージ1~○をランダムで表示」というのを選ぶとできます。
例えば「メッセージ1~3をランダムで表示」だと、拍手するたびにメッセージ1か2か3のどれかが表示されるという寸法です。

「ランダムで表示」以外にもいろいろやってみると楽しいと思います。
ぜひ試してみてください!

ではでは、楽しいWeb拍手ライフを~

感動しました

はじめまして、そぞと申します。
Web拍手への画像添付がわからなくて悩んでいたら辿り着きました。
どこの専門サイトの解説を見てもいまいち分からずほぼ諦めていたのですが、典明さんの説明の通りやってみたらすんなり出来てしまいました。
感動で半分涙目になりましたよ(笑)
解説が何処よりも分かりやすく、また親切に書いてあってとても為になりました!
本当に感謝しております!

では、お世話になりました^^

そぞさん、はじめまして!

うへー、また分かりやすいって言われちったよ(*´д`*)
一応、万人にわかりやすいようにと作ったつもりなので、
そう言われると本当にうれしい限りです。
そしてお役に立てたようでよかったです。

それもこれも、この記事の執筆意欲をかきたててくれた
ねこさんのおかげですね!
みなさん、ねこさんに感謝しましょー。
(-人-)ありがたやありがたや~

どこのを見ても全然わかんなくって困っていたのですが、典明さんのわかりやすい説明で拍手絵挿入できました!!タグとかも載せていて下さったので本当に有難かったです^^
お世話になりました~!

はじめましてー、movoさん。
また一人難民を救助できたようで何よりです。
そして、またしてもわかりやすいと言われちゃって、
そんなにわかりやすいのかー、と読み返してみたら、
説明はともかく、オレのエピソードがわかりにくすぎなことに気づき、
ただ今猛反省中でございますorz

それにしても、このページはどんどん長くなるなぁ(´д`)

コメントの投稿

管理者にだけメッセージを送る

プロフィール

DS典明

Author:DS典明
左:Sigrun(元Tiamet)在住
Double=Screen=典明
右:きみょうな村在住
DSのりあき

※なんかあったらコチラ

最近の記事
最近のコメント
リンク
FC2カウンター
最近のトラックバック
カテゴリー
カレンダー
02 | 2017/03 | 03
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
月別アーカイブ
RSSフィード
ブログ内検索
同盟

うさみちゃんシリーズ同盟うさみちゃんシリーズ同盟
このブログは『うさみちゃんシリーズ同盟』に加盟しています。

グリムス