カテゴリー別アーカイブ: 便利

ブラウザ上で操作できる画像編集ツール

オンライン　イメージエディタ
https://www.peko-step.com/tool/imageeditor.html

ブラウザ上で動作する無料の画像編集ツール。
インストール作業をすることなく、PCやスマートフォンで手軽に画像を加工することができます。

使用例：モザイクをかける場合
編集したい画像ファイルをドラッグ＆ドロップ。

画像ファイルドロップ前

画像ファイルドロップ後

モザイクのアイコンをクリック。

アイコンをクリック

モザイクをかけたい範囲をドラッグして指定。

編集したい範囲をドラッグして指定する

「モザイクをかける」ボタンをクリック。

「モザイクをかける」ボタンをクリック

モザイクがかかる

編集が完了したら、「ファイル」→「保存」をクリック。編集後のファイルがダウンロードされます。

「ファイル」→「保存」をクリックし、編集後のファイルをダウンロード

サイトのマルウェア感染等がチェックできる無料サービス

セキュリティ企業Sucuriが運営している無料マルウェアチェックサイト

https://sitecheck.sucuri.net/

sucu

URLを入力すると
・マルウェアが潜んでないか
・使用しているアプリーションのバージョンチェック
・ブラックリストに載っていなか
などが簡易的にチェックできる。

画像イメージのサイズダウン（ImageOptim）

マック用の画像イメージのサイズダウンを行うソフト
ImageOptim（イメージオプティム）
圧縮設定は最初の画面下のアイコンで

1

非可逆圧縮を有効にするにチェック。
圧縮率を設定する（初期状態は80％）

2

 

サンプル jpeg 画像
人とバスを注意して見て

943KB  元

1000700_h1

177KB  80％品質（問題なく使用可能）

1000700_h2

93KB  40%品質（荒さが判断でき全体的に暗くなる）
実際の容量より1/10になったことを考えると素晴らしい。

1000700_h3

 

サンプル png 画像
右の白いっぽい葉を注意して見て

1500KB  元

1000700_f1

266KB  80％品質（問題なく使用可能）

1000700_f2

180KB  40%（荒さが判断できる）
同じ系統の色なので比較的使える

1000700_f3

マックバージョン：MacOS10.14.3

レスポンシブサイトでイメージマップ（クリッカブルマップ）を設置する方法

1つの画像に複数のリンクを設置したいときに便利なイメージマップですが、レスポンシブサイトだと表示サイズによって1つのリンクしか反応しなくなります。
これはイメージマップの範囲がレスポンシブのように拡大縮小しないから。

レスポンシブサイトでイメージマップを利用したいときは「jQuery RWD Image Maps」というプラグインが便利です。
これでイメージマップの範囲も画像に合わせて拡大縮小します。
https://github.com/stowball/jQuery-rwdImageMaps

プラグインの読み込みとスクリプトの記述は下記。
━━━━━━━━━━━━━━━━━━━━
<script type=”text/javascript” src=”js/jquery.rwdImageMaps.min.js”></script>
<script type=”text/javascript”>$(‘img[usemap]’).rwdImageMaps();</script>
━━━━━━━━━━━━━━━━━━━━

また、イメージマップのコード生成には「HTML Imagemap Generator」が便利
http://labs.d-s-b.jp/ImagemapGenerator/

HTML Imagemap Generator

まずは画像をドラッグして読み込み

HTML Imagemap Generator

四角形・円形・多角形を選択し領域を作成します

※この記事は2018年12月現在の内容です。リンク先のドメイン変更やサイト構成変更によってリンク切れになる場合もあります。ご了承ください。

埋め込みGoogleMap の縮尺を変更する方法

まずGoogleMapで埋め込みタグを取得。
１、埋め込みたい地図を表示したら「共有」をクリック。
２、「地図を埋め込む」を表示。
３、埋め込みタグ（HTML）をコピー。
2018年　GoogleMapタグの取得

これで取得するタグは下記のような内容。
この羅列の中で「4f13.1」という表記を変更すると縮尺が変わります。

━━━━━━━━━━━━━━━━━━━━
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3246.426903155609!2d139.51303491525505!3d35.54315758022669!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f831781a0c4f%3A0x4225c0d743ccd56!2z44CSMjI3LTAwNjIg56We5aWI5bed55yM5qiq5rWc5biC6Z2S6JGJ5Yy66Z2S6JGJ5Y-w77yS5LiB55uu77yW4oiS77yR!5e0!3m2!1sja!2sjp!4v1544070708695″ width=”100%” height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
━━━━━━━━━━━━━━━━━━━━

「13.1」が尺度で、数値が小さいほどズームアップします。
1〜179の間で調節してみてください。

2018年 GoogleMap

デフォルト（「4f13.1」のまま）の表示

2018年 GoogleMap

1（「4f13.1」を「4f1」にする）の表示

2018年 GoogleMap

179（「4f13.1」を「4f179」にする）の表示

※この記事は2018年12月現在の内容です。GoogleMapの仕様変更により利用できなくなる場合もあります。ご了承ください。