電光掲示板風gifアニメーションをバナーに使う

私の運営するサイトやページに、
「gifを用意してくれたら貼りますよ」という部分が幾つかあります。

例えば、
アニメ・キッズ カラオケClub 一覧
アニメ・キッズ カラオケShop 一覧
などです。

そのgifの作り方や、設置の方法などを説明します。



<概要>

 [目次へ戻る]

大雑把に作業の全体を説明します。

  1. gifアニメーションを作成する
  2. サーバーを用意する
  3. サーバーにgifをアップロードする
  4. gifを表示させる

という具合になります。
gifアニメーションは簡単に作るツールがあります。
サーバーは無料のレンタルサーバーで構いません。
そのサーバーにアップロードし、
表示させたいページに、imgタグを記述するだけです。


<gifアニメーションを作る>

 [目次へ戻る]

下の画像が、gifアニメーションの例です。
この電光掲示板風のgifanimationを作る方法は幾つかありますが、
簡単に作成できるツール(webページ)がありますので、
それを今回は使います。

電光掲示板 Generator – LANDHERE
といページがありますので、上記リンクをクリックしてページを開いてください。
使い方は説明しなくても、何となく解ると思いますが、一応書いておきます。

  1. 電光掲示板 Generator – LANDHERE」を開きます。
  2. そのページをちょっと下に移動(スクロール)すると、
    「テキスト入力による生成」という段落があります。
  3. その段落の中に
    「テキスト(500文字以下/改行は無視されます)」
    と書かれた欄(長方形)があります。
    その欄の中に、表示させたい文章を書きます。(コピー$ヘーストでも可)
  4. そのまま「作成」ボタンを押しても構いませんが、
    「フォント」と書かれたポップアップメニューをクリックして、
    任意のフォント(書体)を選ぶ事もできます。
  5. 「仕上がり幅」という欄は、実際に表示させる、
    電光掲示板風のgifanimationの横幅(長さ)です。
    掲載するページ上のスペースに合わせた数値を記入します。
    例えば、「128」の場合はこう↓なります。
    「50」の場合はこう↓なります。
  6. 「余白の幅」と「消灯色(背景の色)」も指定できます。
  7. 「作成」ボタンを押すと、
    電光掲示板 Generator – LANDHERE」の
    ページ冒頭で表示されているgifアニメーションに反映されます。
  8. そのgifアメーションをクリックすると、
    完成したgifファイルがダウンロードされます。
    通常は「ダウンロード」フォルダ内に入りますが、
    右クリックすればダウンロード先を指定する事もできます。
    ※このダウンロードされた「ledsb_result.gif」ファイルを
     Macのプレビュー.appなどで開いてもアニメーションしませんが正常です。

<gifをアップロードする>

 [目次へ戻る]

上記で得られた「ledsb_result.gif」ファイルを
ネット上にアップロードする必要があります。
(自宅にあるコンピュータをネット上に公開する方法もありますが、ここでは割愛します)

  1. サーバーを用意します。
    • サーバーは、無料レンタルのもので構いません。
    • ここではサーバーの一例として
      Xdomain 」を新規に契約する方法を紹介します。
      (無料であっても、それを利用する事は法的には「契約」になる)
      ですが、他のサーバーでも構いません。
    1. Xdomain 」をクリックして開きます。
    2. ページ上方にあるメニューから「お申し込み」をクリックします。
    3. 「無料レンタルサーバーご利用お申し込み」というボタンをクリックします。

コメントを残す

メールアドレスが公開されることはありません。