プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. ツール紹介

無料ブログ素材サイト〜加工まで【現役Webエンジニア】

最終更新日:2019/03/29

pixabay-image

ブログで画像や、gifなどを使う時に便利なツール。
ウェブサイト、使い方。まるまるセットでの紹介です!

無料の画像素材

記事冒頭に画像を置くと、記事が楽しいイメージになるので、よく使っています。
この記事の頭にある画像も、Pixabayでダウンロードしてきたものです!

今から紹介する3サイトは、会員登録不要・無料なので是非使ってみてください。

Pixabay

pixabayでは、使用無料の画像やビデオを探す事ができます。 商用利用が可能で、帰属表示も必要ありません。

Pixabay

Pixabayでは、使いたい画像を、

  • 文字検索
  • 人気順
  • 色あい
  • サイズ
  • 向き

で絞り込む事ができて、非常に便利です。

画像サイズも選択する事ができます。

pixabay-download

PAKUTASO

PAKUTASOさんは20000枚以上の画像を無料利用する事ができ、日本人の方の画像素材が多いのが特徴です。
PAKUTASO

アクセス数の天使! 「河村友歌」さんは皆さん一度は見たことがあるのではないでしょうか?!
河村友歌さん素材

イラストや

ご存知の方も多いと思います。可愛いイラストを無料配布してくれているサイトです。
イラストや

サンタ

ScreenShotの撮影 & 裏技

Macではcommand + shift + 4で、範囲選択したスクリーンショット(png形式)を撮ることができます。
全画面もcommand + shift + 3で撮ることができます。

一枚の画像にできるだけ多くの情報量を撮影したい時は、GoogleChromeの検証機能を利用します。

二本指クリック > 検証と進むと上部にGoogleChromeの上部に以下のような画面が現れます。
Responsive 50%を選択すると、画面に写る情報量を増やして、スクリーンショットを撮影できます。

そのほかにも、異なるデバイスでの表示を撮影したい時に、GoogleChromeの検証機能は大活躍します。

chrome

webサイトの画面全体を撮影するには、検証画面の上部右側にある縦3つの点をクリック > Capture fullsize screenshotを選択します。

shot

gifの撮影

gifの撮影にはGIPHYCaptureを使用しています。
詳しい解説はこちらの記事でしているので、興味のある方は是非読んでみてください。

Iphoneの画像の取り込み

Iphoneで撮影した画像を使用する場合は、Slackを使って送ったり、GoogleDriveにアップしています。
まとめて、画像を取り込見たい時は、イメージキャプチャアプリが便利です。

使い方は、usbでMacとIphoneを接続。
アプリケーションからイメージキャプチャを起動
保存先を指定して、全てを読み込むを選択します。

image capture

画像加工Skitch

Skitchとは、Evernote社が提供する画像編集 アプリ で、Evernoteの中の機能の一つとして利用が可能です。2016年1月22日以前は、Mac版以外も利用が可能でしたが、現在はMac版のみダウンロードが可能です。Windows版、iOS版、 Android 版のサポートは終了しています

Skitchをダウンロードすると、command + shift +5でスクリーンショットを撮ってから、そのまま画像編集をする事が出来ます。

Skitchでできる画像加工

  • 文字入れ
  • モザイク
  • トリミング・回転
  • 画像形式の変更
  • お絵かき
  • 図形書き込み

skitch

画像を保存する時は、ファイル > エクスポートを選択します。

Skitchは以下のリンク先でダウンロードする事ができます。
Skitch

画像圧縮

gifや、スマートフォンで撮影した画像などは容量が大きいので、圧縮するように心がけています。
画像を圧縮するときは、iLoveIMGが便利です。
iLoveIMGはドラッグ&ドロップするだけで利用する事ができ、一度に15枚まで対応しています。

画像名の一括変更

画像名を一括変更する場合は、Finderから画像を保存しているフォルダに移動します。
ctrl +a で全てを選択し、そこで二本指クリック > 〇〇項目の名前を変更する 
で置換をする事ができます。

image-replacement

WordPress上での使い方。

altタグは必ず指定しています。

ホームページ内に画像を設置する際は必ずalt属性のタグを設置し、altタグへは画像に合った説明文を入れましょう。
alt(オルト)タグとは、ウェブページ内の写真データやイラストデータなど画像データに設定する際に挿入する画像の説明文になります。

表示に関しては、border,mediumというクラスを用意しています。
borderは、枠。mediumは、max-width:350px;です。

もし、画像加工や、gifを撮るならこっちのが便利だよ!などのご意見等ありましたら、是非コメント欄にて教えてください!

The following two tabs change content below.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中 としても活躍しているので常に酒臭い/しかも190cmの巨人でもある。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP