スクリーンショットのコラ画像作成手段としてはPhotoshop、その他画像加工ツールなどがありますが、Webサイトのスクリーンショットであれば、もっと簡単な方法でコラ画像を作成することができます。
ここではWindows版Chormeを例にして方法を紹介していこうと思います。
まず見本
GoogleがYandexに乗っ取られた！？
Twitter、サービス終了するってよ。1192年に閉鎖していたらしい…
必要なもの
・FireFoxかChorme
・Windows PC
※スマホでやる方法もあるだろうけどここでは紹介しない
コラ画像の作り方
まず最初に、先ほど紹介したスクリーンショットは合成で作ったコラ画像ではありません。本当にブラウザに表示されているものをスクリーンショットしたものです。
しかし、インターネットどこ探しても上記のようなものはないはずです。だって嘘だもの。
では、上記のような写真はどのようにして作られたのでしょうか。
答えは以下の動画を参考のこと
大雑把に言うとデベロッパーツールでブラウザの表示を無理やり書き換えています。
それでは文章でやりかたを紹介していきましょう。
１．書き換えたい文章を選択する
２．右クリックして「検証」をクリック or 「検証」のショートカットキーをクリック
３．そしたら画像のような画面が出てきます。予め選択しておいた範囲が選択されている状態となっているので、分かりやすいですね。→<div clas...というような表示になっていたら、右矢印をクリックして展開します。
４．青い部分を右クリックして「Edit HTML」を押したら、書き換えたい文章の部分を削除し、以下の画像のように書き換えたい文章に置き換えます。編集が終わったら、青色どこかしらクリックします。そうするとテキストボックスが消えて書き換えたい部分が変わります。
５．検証画面を閉じます。あとはスクリーンショットを撮るだけ。おつかれさまでした。
ファイアフォックスなどでも同じような手順で行けるはずです。
もし仮にこの文章書いたらどうなるのか知りたい！というときに使ってみてはいかがでしょうか。
