ローディング・読み込み中の画像を簡単に作成できるツール

WordPressテーマ「CUBEY (tcd023)」
WordPressテーマ「Grider (tcd015)」

ページを読み込みする時などに使う「ローディング画像」は
ジェネレーターで簡単に作成することができます。

ローディング・読み込み中の画像を簡単に作成できるツール

ここでは2種類のジェネレーターを紹介します。

Preloaders

Preloadersはこちらから

ローディング・読み込み中の画像を簡単に作成できるツール

項目の意味はそれぞれ以下の通りです。

Select your preloader ローディング画像のデザイン
Image type 画像の形式(標準は「GIF」でOK)
Transparent background 背景を透明にする場合は「Yes」
Foreground color 画像の色
Background color 画像の背景色
Animation speed アニメーションの速さ
Preloader size (px) 画像の大きさ
Keep original colors デフォルトの色を使う場合は「Yes」

画像を作成したら「Gecerate preloader」をクリックします。

右側に作成した画像が表示されます。
ローディング・読み込み中の画像を簡単に作成できるツール

「Download Now」をクリックすると画像をダウンロードできます。

Loader Generator

Loader Generatorはこちらから

ローディング・読み込み中の画像を簡単に作成できるツール

イメージの種類は以下の通りです。

Line ローディング画像
Circle ローディング画像
Arrow ローディング画像
Snake ローディング画像
Pulsate ローディング画像
Wifi ローディング画像
Rectangle ローディング画像

こちらのジェネレーターはリアルタイムでイメージを確認できるので
作成しやすいと思います。

画像を作成したら「DOWNLOAD GIF」をクリックします。
ローディング・読み込み中の画像を簡単に作成できるツール

このように表示されるので画像をクリックして別窓を開きます。
別窓で表示された画像を右クリックで保存します。
ローディング・読み込み中の画像を簡単に作成できるツール

あとがき!

ページの読み込みや遷移に時間が掛かる場合は
ローディング画像を使用するとプロっぽいですね!

GIF画像を自分で作成すると面倒なので(作りませんがw)
このようなジェネレーターがあると便利です。

先に紹介したPreloadersは画像を見ながら作成はできませんが
透明背景の指定ができるのでどんなサイトにも使えそうです。

でもデザインはLoader Generatorの方がシンプルにまとまっていて
使いやすそうな印象です(‘-’*)

WordPressテーマ「Reviewer (TCD026)」
WordPressテーマ「IZM(TCD034)」

こんな記事も書きました!

home-office-569153_1280

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

background-2850091_1280

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

alarm-clock-2132264_1280

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

season-1985856_1280

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

desktop-2325627_1280

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

MORE

laptop-2838921_1280

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

MORE

computer-1185626_1280

CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...

MORE

coffee-2446645_1280

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

MORE

laptop-computer-1245981_1280

コピペで使えるCSSデザイン枠テンプレート

どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...

MORE

background-2846221_1280

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

flower