ブログカスタマイズのお役立ちサイト様たち

ウェブ

ブログカスタマイズのお役立ちサイト様たち

私がカスタマイズの際によく使わせていただくサイト様たちを、紹介してみます。

Optimizilla

画像のバイトを下げ、軽量化するためのツールサイト。
任意の倍数にまで絞ることも可能。

オンラインイメージ最適化ツール

OptimizillaはJPEGやPNGフォーマットのイメージを最小サイズに圧縮する、高性能のイメージ最適化ツールです。

画像背景透過処理

画像の背景を透過したい場合には、こちらさまを利用。
数字を調整すれば、同系統の色もかなりの程度で抜くことができます。
さらにこちらでは、画像の中の特定の部分の「色番号」まで、確認することが可能なので、非常に便利です。

画像背景透過処理

画像の任意の色を透過色にします。

バナー工房

ぼかしなど、高度な画像加工なら、こちらさま。
ほとんどあらゆる加工が可能なようです(すべての機能を使ったことはないので)。

オンラインで画像加工と編集ができるWEBアプリです!

「バナー工房」は、登録・インストール不要の誰でも簡単に画像を編集できるWebアプリ(全て無料のフリーソフト)です。 編集したい画像(写真)を選択し、画像を加工するをクリックしてください。

原色大辞典

色を選ぶとき。

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

HTML実体参照変換

普通の人は、あまり使うことはないと思いますが、タグを変換するためのサイトさま。

HTML実体参照変換

入力された文字列内の&、"、<、>を実体参照に変換します。変換はJavaScriptでおこなわれます。

web上手

計算機を使わずに、手っ取り早く、だいたいの「変更後の画像の大きさ」を確認したいとき。

写真の縦横比を固定して拡大縮小値を計算するツール

まずは「元写真の横幅、縦幅」の項目に、元になる写真の横幅と縦幅を入力します。後は、「変更後の横幅、縦幅」の項目で横幅を入力すれば、縦幅と倍率が計算され、縦幅を入力すれば、横幅と倍率が計算されます。または倍率を入力すれば、横幅と縦幅が計算されます。

FREEFORMATTER.COM

あらゆるコードをきれいに並べてくれるツールサイト。
HTMLのvalidatorもあり。

YAMATO ENGINEER BLOG

Google Material Iconsを使うときに、非常に便利。

Google Material Iconsを疑似要素(before/after)に文字コードを指定して使う

アイコンフォントといえば『Font Awesome』ですが、デザイン的にはGoogleマテリアルアイコンのほうが好みです。ただ、疑似要素への使い方などは公式サイトで書いていないので調べてみました。他のアイコンフォントは疑似要素に対してcontentプロパティで文字コード設置する方法など書いていますが、Googleマテリアルアイコンは無いんですよね。

プラカンブログ

flexの細かい使い方を、見やすく図解で紹介してくれている便利サイト。
flexを勉強するなら、こちらがおすすめ。

【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。

こんにちは。デザイナーのSUGIYAMAです。 前に「意外と忘れがち?CSSで要素を上下左右に中央配置する方法」という記事で少し紹介しましたが、フレックスボックス(display:flex)には様々な使い方があるので、ど忘れ防止もこめて、ご紹介します。

AOSYSTEM

HTMLの特にhead部分に、要らない全角の空白が入っていないかどうかを確認するなら、こちらさま。

全角チェッカー

HTMLで日本語ページに併せて英語ページを作成するなどの場合、うっかり全角文字が含まれていないか確認するツールです。各種プログラムコードやドキュメントのチェックにも最適。

文字数カウント

文字数を確認するには、こちらを使わせていただいています。
このデザインが好きなので、ほかよりも、やはりこちらで。

文字数カウント

使い方:文字数を確認する際には、下の欄に本文を張り付け、「字数を数える」ボタンを押してください。原稿用紙換算、段落数もカウントすることができます。内容をクリアするときは「リセット」ボタンをご利用ください。

RESPONSIVE WEB DESIGN CHECKER

この手のツールはいろいろありますが、ここが簡単で、使いやすいので。
もちろん、これだけでよしとしているわけではありません。
なお、ここは、ブラウザのズームを100%にして使わないと、誤差が出ますので注意。

PageSpeed Insights

気持ち的に、あまりしょっちゅう使うとよくないのですが笑、たまに。

PageSpeed Insights

PageSpeed Insights について
PageSpeed Insights は、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案します。

関連記事

コメント

コメント(6)
情報ありがとうございます
ここで教えてもらった原色大辞典と最適化ツールは既にブックマークしてます。
今回はバナー工房をブックマークします。

柴犬マイア

2020/02/24 06:22 URL 編集返信
Janedoe1471
To 柴犬マイアさん
そうですか、いろんな画像の加工ができるようなので、使いこなせれば、かなり強い味方になるかもしれませんね^^

Janedoe1471

2020/02/24 15:18 URL 編集返信
はじめまして
とても詳しいサイトで感心しました。大変勉強になります。

grace

2020/02/24 20:03 URL 編集返信
Janedoe1471
To graceさん
こちらこそ、余計なことを言ってしまいまして(汗)。
てつぼさんでおられるかと、推測しておりますが、確かに記事部分と重なるのは、好みの問題ですね。

Janedoe1471

2020/02/24 21:03 URL 編集返信
To Janedoe1471さん
ご察しの通りです。やはりプロフィール画像は変えないとダメですね。

Grace

2020/02/26 09:48 URL 編集返信
Janedoe1471
To Graceさん
このプロフ画像、可愛くて好きなんですが^^
早く新作が承認されるといいですね♪

Janedoe1471

2020/02/26 15:47 URL 編集返信
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム