手順書などを画像付きで作成する方法

【ポイント】

先に画像を完成させます。

前回、「先に文章を書いてしまおう!」と投稿しましたが、画像を先に完成させたほうがいいと思いました。

ちなみに前回の記事がこちら。

手順「画像を作成する」

  1. 操作しながら画像キャプチャする。
    • Firefoxの全体キャプチャを利用する
    • Winshotのホットキー(フリーソフト)で簡単キャプチャする
    • SnippingToolで一個ずつ作成する
    • スクリーンショット(Winキー+PrintScreen)でとりあえずフォルダに放り込む
    • PowerPointを持っている方は動画キャプチャ機能でもOKです。
  2. トリミング
    • Windows10のフォトアプリの機能でトリミングする。
トリミング

トリミング

道路のフリー写真素材
https://www.photock.jp/detail/road/732/

  1. のり弁とマーキング、保存
    • Windowsのペイントアプリで〇や■で表示したくない部分を上塗りし、リネーム、jpg保存する
  2. 画像が完成

手順「コンテンツ作成」

  1. VSCODEのマークダウンプレビューで、画像タグを使い、先に画像貼る。(VSCODEのプレビューには画像がズラーっと表示されることになります。)
![画像の説明](パス1)

![画像の説明](パス2)

![画像の説明](パス3)
  1. 文章を画像の合間に記述していく。 画像が無くても操作できるように書くのがコツ。
  2. 画像の説明を書いて(どこでもいい)、切り取り、cliborに記憶させる。
  3. コンテンツをある程度完成させる。OK?
  4. 「![画像](パス)」を削除して「画像」という文字列にしておく。
  5. VSCODEを全文コピーする。 その後メモ帳を開いて、ペーストしてすぐに再びコピーする(謎な行動ですが、こうしないとグーテンベルがマークダウンに反応しなかったので、とりあえずこうしてます。)
  6. WordPressにペーストする。公開するか保存する。
  7. メディアをアップする cliborに記憶している画像の説明をここで使う。
  8. クラシックエディタで開きなおす 画像をポチポチ貼っていく(メディア追加)
  9. とりあえず更新する
  10. 表示を確認

※ここ重要。公開してはいけないものがちゃんと隠せているか確認する。

お疲れ様でした。慣れれば簡単です。