food-2940553_1280

カスタマイズ

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

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

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

ここでは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の方がシンプルにまとまっていて
使いやすそうな印象です(‘-’*)

関連記事

  1. laptop-computer-1245981_1280

    カスタマイズ

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

    どシンプルなものからちょっと凝ったものまで、CSSでスタイリングし…

  2. background-2846221_1280

    カスタマイズ

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

    そうそう、こんな画像ってたまに必要なときがありますよね!笑…

  3. season-1985856_1280

    カスタマイズ

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

    子テーマについての前置きWordPressはほとんどの方が既存のテ…

  4. laptop-2838921_1280

    カスタマイズ

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

    CSS編集方法についての前置き「管理画面」→「外観」→「テーマ編集…

  5. background-2850091_1280

    カスタマイズ

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

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

  6. cup-2884023_1280

    カスタマイズ

    名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

    mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして…

コメント

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

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

WPテーマ

WordPressテーマ「Chill (tcd016)」
  1. laptop-2562361_1280

    WordPress基礎講座

    WordPressのパーマリンク設定
  2. desk-2715557_1280

    WordPress応用講座

    WEBサイト作成に役立つツールまとめ
  3. cup-2884023_1280

    カスタマイズ

    名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書…
  4. bench-1289528_1280

    WordPress応用講座

    フロントページを固定ページに設定しつつ、最新の投稿ページも使いたい!
  5. list-1925752_1280

    WordPress基礎講座

    パーマリンクの「category」を非表示にするには?
PAGE TOP