タグ別アーカイブ: WEB

Twitter：WEBサイトにTwitterのタイムラインを埋め込む

Posted on by
返信

ホームページやブログでTwitterのタイムラインを表示しているWEBサイトをよく目にします。

自分のWEBサイトにTwitterのタイムラインを埋め込んでみました。
その時の埋め込み方法をメモします。

■ Twitter タイムラインの埋め込み方法

1.表示したいアカウントのTwitterにログインします。

2.アカウントの設定画面に遷移します。

twitter_timeline_1

3.アカウントの設定画面で「ウィジェット」をクリックします。

twitter_timeline_2

または、Twitterにログインした状態で下記のURLにアクセスします。

https://twitter.com/settings/widgets

4.ウィジェット画面で「新規作成」をクリックします。

twitter_timeline_3

5.ユーザーウィジェットの設定画面でタイムラインのタブを選択します。

twitter_timeline_4

6.「オプション」で表示したい内容を修正し「ウィジェットを作成」をクリックします。

twitter_timeline_5

7.「ウェジェットが作成されました。」とメッセージが出力されるので、作成されたコードをコピーします。

twitter_timeline_6

8.コピーしたコードをWEBサイトの表示したい箇所に貼り付け、アップロードします。

twitter_timeline_7

上記のようにTwitterのタイムラインを表示することができます。
横幅は設定しなくても、埋め込んだ箇所の幅に設定してくれるみたいです。

HTML：WEBサイト内の文章・文字列をコピー禁止にする

Posted on by
返信

WEBサイトを作成する場合、ページの内容ごとに様々な文章を記載すると思います。
WEBサイト閲覧者はサイト内の文章を「右クリック→コピー」や「Ctrl+C」などで簡単にコピーすることができますが、サイト内で記載した独自の文章や文字列等をコピーされたくない場合があります。
今回はJavaScriptを使用して、HTMLに記載した文章・文字列等のコピーを禁止・不可にする対策方法をメモします。

コピー禁止したい文章や文字列を入れているタグに下記のコードを記載します。
記載したタグ内の文字をコピーすることができなくなります。

onCopy="return false;"

■ ページ全体をコピー禁止する場合

bodyタグに「onCopy=”return false;”」を追加します。

<body onCopy="return false;">コピー禁止</body>

■ 指定したタグをコピー禁止する場合

divタグ内の文字を禁止する場合、divタグに「onCopy=”return false;”」を追加します。

<div onCopy="return false;">コピー禁止</div>

■ コピー時にアラートを表示する場合

「onCopy」に「alert(‘出力文字列’);」を追加します。

<div onCopy="alert('コピー禁止'); return false;">コピー禁止</div>

しかし、上記の方法でコピー禁止にしても方法によってはコピーができてしまうので、あくまでも簡単にコピー禁止を対応した場合の処理です。

ちなみに右クリックを禁止したい場合は下記のコードを記載します。

 onContextmenu="return false;"