Webページの必要な部分だけを選択して印刷できる「PrintWhatYouLike」（その３）

実際の操作に関して説明する。（その１）で簡単な操作は説明したが、もう少し詳しい説明を行う。

「PrintWhatYouLike」をそのBookmarkletをクリックするか、あるいは拡張機能のアイコンをクリックして、Webページの編集を開始する。

ここでは読売新聞のWebサイトを使って説明する。上の画面のように編集を開始すると、マウスのポインターをWebの画面に持って行くと赤い線でWebページの一部分が囲われる。

マウスのポインターの位置によって、赤線で囲われる部分は変化する。この場面でマウスのポインターをいろいろ動かしてみると良い。どういう位置にマウスのポインターを持って行くと、どういう部分が赤線で囲われるかが自然とわかってくるはずだ。

とりあえず切り出したい記事が赤線で囲われた部分に入っていることを確認して、マウスをクリックする。そうすると上の画面のように赤線で囲われた部分が透明な黄色い色に覆われた形に変化する。

そして上の画面のようなツールバーが同時に表示される。「Isolate」、「Remove」、「Widen」、「Resize」、「Save Clip」、「Select More」という表示である。

ここで「Isolate」をクリックすると、黄色で覆われた部分だけが切り出される。

上の画面のように黄色で覆われた部分だけが残って表示されている。（上の画面は既に次の操作に入っている）

ただしこのままではまだ広告などが残っているので、更に広告の部分を選択し（赤い線で囲む）、クリックする。

この場合、選択した部分を取り除きたいので、ツールバーの中の「Remove」をクリックする。そうすると、黄色で覆われた部分が取り除かれる。

取り除いた後も同じような操作で不要な部分を取り除き、上の画面のように取り出したい記事だけを残す。

うえで説明した操作では、「Isolate」と「Remove」を使用して、所定の記事を切り出した。しかし、うまくマウスのポインターを持って行くと、所定の記事だけを選択することも可能なので、「Isolate」をクリックするだけで簡単に所定の記事を切り出すことも可能である。

上のように記事の切り出しはうまく行ったのだが、記事が横に広がりすぎている。これを希望のサイズに変更するのが、「Resize」である。

改めて、記事を選択して、ツールバーを表示して、ツールバーの「Resize」をクリックすると上の画面のようになる。上の画面は画面の一部分を表示しているのだが、よく見ると左の辺だけでなく、所定の記事の周りに赤矢印で示したように小さな四角のマークが表示されている。

記事の画面の周りに表示された小さな四角をマウスでクリックし、クリックしたままマウスを動かすと、記事のサイズが変更できるのが分かる。いろいろの部分の四角を動かしてみると、どういう操作で記事の形が変化するか理解できる。

希望のサイズに変更できたら、マウスのクリックを離すと上の画面のようにサイズが変更できる。

このサイズを変更した記事を元のようにブラウザの画面いっぱいに表示するには、もう一度記事を選択して、ツールバーの「Widen」をクリックすれば良い。記事がブラウザの画面いっぱいに広げられる。

次回は、ツールバーのその他のボタンの説明と、切り出した記事の保存について説明する予定だ。