Nakkan Base

便利機能

サイト全体をスクリーンショットする(Chrome版)

No Comments

ブログ 便利機能

一発でサイト全体をスクリーンショットする方法です。

1.　デペロッパーツールを開く。
2.　「commandキー+Shiftキー+pキー」を押す。
3.　「フルサイズのスクリーンショットをキャプチャ」を探してクリックする。
4.　画像がダウンロードされる。

あら。

なんて簡単。

FontAwesomeのアイコンが表示されない?!

No Comments

css/scss ブログ リンク 便利機能

FontAwesomeのアイコンが表示されない時、確実な方法があった。

やっぱりこれも擬似要素を使います。

=css=

time::before {
  content: '\f017';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  line-height: 1.5;
}

簡単に表示されそうなものだけど、プラグインを入れていたとしても表示されなくて困った。

とにかくFont Awesomeは、アイコン画像というより文字として認識した方が理解できるとわかりました。

★FontAwesomeでアイコンが□（四角）になって表示されない場合の対策まとめ（:after:before利用時）

ついでに、バックスラッシュ(\)を入力する方法です。

英数入力にして

option(alt)キー＋￥

png画像の編集に便利なリンク

No Comments

ブログ リンク 便利機能

まずは一番よく利用させてもらっているリンク。

これは、jpg画像を透過してpng画像にしたいときに利用させてもらってます。

★WEBブラウザ上で簡単に透過PNG画像を作成できるツール | 無料で画像を加工できるサイト PEKO STEP

「ファイル」の「開く」と「保存」だけで完結する、ほんとに簡単なツール。

透過手順も透過したい色をクリックするだけ。

そしてこのツール、よく見れば左のメニューから他にもいろんな基本的機能があります。

ちょっとした編集には大助かりですね。

次も無料で便利な画像編集のツールサイトをご紹介します。

★iLoveIMG | 画像編集用オンラインツール

普通にpng画像をサイズ変換すると透過部分が透過じゃなくなってしまうので、こういう「png画像はpng画像のまま」サイズ変換してくれるツールはありがたいです。

あと、ファィルが大きすぎるpng画像などは圧縮する必要があるときにも便利です。

こちらのサイトも良いです。

★PNG・JPEGファイル圧縮ツール|無料で80%圧縮