困ってること
スクリーンショットを使ってハンズオンマニュアルとか作ってる際に面倒なのが、センシティブ情報の隠蔽化です。
それらを（ブラウザ内限定ですけど）解決する方法として、CSS3のfilterプロパティ の blur を使うという方法を紹介します。
やり方
Image Blurring with Browser using CSS3 (Editing with Element selection) https://t.co/E2MtVuOcv4 @YouTubeさんから
— Kohei MATSUSHITA (@ma2shita) 2017年2月13日
- Google Chromeなら [デベロッパーツール]-[Elements] 、Firefoxなら [開発ツール]-[インスペクター] を表示します。
- ボカシたいエレメントを選択してCSSウィンドウ内のelement.style(もしくは要素)に filter: blur(5px) と入れ、EnterやTabを押して確定させます。（この瞬間にボケます）
- デベロッパーツールを閉じても効果は持続しますので、スクリーンショットをお撮りください。
以上です。
- 5pxではボケきらないかもしれません。blurの値を10pxとか調整してください
- リロードすると効果が消えます（あたりまえ）
応用編: いちいち選択するのは面倒だ
ボカシたいエレメントにIDや特定のクラスが割り当てられているのであれば、開発ツールのコンソールから直接
document.getElementById('nav-usernameMenu').style = 'filter:blur(5px)'
とすることで、いちいちエレメントを選択することも不要です。
Image Blurring with Browser using CSS3 (Editing with Console) https://t.co/FEn50SLZMA @YouTubeさんから
— Kohei MATSUSHITA (@ma2shita) 2017年2月13日
応用編: 一部だけボカシたい
タグを追加しちゃいましょう
Image Blurring with Browser using CSS3 (Append SPAN tag) https://t.co/cGzulxckjj @YouTubeさんから
— Kohei MATSUSHITA (@ma2shita) 2017年2月13日
ただし、画像の一部とかは（やれなくはないけど）面倒です。
ヒント: 画像に position: relative を指定してから position: absolute なboxを重ね、そのboxを filter: blur すればok
PowerPointに貼り付けた後、四角オブジェクトで隠せば？
PowerPointに貼り付けてから四角オブジェクトツールを重ねる方法があります。
これは紙出力の場合は大丈夫ですが、PDF等のデジタルデータ的には隠せていないんです。
かといって、スクリーンショットを取ってAdobe Photoshopのようなレタッチツールで隠す作業も面倒です。
あとがき
結構捗るですよ。