タグ・デザイン掲示板

[

【解決】コピー禁止タグ
by 藍

2015-09-24 22:37
小説ページにコピー禁止タグを入れてページの文字をコピー禁止にしたいと考えています。
記述的にこれで問題がないか不安になり、書き込ませていただきました。

以下は自分でやってみたことです。
まず、<body oncopy="alert('コピー禁止');return false;">をbody欄に入れました。
しかし、これだとhttp://nanos.jp/nanossupport/bbs/3/list?ThreadID=1579&viewType=threadのようにリンク色がデフォルト色になってしまいました。

リンク色は任意に変更したいため、上記のタグを消し、body欄に<body onselectstart="return false;" oncontextmenu="alert('コピー禁止');return false;" oncopy="alert('コピー禁止');return false;" bgcolor="#ffffff" text="#000000" link="#333333" vlink="#666666" alink="#ffffff">を入れました。
PCから閲覧したところ今度はリンク色も望んだものになり、確かにコピー禁止にはなっていましたが、記述に不安があります。
そこで詳しい方に見ていただきたいと思い、スレを立てさせていただきました。

以下は小説ページのHEAD・HTML詳細です。

【文書型宣言】
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【HTMLタグ】
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

【HEAD内】
<meta name="robots" content="none,noindex,nofollow,noarchive">
<meta name="robots" content="noindex,nofollow,noarchive">
<meta name="robots" content="none">
<meta name="robots" content="none,noindex,nofollow,noarchive">
<meta name="robots" content="none">
<pc_only><style type="text/css"></style></pc_only>

<mobile><style type="text/css">
*{margin:0 auto;}

body{
padding:15px;
border:none;
font:normal normal normal 13px /1.5 Verdana,'メイリオ',Meiryo;
line-height:150%;}

a{text-decoration: none;border-bottom:1pt dotted;}

.all {
padding:10px;
background-color:#ffffff;
border: 1px solid #dddddd;
text-align:left;}

img {border:0;}
br{letter-spacing:0;}
</style></mobile>

【BODYタグ】
<body onselectstart="return false;" oncontextmenu="alert('コピー禁止');return false;" oncopy="alert('コピー禁止');return false;" bgcolor="#ffffff" text="#000000" link="#333333" vlink="#666666" alink="#ffffff">

よろしくお願いいたします。

pc
[編集]

by と

2015-09-25 21:04
子ページにコピペしてスマホで確認したところコピー禁止になりました。(長押ししても選択状態にならない)

ただし横スクロールが出たため、bodyへの余白指定はしない方が良いと思います。
あと、背景色とアクティブリンク色が同一だと広告隠しに当たるかも？と思います。

pc
[編集]

by 藍

2015-09-27 09:59
と様

ご確認と回答をありがとうございます。
携帯とPCからの確認はできるのですが、スマホは所持していないため、とても有難いです。

背景色とアクティブリンク色ですが、広告隠しにならないようきちんと別々のハッキリした色を指定したいと思います。

長文を本文に入れてみたところ、PCでも横スクロールが出てしまいました。文字が右のグレーの枠線からはみ出してしまい、文章の折り返しがされません。
最近HTMLの勉強をし始めてまだ本当に初歩的なことしか分からないので、後学のためにお聞きしたいです。
と様のおっしゃるbodyへの余白指定をしないというのは具体的にどうすればいいのでしょうか。
よろしければ教えていただけると有難いです。よろしくお願いたします。

pc
[編集]

by と

2015-09-27 12:35
*{margin:0 auto;}
リセットCSSかもしれませんが*での指定はあまり良くないと聞いたことがありますし、値も意味がよくわからない為下記のように書き換えてください。
body,div,img{
margin:0;
padding:0;
}
面倒でもリセットが必要な要素ひとつひとつを,で区切って上記のように指定してください。
パソコンモバイル両方、body{～}のpadding～の行は削除してください。

パソコン向け、モバイル向けともbody{～}からpaddingを削除したので.allのボックスの幅は前より広がると思います。
パソコンでは、あまり気にならないようなら幅はそのままで.allにmargin:0 auto;(ボックスのセンタリング)を追記。気になるなら.allの幅をwidth:470px;にしても良いと思います。
ただしパソコンでの横スクロールについての解決になるかどうかは分かりません。
試されたのは平仮名や漢字の入った日本語でしょうか？英数字の羅列だとボックスの幅を無視して中身がはみ出してしまうと思いますが…。

モバイル向けは.allにwidth:○%;とmargin:0 auto;を追記。paddingは10pxとなっていますが携帯とスマホでは同じ10pxでも画面の横幅に対する余白の量が変わってきますので、出来れば%での指定が望ましいと思います。

例)
.all{
widh:80%;
margin:0 auto;
padding:5%;
border: 1px solid #dddddd;
以下略

上記のようにするとボックスの幅80%+左右padding:10%+ボーダー左右2px+画面端からボックスまでの距離(auto)=100%となり上手く収まります。
詳しくは「横スクロール」で検索してください。

pc
[編集]

by 藍

2015-09-27 13:40
と様

詳しい説明をありがとうございます。

PCでの横スクロールはと様のご指摘のとおり英数字の羅列のせいで、原因が分かりホッとしております。

教えていただいたところを調べて直しました。
今のところ問題はないので、また分からないところは手元の本やネットで調べたいと思います。

とても勉強になりました。
ありがとうございました。

F01E
[編集]

[