ブログ執筆の際に使える『画像加工』テクニックやツールのまとめ

Developers.IO ブログ執筆ノウハウまとめ

#画像編集

しんや

2020.03.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ブログ執筆に於いて『画像』は欠かせない要素です。Developers.IOに於いてもその点は同様で、アイキャッチ画像や各種手順等に添えて表示させてエントリ内容の幅を広げ、また色彩的・雰囲気にも画像があることでアクセントが出来、見栄えも良くなります。

そこで当エントリでは、Developers.IO執筆者がブログに活用するのに便利なツールや各種小技について、過去のDevelopers.IOエントリを中心に紹介していきたいと思います。

画像(スクリーンショット)取得

Macの場合

Macでのスクリーンショット取得に関しては、基本的にはMacのショートカットコマンドを使う形になるかと思います。

Google Chromeのキャプチャを撮る場合、下記のエントリが詳細な手順について解説しているのでオススメです。

操作手順としてマウスアイコンを合わせて撮りたい、というのであればこちらの技が使えます。

取得したスクリーンショットの画像ファイル名に関する設定はこの辺りのコマンド群で切替が可能です。

Windowsの場合

Windowsの場合も、OS毎にショートカットコマンドでキャプチャを撮ることが出来るので、まずはここから始めてみるのが良いでしょう。

画像加工

Macの場合は「Skitch」が手軽に利用出来るのでオススメです。個人的にもこれでほぼ事足りています。下記エントリではその他幾つか便利なツールも紹介されています。

個人的には、ちょっとしたアイキャッチ画像を作る時は「GIMP」を使っています。

Windowsの場合であれば「Monosnap」が使い勝手も良く、オススメです。

ちなみに、ちょっとした雑コラ的な画像加工であれば、下記の様にMicrosoft Officeを使うというのもアリかと。(※実際、単純な切り貼り加工であれば全然事足りるとは思います)

ファイル一括操作

ツールでカバーしているものもありますが、OSの操作で複数ファイルのサイズや属性を一括で変更するのも良く使う手順です。

表示画像の罫線設定

最後に小ネタ。添付表示させた画像に罫線を表示させたい、という場合のスタイルシート(CSS)設定を備忘録代わりに残しておきます。

当該ブログエントリ内に表示させた、本文エリア内の画像全てに所定のCSS設定を効かせたいという場合であれば.editable_contents imgを新しくエントリ個別のCSS設定エリアに記載してください。下記の場合は黒(black)の1px実線、角を丸めた形で描画します。

.editable_contents img {
border-radius: 6px;
border: 1px solid black;
}

任意の画像にのみ、指定のCSS設定を効かせたい場合は添付した画像のimgタグ内に以下のstyle属性を追記することで実現出来ます。下記の場合は黒色の1px実線で描画します。

<p>
<a href="https://xxxxxxxxxxxxxx/xxxxxxxx/xxxx/xx/xx/xxxxxxxxxxxxxx.jpg">
<img
  style="border:1px solid black;"
  src="https://xxxxxxxxxxxxxx/xxxxxxxx/xxxx/xx/xx/xxxxxxxxxxxxxx.jpg"
  alt=""
  width="1070"
  height="769"
  class="alignnone size-full wp-image-533496" /></a>
</p>

表示画像の幅指定

もう1つ小ネタ。添付した画像のサイズは、そのファイルに拠って縦横比率は様々ですが、所定のサイズで添付したと思ったらサイズ感が釣り合わなかったりしてちょっとサイズを調整したいなー、なんて事もあるかと思います。下記は添付直後の設定内容。見やすくするために改行を加えています。

<p>
<a href="https://xxxxxxxxxxxxxx/xxxxxxxx/xxxx/xx/xx/xxxxxxxxxxxxxx.jpg">
<img
  src="https://xxxxxxxxxxxxxx/xxxxxxxx/xxxx/xx/xx/xxxxxxxxxxxxxx.jpg"
  alt=""
  width="1070"
  height="769"
  class="alignnone size-full wp-image-533496" /></a>
</p>

本来であれば縦横それぞれ設定値の比率を合わせる形で設定すべき...なのでしょうが、私が良くやるのは幅だけ残して設定する方法。コンテンツ部分の横幅だけに気を付ければ良いですし、表示には差し支えないのでこれで行っちゃってます。

<p>
<a href="https://xxxxxxxxxxxxxx/xxxxxxxx/xxxx/xx/xx/xxxxxxxxxxxxxx.jpg">
<img
  src="https://xxxxxxxxxxxxxx/xxxxxxxx/xxxx/xx/xx/xxxxxxxxxxxxxx.jpg"
  alt=""
  width="600"
  class="alignnone size-full wp-image-533496" /></a>
</p>