ローディング・読み込み中の画像を簡単に作成できるツール
ページを読み込みする時などに使う「ローディング画像」は
ジェネレーターで簡単に作成することができます。
ここでは2種類のジェネレーターを紹介します。
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
イメージの種類は以下の通りです。
| Line |  |
| Circle |  |
| Arrow |  |
| Snake |  |
| Pulsate |  |
| Wifi |  |
| Rectangle |  |
こちらのジェネレーターはリアルタイムでイメージを確認できるので
作成しやすいと思います。
画像を作成したら「DOWNLOAD GIF」をクリックします。
このように表示されるので画像をクリックして別窓を開きます。
別窓で表示された画像を右クリックで保存します。
あとがき！
ページの読み込みや遷移に時間が掛かる場合は
ローディング画像を使用するとプロっぽいですね！
GIF画像を自分で作成すると面倒なので（作りませんがｗ）
このようなジェネレーターがあると便利です。
先に紹介したPreloadersは画像を見ながら作成はできませんが
透明背景の指定ができるのでどんなサイトにも使えそうです。
でもデザインはLoader Generatorの方がシンプルにまとまっていて
使いやすそうな印象です(‘-‘*)
こんな記事も書きました！
-
-
WordPressにヘッダー画像機能（カスタムヘッダー）がない場合の作り方
カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...
-
-
商用サイトで使えるフリー素材サイトまとめ
アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...
-
-
WordPressでCSSの反映を確認しながら編集する方法
CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...
-
-
コピペで使える固定ソーシャルボタンBOX
WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...
-
-
名刺代わりのサイトを思いっきしリニューアルしてみた件！カスタマイズTIPS色々書きました。
mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...
-
-
無料で簡単にロゴを作れるツール「LOGASTER」が斬新！
Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな～っ...
-
-
MacやiPhoneのスクショはめ込み画像を作る
そうそう、こんな画像ってたまに必要なときがありますよね！笑 これ、わざわざ画像を合わせ...
-
-
CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた
アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...
-
-
CSSでテーブル使わずに簡単レスポンシブ！下線だけ引いて横並びデザイン
こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...
-
-
WordPressをカスタマイズする前に子テーマを作っておく
子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...
