スポンサーサイト

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

右クリック保存ブロック?

アルキカタQ&Aの「画像を右クリックしても保存できないようにしたい」ってページを見てて、
そういえば以前どこかで、あるトリック?をみて、妙に感心したことを思い出しました。
(それは実際に右クリック保存やってみたから気づいたことなんですけど・苦笑)
せっかくなのでネタにしようとおもいます。…え、今更? いーの、そゆの気にしない。

↓こーゆうの。春だから桜の写真をひっぱりだしてみたり。

画像をボックスとかの背景画像に指定して、上からスペーサーをかぶせる、っていうやつです。
(その「以前見たどこか」で実際にどうやってたのかは知らないんですが、だいたいそんなかんじじゃないでしょうか。…たぶん。)
上の例は、divの背景画像に写真を置いて、divのナカミにimgタグでスペーサー(ちいさい透明gif画像)を写真のサイズに広げて置いています。
とりあえず「右クリック→保存」は、ブロックできるのかな。
正確には「透明gif画像が保存される」、なんだけど。

???と思われたかたは、試しに上の画像で右クリック→保存やってみてくださいな。
ちいさい透明gif画像が保存されるとおもいます。へぇぇ~って思いません?(私だけ…?)
画像の右クリック保存をブロックする方法っていろいろあるけれど、どれも悪意または執念のあるお持ち帰りをブロックできるものではないですよね。
でもそれを知ってた上で「とりあえず右クリック保存をブロック」するなら、この方法がいちばん手間がかからなくていいなぁ、って妙に感心しちゃったわけなのです。
Flashとかスライス画像の表組みは正直面倒だし、右クリックブロックスクリプトは個人的にあんまり嬉しくない。
普通に画像はりつけるよりは面倒だけれど、透明gif画像を用意するだけだからラクだし。
どっちにしろ(残念ながら)小細工の域を出ないのですが。

でも、そんなに悪意も執念もない相手には、小細工も有効じゃないかとおもいます。
とりあえず「右クリック保存」では、目的の画像のお持ち帰りはできないので(たぶん)。
使えそう、と思われたかたは試してみるのもいいかもしれません。
もしよかったら上のスペーサーをどうぞ。(1px×1px 43byteの透明gif画像です)
画像に枠つけるときは、指定が面倒くさいので気をつけてくださいね。
IEだとズレてるのがわからないので、IE以外で確認したほうがいいです。

ええと…しつこいけど小細工です。
悪意や執念のお持ち帰りは阻止できないです。念のため。

…それにしても、こういうトリック?を考える(おもいつく)ひとってすごいなぁ。しみじみ。

080429追記:
以下、トリックのつかいかた云々を説明しています、が、
↓にある方法じゃなくて、img要素に直接、style属性で背景画像を指定すりゃいいんじゃないかと先日ふと思いました。(今更…

<img src="スペーサーURL" width="xx" height="xx" alt="" style="background-image:url(画像URL);" />

こんなかんじで。記述みじかくて済むしCSSへの追加も不要。
枠ナシ画像なテンプレートならこれでよさげな気がします。でもどうなのかな…。
( ↓の方法試したときほど表示確認してないのであれこれ不安といえば不安…
こっちの方法(↑)で大丈夫そうならこっちのほうが簡単なので、↓のはスルーしてくださいです…。
どちらにしろ小細工だとゆうことはお忘れなく。

この記事を参考にして(↑の方法でもいけるのに)↓の方法を使ってらっしゃるかた、
今更なんだけどホントごめんなさい…。じぶんのアホっぷりにうちひしがれていますしょんぼり。


上のサンプルのソースはこんなんです。記事に直接もそもそとスタイルを書いています。↓

<div style="background:url(さくら画像のURL) no-repeat; margin-bottom:10px;">
<img src="スペーサーのURL" alt="" width="320" height="240" style="border:none; background:transparent; display:block; margin:0; padding:0;" />
</div>

でもこんなふうにいちいち書くのは面倒です。
CSSにこの方法用の指定を追加しちゃうほうが(ちょっとだけ)ラクなんじゃないかと思います。

たとえば、この方法をつかうときのボックスのクラス名を「spacerbox」とすることにします。
で、CSSに以下を追加します(CSSのいちばん下に追加すればOKです)。

/* 実際に表示させたい画像を背景におくためのボックス */
div.spacerbox {
 background-repeat: no-repeat;
 background-position: 0px 0px;
 border: none;
 margin: 0;  /* ← これはお好みで */
}
/* 上のボックスの画像(スペーサーをおくところ) */
div.spacerbox img {
 background-color: transparent;
 margin: 0;
 padding: 0;
 border: none;
 float: none;
 display: block;
}

で、ふだん画像をはるときに以下のように(↓)書いていたところを、

<img src="画像のURL" width="画像の幅" height="画像の高さ" alt="画像の代替テキスト" />

こんなふうに書きます↓( テキストフォーマットを「自動改行+HTMLタグ」にしている場合は、改行を入れずに1行で記述してください)。

<div class="spacerbox" style="background-image:url(画像のURL);">
<img src="スペーサーのURL" width="画像の幅" height="画像の高さ" alt="画像の代替テキスト" />
</div>

これで上のサンプルが再現されるとおもいます。
数点しか確認してないのですが、だいたいどのテンプレートでも、この方法で大丈夫ではないでしょうか。どうでしょう。(だめな場合はツッコミおねがいします…;;)


このサンプルでは、普通に画像をはりつけたときに画像に枠がつくタイプのテンプレートでも、枠がつきません。消しちゃってます。
上で「画像に枠つけるのは指定が面倒」とか書いてますが、枠線のみの枠(?)ならそんなに面倒ではありませんでした;;。…なのでもひとつサンプル。

たとえばこんなの。↓

枠線 → 二重線 3px ついでに回り込み(float:left;)も指定してみる。

このサンプルでは、枠線の色は指定してません(模様替えの都合上)。
ブラウザによって表示される枠線色が違います(IEでは普通に画像はったときの枠線色と同じ色、FFでは文字と同じ色)。
表示を揃えたい場合は、枠線色も指定するのが確実だとおもいます。

これは、CSSに追加するぶんを以下のようにします。

div.spacerbox {
 background-repeat: no-repeat;
 background-position: 3px 3px;
 border: none;
 float: left;
 margin-right: 10px;
}
div.spacerbox img {
 background-color: transparent;
 margin: 0;
 padding: 0;
 border: double 3px;
 /* ↑枠線の色指定はお好みで。 ex.) border: double 3px #999999; */
 float: none;
 display: block;
}

画像につけた枠線の幅ぶんだけ、背景画像をずらします。
上の例では枠線幅が3pxなので、背景画像の位置を3pxずらしました(background-position)。
画像を回り込みさせてるテンプレートでは、だいたい画像にマージンがついてるとおもいます。
そのマージンは、画像にではなく、外側のボックスに指定します。
(上の例では、画像の右側に10pxのマージンをとっています(margin-right: 10px;)。)
回り込みの指定も、画像にではなく外側のボックスに。

テンプレートCSSの画像まわりの指定のところを参考にすれば、普通に画像をはるときと変わらない見た目のものをつくろうと思えばつくれます。
「指定が面倒」なのは、画像の枠が「枠線プラス余白」のもの。
もっと面倒なのは、画像の枠が「枠線プラス余白(背景色指定アリ)」のもの。
この方法だけでは再現できないのが、「画像の背景に背景画像をつかっている」ものです。


でもこの方法を使ったからって画像のお持ち帰りは完全阻止できるものではないので、なにかあっても責任は取れません。ホントしつこくて申し訳ないのですが念のため。
あと、たぶんこのやりかた、XHTML的には正しくありません。たぶん。
あんまり詳しくないので、とりあえず表示できてるからいいや、という方向でやってます。
それもご了承くださいね。まだまだ勉強中、なのです…。

そしてこのエントリ、こそこそ加筆・修正もしてます…説明下手でごめんなさい;;。

コメント投稿フォーム (ツッコミ用?

スポンサーサイト

Comment

遠い昔に見たことを思い出しました。

いろいろ、やるもんですねぇ(笑)。
企業サイトなどでは最近はFlashをつかったものも増えましたね。
ま、小細工に過ぎないんですけど(^^;

あ、これ、いいや、いっただき~♪みたいな軽い気持ちでのダウンロードを防止する
ある程度の抑制効果はあるのでしょうね。
あくまでも、ある程度で、絶対お持ち帰りされたくないデータは上げないのが一番ですが(^^;

> sugarさん

ありましたよね、こーゆうの。考えたひとってすごいなぁとホントおもいます。

きっと右クリック保存を阻止したいひとって、自分の作品を飾るサイトを運営しているひとじゃないかなぁとおもったのです。絵とか写真とか。
web上にアップロードした時点で、ぶっちゃけローカル保存はやり放題ですけど、
世の中には他人の作品を悪びれずに無断転載しちゃうひともたくさんいるようだし。
(転載とか著作権とかになると全然詳しくないのでごにょごにょ…なんですけど;;)
誰でもかんたんインターネットの時代だから、画像の保存方法は右クリックまたはドラッグ&ドロップしか知らないひともいっぱいいるでしょうし、そういうひとが相手なら、右クリック保存ブロックもひとつの手かなぁとおもったのです。

あと、この方法の好きなところは、相手をだませることでしょうか。
保存したのに何故っ? …みたいな。実際、私も「やられたー」っておもいました(笑)。
スペーサーを連想させるファイル名じゃなかったから、全然気づかなかったのです。
この方法を試すかたには、ぜひスペーサーのファイル名を変えて実行してもらいたいです。
…性格悪いですか(笑)。

でもまぁ、やっぱり小細工に過ぎないんですけどね;;。

no_title

素人が口を挟んで住みません。
この方法を使いたいのですが、具体的にどうやって見せたい写真の上に貼り付けるのですか。
普通にアップロードすると上下に貼られてしまい、前後にならないのですが。 
すみません教えていただけませんでしょうか。

> 素人さん

こんにちは。お返事遅くなり申し訳ありません;;。
ええと、私も思いっきり素人です。口を挟んで…とか、全然そんなことないです。
遠慮なくツッコミしてやってください。

さくら画像を貼るときに書いたソースと、もうすこしだけラクに指定する方法を書いてみました。
こちらをご覧ください(このエントリの追記部分です)。うまく説明できてるといいのですが…。
http://peacockblue.blog10.fc2.com/blog-entry-122.html#more122

なにかありましたらまたツッコミしてやってください。
でもこの方法を使ってなにかあっても、私は責任を取れないので、それはご了承ください…
よろしくおねがいします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

> Sさんへ。

こんにちは。ご報告ありがとうございます!
素敵なお言葉もありがとうございます!
余計な口出しをしてしまい、申し訳ありませんでした;;。
ここの記事も、すこし修正しました。
ホント説明下手でごめんなさい…

CSSのmarginで指定できるものは、数値(ゼロ以外のときは単位も)か、auto、inheritあたりです。
CSSって最初はとっつきづらいのですが、すこし慣れてくるととても便利です。
お互いカスタマイズを楽しみましょう♪

またなにかありましたら、遠慮なくツッコミしてやってください。
こちらこそ、どうぞよろしくおねがいします。
Sさんのブログの写真に癒されました。またこっそりお邪魔させていただきます^^

http://nekodamasii01.blog31.fc2.com/blog-entry-56.html

はじめまして。
記事を参考にして早速チャレンジしてみました。
以前spacer画像をダウンロードして???だったので謎が解けましたよ~。ありがとうございます。
ただちょっと問題が…。CSSを使ってアップロードすると枠線が下にずれてしまったのです。
どの部分をさわればズレを修正できますでしょうか?

こんにちはー。

ねこだましいさん、はじめまして。こんにちは。

> 以前spacer画像をダウンロードして???だった
あ、私もです~。しばらく???でした。記事のほうではさらっと書いてますけど実は(苦笑)。

お問い合わせの件ですが、記事を拝見しました。(こっそりソースも覗きました;;)
これは、記事中の改行タグが原因のようです。
おそらく、記事投稿の際に「テキストフォーマット」を「HTMLタグ+自動改行」にされているのではないかとおもいます。その状態で「<div>」と「<img>」のあいだに改行を入れてしまうと、改行のぶん(1行ぶん)だけ枠線がズレてしまうのです…。
<div ~><img></div> までを改行ナシ1行で記述すると、ズレはなくなるのではないかと思います。お試しいただけると嬉しいです。

よろしくおねがいします。

ありがとうございます。解決しました!

早速回答くださりありがとうございます。
教わった通りにしたら一発で解決しました。
>記事投稿の際に「テキストフォーマット」を「HTMLタグ+自動改行」にされているのではないか
その通りでした。
上の方で改行を入れずに1行で記述するように書いておられるのにごめんなさい。<(_ _)>

よかったです~♪

> ねこだましいさん

こんにちは。ご報告ありがとうございます。解決してよかったです♪

> 上の方で改行を入れずに1行で記述するように書いておられるのに
いえ、実はこそこそ記事は修正しました;;。(目立つようにしました)
私はタグを使う記事は「HTMLのみ」で書く癖があるので、あんまり重視してなかったのです…
わかりづらい書きかたで混乱されたと思います…こちらこそごめんなさい;;。

ツッコミしていただけたことで、記事の穴?に気付くことができました。ありがとうございます。
(たぶんまだ自分でも気付いてない穴があるんじゃないかなぁと思うのです…;;)
またなにかお気づきの際は、ぜひツッコミしてやってください。よろしくおねがいします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

3日13時のRさんへ (取り急ぎ半分だけ返信です…)

はじめましてこんにちは^^。
えと、この方法は「小細工」です。画像の保存を完全に阻止できるわけではありません。
まずその点はご理解くださいね。(ホント何度もしつこく書いてすみません;;)

ブログにお邪魔させていただきました。ソースとCSSも覗かせていただきました。
取り急ぎ半分だけ返信させていただきます。

> スペーサー
スペーサーは、上のさくらのところにあるのがそのまま使えます。
1px四方の画像を、背景画像(上の例ではさくら画像)と同じサイズに(widthとheightを指定して)引き伸ばして使うので、画像加工は不要です。
お好みでファイル名を変更してお使いくださいな。

ブログ投稿画面の入力支援を使って画像をはりつけるとwidthとheightは省略されてしまいますが、このトリックを使うときはきっちり幅も高さも指定する必要があります。

> 画像の代替テキスト
alt属性は、本来は何らかの理由で画像が表示されないときや、テキストブラウザや音声ブラウザで閲覧したときに、その画像が何の画像なのかを知らせるためのものなので「代替テキスト」なのです。
ブログ投稿画面で入力支援を使って画像を挿入すると、altには「画像のファイル名」(または画像アップロード画面で指定した「画像の説明」)が勝手に入ると思います。
画像の上にマウスポインタを合わせたときに表示されるのが、altのナカミです。
このトリックを使う場合は、代替テキストに「spacer」と入ってしまってはバレバレなので、背景画像にした写真の説明、またはさくら画像例のソースのように「alt=""」と空指定するのがいいのではないかとおもいます。

わかりづらい説明で申し訳ないです…;;。

ええと…、Rさんが現在ご利用中のテンプレートには、記事中の画像に二重線の枠がつく指定が(CSSに)あります。でも、現在掲載されている画像には枠が表示されていませんよね。
これはわざと枠を消してあるのでしょうか。それともなにかの理由で消えちゃってるのでしょうか。なにかお心当たりの点があれば教えていただけないでしょうか。
このあたりでちょっと行き詰まって試行錯誤しています。頼りなくて申し訳ないです…;;
そんな状態なので、残り半分の返信はもうすこしお待ちください…。
近日中に返信させていただきます。すみません;;。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Rさんへ

こんにちは。ヒントありがとうございました。
いろいろ試してみたのですが、妥協案をご提案、というかたちまでしかたどり着くことができませんでした。
不甲斐なくて申し訳ありません;;。

詳細は直接メールさせていただきました。
(az_peacockblueで始まるアドレスから送信しています)
とても長いメールになってしまったのですが;;、ご確認いただけると嬉しいです。
よろしくお願いします。

はじめまして!

教えていただきたいのですが、よろしいでしょうか??
CSSの一番下にソース?をそのまま追加しました。
そのあとなんですが、この画像に追加する部分で・・
<div class="spacerbox" style="background-image:url(画像のURL);">
<img src="スペーサーのURL" width="画像の幅" height="画像の高さ" alt="画像の代替テキスト" />
</div>
スペーサーのURLがわからないのですが
どうすればわかるでしょうか??
あと、”画像の代替テキスト”も何をいれればいいのか
わからなくて・・・・。。
まったくの素人で申し訳ないです。。
よかったら教えていただけるとありがたいです!

> ねこさん

はじめまして、こんにちは^^。

> スペーサーのURL
スペーサーも画像なので、「画像のURL」と同じように「スペーサーURL」を取り出してください。
ブログ管理ページの、ファイル管理画面で、サムネイルをクリックすると別窓で画像だけが開きますが、そのときにアドレスバーに表示されているURLが画像のURLです。
私は サムネイルの上で右クリック→ショートカットをコピー、で画像URLをコピーして使ってます。

ここの記事の説明では、表示させたい画像のURLを「画像URL」、スペーサー画像のURLを「スペーサーのURL」と書いています。わかりづらい説明で申し訳ないです;;。
((スペーサーはご自分のブログ等にアップロードしてご利用ください。

> 画像の代替テキスト
ふだんファイル管理画面で画像にタイトルをつけている場合は、その「画像のタイトル」を入れてください。(スペーサーのタイトルではなく、表示させたい画像のタイトルです
そうではないなら、空指定 ( alt="" ) でいいのではないかと思います。

画像の代替テキスト(altで指定するもの)は、画像が表示されない場合に×印の横に出る文字、または画像の上にマウスポインタを合わせたときにツールチップ表示される文字、です。
ファイル管理画面で画像にタイトルをつけて、「この画像で記事を書く」を選ぶと、そのタイトルが代替テキストに入ります。(タイトルをつけない場合は代替テキストは勝手に空になります。

わかりづらい説明でごめんなさい;;。(意味不明な点は遠慮なくツッコミしてやってください。
それから、(何度もしつこくてアレなのですが…)あくまでこの方法は「小細工」で、画像の保存を完全に阻止できるものではありません。この点をふまえた上でお試しくださいです。

no_title

返事が遅くなってしまい、すいません。
丁寧なご説明ありがとうございますm(__)m

やってみて、またここにお邪魔します!!

no_title

さっそくやってみたのですが
なぜか、画像が何個も表示されてしまします。

あとスペーサーなんですが
http://blog-imgs-21.fc2.com/g/a/r/garnet195333/spacer.gif
ここまでがURLですよね??
何度ももうしわけないです。


この方法で、完全にブロックできるわけではないことは
承知していますので、大丈夫です^^

> ねこさん

こんにちは^^。 ((返信遅くて申し訳ありません;;

> スペーサーURL
そちらで合ってます^^。
透明な上に小さいので見えないのですが、スペーサーが表示されています。

> 画像が何個も表示されて
ブログのほうにお邪魔してみたのですが、どのような状態で「何個も表示されて」なのかがわかりませんでした;。
どの画像にスペーサーをかぶせたいのかもわかりませんでした;;。
申し訳ないのですが、さしつかえなければ参照ページや状況(症状?)等、もうすこし詳しく教えていただけないでしょうか。

詳しい説明をこちらに書くのはちょっと…という場合は、直接メールしてやってください。
(メール: az_peacockblue□hotmail.co.jp (□→半角@)
申し訳ありませんが、よろしくお願いします。

ええと…ちょっと気になったというか…なのですが、
画像URLに移動して表示される画像には、スペーサーをかぶせることはできません。
ブログ投稿画面の入力支援を使うと、別窓で画像URLが開く一連のソースが挿入されるのですが、このトリックを使う場合は、別窓で画像URLが開くとまずいのです。
まずいというか…画像URLが開いてしまうとスペーサーをかぶせる意味がなくなります。
(画像URLで表示される画像は右クリック保存し放題なので…
ねこさんのブログの場合、記事にはサムネイルを表示、サムネイルクリックで大きな画像が表示、というかたちで使っていらっしゃるので、記事内の画像にはこのトリックは向かないのではないかなと思ったりしました。
うまく説明できてなくてすみません…。さらに的外れだったらごめんなさい;。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

> ねこさん

こんにちは。返信遅くてすみません;;。
直接返信しようとしたのですが…半角英数字満載だったせいかはじかれてしまいました(泣)。
なのでこちらで失礼します。(すみません…
つくっていただいた記事のURLは、一時的に控えさせていただきました。
(カテゴリは削除していただいて構いません。なんだかいろいろすみません…;;

先に返信部分(?)を…

> URL
コメントエリアはそういう仕様ですし、お気になさらずです^^。

> 記事内の画像
ええと…前回「向かないのでは」と書いたのは、この方法を使うとサムネイル(または大きな画像のどちらか)しか表示させられないからです。させられなくはないのですがトリック使う意味がなくなるというか。
前回も書きましたが、画像URLをブラウザのアドレスバーに直接入力して表示させた画像には、スペーサーをかぶせることができません。なので右クリック保存し放題です。
ねこさんの記事中画像の場合、サムネイルと元画像(大きな画像)とでサイズ差が結構あるので、元画像を表示させないようにしてしまう方法だと困るのかなぁと思ったのでした。


さて、現状? を拝見させていただきました。書きかたはほとんど合ってると思います。
「画像が何個も表示される」というのはやはりちょっとわからなかったのですが…;;
とりあえず修正していただきたいところを書きますね。2ヵ所あります。

まず、画像のサイズ指定です。(現在は、幅643px・高さ834px指定になっています。
実際にブログ記事上に表示させているのは「画像のサムネイル」なので、
サムネイルのサイズを指定してください。(今回の場合、幅154px・高さ200px

それから、おそらく記事投稿画面で「改行の扱い」を「自動改行」にされているとおもいますので、一連の記述を(改行ナシの)1行で書いてください。(現在1ヵ所改行が入ってる気がします
途中で改行を入れると、改行のぶんだけスペーサーがズレてしまいます。

おおまかに書くと、大体こんなかんじです。↓
(画像URLとスペーサーURLは今のままでOKです。代替テキストはカラにしました)

<div class="spacerbox" style="background-image:url(画像URL);"><img src="スペーサーURL" width="154" height="200" alt="" /></div>

これでうまくいくとおもうのですが…どうでしょうか。
お試しいただけると嬉しいです。
説明が意味不明・的外れなど、なにかありましたら遠慮なくツッコミしてやってください。
よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

> ねこさん

こんにちは。また返信遅くてすみません…;;

> 向かないのでは…の件
そうです、そういうことなので、(記事中画像には)このトリックは向かないかもしれません。
アイコンのほうは記事中画像と同じ書きかたなので、同様にお試しください。
((投稿画面で書くかプラグインHTMLに書くかの違いだけです^^

> 英数字フィルタ
このブログはひっそり運営なのをいいことになにも設定してないので、そういう便利機能の存在をすっかり忘れていました;。コメントスパムに効きそうですよね。
こちらこそあれこれすみません…;;

以下は遅すぎる返信+ヒントになるようなならないような、なものです。
的外れな場合はざっくり読み飛ばしてやってください。

□ 画像が何枚も表示される件
これ、やっとわかりました…。(ものわかり悪くて申し訳ない…;;
同じ画像が繰り返して表示される、ということ…ですよね。
これは画像のサイズ指定を修正すると直ります。

この「同じ画像が繰り返される」というのは、「背景画像」の仕様です。
(繰り返しの)指定がない場合は、勝手に繰り返し、というのが初期値なので、
CSSに追加するぶんの『 background-repeat: no-repeat; 』で繰り返ししないように指定しています。
今回の場合、背景画像に指定しているのが、サムネイル画像(154px×200px)、その上に広げているスペーサーが元画像のサイズ(643px×834px)なので、
サムネイル画像を1枚表示させて余ったぶんのスペース、横方向(643-154=)489pxぶん・縦方向(834-200=)634pxぶん …が、(背景画像に指定した)サムネイル画像の繰り返しで埋められている→何枚も表示されている、のです。
((サイズは今回の場合の画像サイズを書かせていただきました。
((『<div class="spacerbox"』ではじまる書きかたをされる場合は、CSSにも指定を追加して使ってくださいです。記事に直接書くぶんだけでは指定が足りません…。

□ サムネイルのサイズ
管理画面のファイル管理ページには、サムネイルのサイズは表示されないので、サムネイルのサイズを得る方法? を書いておきますね。

ファイル管理ページにあるファイルリストのサムネイル(リストに載ってる50×50の小さい画像)をクリックすると新窓で元画像がひらきます。
その画像が開いてる画面のアドレスバーにあるURLの、拡張子の直前に「s」を追加→移動。
サムネイル画像が表示されるので右クリック→プロパティ。
そこに表示されている大きさが、サムネイルの幅と高さです。

FC2ブログでは、自動生成サムネイルにはファイル名末尾に「s」(半角小文字)がつきます。
「image001.jpg」のサムネイルは「image001s.jpg」、
「image002.gif」のサムネイルは「image002s.gif」…といった具合です。


…長々とすみません;;。(的外れだったらホントごめんなさい…;;
(毎度のことながら)わかりづらい説明ですみません;
なにかありましたらまたツッコミしてやってください。

ええと…私用で4/15までは、おそらくほとんどネット接続できない環境になります。
その期間中は返信がさらに遅れてしまうかと思いますがご容赦ください…。
(なるべく確認&早めに返信するようにします。((すみません;

たびたびすいませんm(__)m

いつもありがとうございます!!
遅くなってしまいましたが、kaiさんのご説明を読みながらアイコンで試してみました!


何個も画像が表示される件のご説明はわかったのですが、サムネイル画像のサイズを得る方法で、画像が開いてる画面のアドレスバーにあるURLの、拡張子の直前に「s」を追加→移動まで試してみたのですが、移動でサムネイル画像が表示されませんでした。

それで、ファイルリストのサムネイルをクリックして表示された画像を右クリックしてプロパティをみると「大きさ   32×32ピクセル」とあるのですが、これとは違いますよね??


あと、CSS(スタイルシート?)に追加するのは
『 background-repeat: no-repeat; 』で
よいのでしょうか??


お返事はいつでもよいので、気になさらないでくださいね^^丁寧なお返事に、感謝しております!
こちらこそ、ほんとうに何度もすいません!!

> ねこさん

こんにちは。返信遅くてすみません…;;

> サムネイル画像のサイズ
すみません、説明不足でした…
アイコンにはサムネイルがないので、ファイル名に「s」を追加→移動してもサムネイルは表示されません。
((管理画面のファイルリストで「サムネイルで記事を書く」が出ていない画像には、サムネイルはありません。
サムネイルがない画像を使う場合は、ファイルリストに表示されている画像サイズをそのまま使ってください。(画像を別窓表示→右クリック→プロパティ、ってしなくてもOKです。

わかりづらい書きかたばかりですみません;;。
ええと…アイコンでこのトリックを使われる場合は、
ファイルリストに表示されている画像サイズをそのまま使って大丈夫です。

アイコンサイズは32×32で合ってます。
テンプレートCSSに追加するぶんは、今のままで問題ないと思います。(CSS覗きました;
幅指定が空になっているところに32を指定すれば( width="32" )、トリックは成功すると思います。
お試しいただけると嬉しいです。

ホント返信遅い+わかりづらい説明ばかりですみません;。
なにかありましたらまたツッコミお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

> 04/14のNさんへ

こんにちは。返信遅くて本当にすみません…;; (誰だ15日までってゆったのは;;

えと、それで(コメントに書いていただいた書きかたで)合ってると思います。
念のため改行はナシで書くようにしたほうがいいかなと思います。(こんなかんじで↓

<div class="spacerbox" style="background-image:url(画像URL);"><img src="スペーサーURL" width="32" height="32" alt="画像の代替テキスト" /></div>

Nさんがご利用のテンプレートをダウンロード、CSSに同じものを追加して試してみました。
サイドバー部分でも記事部分でも成功します…。(1つだけ表示されます
「何個も表示される」にはならなかったので、首をかしげています…。

ちょっとおもったの、ですが、(違ってたらすみません;
もしかして記事投稿画面で投稿画面の自動プレビューを見ながら試されてますか?
自動プレビューでは横1列ぶん画像が繰り返されます。(テンプレートとはCSSが違うため
実際に保存してから確認してみるか、または記事投稿画面の「記事を保存」ボタンの隣にある「プレビュー」ボタンを押して確認してみると、1つだけの表示で確認できるかとおもうのですが…。(的外れだったらすみません…

↑ではない場合、「何個も表示される」状態をつくって見せていただけないでしょうか。
こちらでその状態が再現できないので、どうすればいいのかがわかりません…;
お手数かけて申し訳ないのですが…よろしくお願いします。(何度もすみません;;

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

> 04/19のNさんへ

こんにちは。やっぱり返信遅くてすみません…;;

直接メールにて返信させていただきました。
(Nさんブログのメールフォームより送信しています。
ご確認くださいです。

((あれこれホントすみません…;;

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

> 04/24のNさんへ

こんにちは。((いつも返信遅くてすみません…;;

ご報告ありがとうございます。こっそりお邪魔して確認させていただきました。
右メニューのほうもうまくいってますね。よかった…!
((先日おしらせしたページは削除させていただきます。
こちらこそありがとうございます。あれこれかきまわしてすみませんでした;
なにか不備な点などありましたら、また遠慮なくツッコミしてやってください。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

出来ますよ。

右クリック禁止は簡単に設定できますよ。
テンプレート内(html編集)に
<body oncontextmenu="alert('右クリック禁止');return false;">
※アラートあり

若しくは
<body oncontextmenu="alert('右クリック禁止');return false;">
※アラートなし

を挿入する。


また、ページに挿入した特定の画像だけにブロックをかけるなら
<img src="※画像のアドレス" oncontextmenu="alert('画像コピー禁止');return false;">
※アラートあり

<IMG SRC="※画像のアドレス" oncontextmenu="return false;">
※アラートなし
という方法もあります。
これなら、大体どの環境でも右クリック禁止は発動しますよ。
(スタイルシートにJavaや他の方法で組み込んでMac等他のユーザーからも完全に阻止する方法もあります。)
完全に全て独学で学んでたので(上の方法はHP作成補助サイトでも公開されていたようで驚きましたが)もしかしたら不都合があるかも知れません。

重宝してますv

…でもkoroさんのやり方だとJavaScriptをオフにされれば簡単に持ってかれちゃいますよね。

kaiさんの方法(上述の方法)は
”『右クリック→保存』したつもりが後で見たら無かった!(実際はちいさな透明gif画像を保存していた訳で無い訳ではないのですが ^^;)”
という狙いなんだと思いますよ?

結局、画像をお持ち帰りしようという方はどんな方法ででも持って帰ってしまうのですが、この方法(kaiさんの方法)、気に入って使わせて頂いてますv

no_title

こんな所で横レス失礼します。
ちひろ様へ。
kaiさんの方法は、逆にネットスケープやMozila-Firefoxのversionなどによっては「右クリック」も簡単に出来て、「「背景画像を表示する」で簡単に画像を持っていかれる」と言う意味でのコメントでした。
(実際、この方法では背景画像の保存が出来てしまいました・・・。)
コメントで気分を害されたならすみません。

> koroさん

はじめまして、こんにちは。
返信が異常に遅くて申し訳ありません…;; (1ヵ月…ホントすみません;;

koroさんが仰るとおり、右クリック禁止は簡単に設定できます。
画像のお持ち帰りをブロックする方法を探してこのページをご覧になってるかたのヒントになりますね。ありがとうございます。
ただ、設定する場合は『 oncontextmenu="return false;" 』を追加するくらいに留めてもらえたらいいなぁと思います。
記事にも書きましたが、右クリック禁止スクリプトは個人的にあまり嬉しくないので(個人的な好みです)、積極的におすすめはしません(自己中)。
あと、右クリック禁止スクリプトは単品(?)ではあんまり意味がない気がしています。
右クリックを禁止しても、画像はドラッグ&ドロップで保存できます;。

ご指摘のとおり、この方法では表示させたい画像を背景画像として扱うので、背景画像を保存するつもりでやれば、簡単に画像を保存することができます。
所詮小細工なので、抜け道はあります。完全阻止は(この方法に限らず)無理です。
「背景画像を表示する」の選択肢が出てくるブラウザがうちにはなかったので確認できませんでしたが、確かにそういう意味では「右クリック→保存」で目的の画像が保存できてしまうことになりますね。
まぁ…小細工なので仕方がないです;。
なげやりに聞こえるかもしれませんが、そうとしか言いようがありません;。
結局のところ完全阻止は無理ですし、それを踏まえたうえでご自分に合った方法を選んでいただければいいのではないかと思っています。

>ちひろさん

はじめまして、こんにちは。
フォローありがとうございました。ダメな管理者ですみません…;;

仰るとおり、画像のお持ち帰りを完全に阻止できるわけではありませんが、
気に入っていただけてるならなによりです^^。
私は以前どこかで見かけたトリックをネタにしただけで、自分で考えたわけではないのでなんだか恐縮ですが…;
すこしはお役にたてたみたいで嬉しいです。ありがとうございます。
管理者だけに表示を許可する

Trackback

Trackback URL:

http://peacockblue.blog10.fc2.com/tb.php/122-8bfd21e9
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。