Web

Webページ上のコピーしずらい文章をコピーする

投稿日:2022年2月17日 更新日:

1. はじめに

Webページ上の文章をコピーしたいのに、「コピーが禁止されている」、「なぜかドラッグ操作がうまくいかない」などの理由でコピーできない場合があります。

本記事では、そんな場合に文章をコピーする方法を紹介します。

※ 少し強引なやり方です。きれいにコピーできない場合もあります。

2. やり方

Chrome ブラウザで説明しますが、主要なブラウザであれば同じようなことはできると思います。

(1) 以下の赤枠内の文章をコピーしたいとします。

赤枠内の文章がコピーしたい

(2) 対象範囲の左上あたりを右クリックし、[検証] を選択します。

右クリックして [検証] を選択する

(3) デベロッパー ツールの [Elements]パネルが開きます。

このとき、[Elements]パネル内では、右クリックするした要素のHTML部分が選択されています(その行に背景色がついています)。

デベロッパーツールが開く

※ 先に 右上のメニューから [その他のツール] – [デベロッパーツール] を開始しておき、コピーしたい箇所を [Elements] パネル内から探してもよいです。右クリックやキー入力を禁止しているページでは、こちらの手順になります。

(4) その対象となっているHTML要素を右クリックし、[Copy] – [Copy element] を選択します。

対象要素を選択して [Copy] – [Copy element] を選択する

(5) HTMLのタグを削除してくれるWebサービスのページにアクセスします。

ここでは、Online HTML Stripper を利用しますが、他のサービスでもよいです。

「strip html tag online」などのキーワードで検索するといろいろなサービスが見つかるはずです。

例えば、Strip HTML – Remove HTML Tags – Online – Browserling Web Developer Tools というページも見つかります。

(6) 画面中央のフィールドに、先程コピーした文字列を貼り付け、[STRIP HTML] ボタンを押します。

HTMLのタグ部分のみを削除してもらう

(7) HTMLのタグのみが削除された文字列が出力されるので、それをコピーします。

HTMLタグが削除された

(8) エディタ アプリケーションで形を整えます。

以下の画像では、改行を手動で追加しています。

ここでは、改行を追加している

以上です。

あとは、できあがった文字列を本来の目的に利用してください。

3. おわりに

この方法は少し面倒ですが、たまに役に立ちます。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Amazon ページ右端のカート内商品リストを非表示にする方法

Amazon ページ右端のカート内商品リストを非表示にする方法について説明します。

Web

Webページを検証する各種サービス

Webページを検証する各種サービスを紹介します。

Web

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

Cookie Consent by Osano の使い方について説明します。

Web Vitals

Lighthouse user flow API についてのまとめ

Lighthouse user flows API についてまとめます。

Web

テンプレートを使って無料でペラサイトが作成できる Strikingly

本ページでは、Strikingly というサービスを紹介します。 主に取り上げているのは 無料プラン です。 目次1. Strikingly とは?2. ウェブページの作成テンプレートを選ぶ雛形として …