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

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

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

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



＜概要＞

　[目次へ戻る]

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

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

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


＜gifアニメーションを作る＞

　[目次へ戻る]

下の画像が、gifアニメーションの例です。

この電光掲示板風のgifアニメーションを作る方法は幾つかありますが、
簡単に作成できるツール(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. 「無料レンタルサーバーご利用お申し込み」というボタンをクリックします。
    4. メールアドレスの登録を求められるので、
      欄に記入して、「確認メールを送信」ボタンをクリックします。
      ※ここで登録するメールアドレス宛に、
      　サーバーのメンテナンスや障害情報などが送信されるので、
      　ちゃんと受け取り読めるアドレスを登録しましょう。
    5. 「確認メール」の【お申し込みURL】に記載されているURLを
      クリックするか、コピー&ペースとして開きます。
    6. パスワードやあなたのお名前など、幾つかの項目がありますので、
      必要な箇所に記入して、最後にある「利用規約」を読んだら、
      「利用規約に同意する」の左側の小さな四角を
      クリックして、チェックマークを入れたら、
      「確認画面に進む」ボタンをクリックします。
    7. 確認画面の内容に問題なければ、
      「会員登録を確定する」ボタンをクリックします。
      (すると、「会員登録完了のお知らせ」という題にあるメールが送られて来ますので、目を通しておいて下さい。)
    8. 次に表示されたページの「ログイン」ボタンをクリックします。
      すると、「エックスドメイン管理パネル」というページが表示されます。
    これで、レンタルサーバー(の契約)が用意できました。
  2. 「エックスドメイン管理パネル」というページの左下の方にある、
    「➡︎無料レンタルサーバー」をクリックします。
  3. すると、表示されたページで、「サーバーID」を求められますので、
    欄に任意の綴りを記入して、
    「サーバーIDの登録（確認）」ボタンをクリックします。
    • この「サーバーID」というものは、あなたの管理するURLの一部になります。
    • 「サーバーID」の綴りは普通、
      サイト(日本ではホームページとも呼ぶが)の名称にちなんだ綴りにします。
      例えば、「ニッチでドワーフなwiki」というサイトを作りたい場合は、
      そのままでは、綴りが長くなってしまうので、
      「ndwiki」等とある程度略してやります。
    • 「サーバーID」は、他の人(サイト)と重複してはいけない筈なので、
      「入力したサーバーIDはご利用いただけません。別のサーバーIDを入力してください。」等と表示されたら、綴りを変えてください。
  4. 確認ページが表示されるので、IDに入力ミスなどがなければ、
    「サーバーIDの登録（確定）」をクリックします。
    • このページには、「戻る」ボタンが設置されていないようです。
      ブラウザの「戻る」ボタンをクリックしてしまうと、エラーが発生しますので、
      綴りを修正する場合は、もう一度
      左下の「➡︎無料レンタルサーバー」をクリックします。
  5. サーバーIDの登録が完了したら、
    再度、「➡︎無料レンタルサーバー」をクリックします。
  6. するとさっきとは違うページが表示されますので、
    「HTMLサーバー」の「利用を開始する　＞」ボタンをクリックします。
    すると、初期設定にやや時間が掛かるらしく、
    直ぐには次のページが表示されません。
    が、1〜2分待たされて、その旨のページが表示されます。
  7. 再度、「➡︎無料レンタルサーバー」をクリックします。
    すると、さっきとは若干内容が異なる表示になります。
  8. 「HTMLサーバー」の右側は
    「管理パネルログイン　＞」というボタンに変わっている筈ですから、
    それをクリックします。
  9. 「サーバー管理パネル HTMLサーバー」というページが表示されますので、
    右の方にある「FTP」の「➡︎FTPアカウント設定」をクリックします。
  10. 「FTPアカウント設定」というページが表示されますので、
    その「FTPアカウント」の
    「WebFTP」という欄にある「ログイン」をクリックします。
  11. すると
    「ファイルマネージャーにログインしています。
    　※しばらく待っても移動しない場合、はログインするを押してください」
    というページが一瞬表示されたのちに、
    「Xdomain ファイルマネージャー」というページが現れます。
    • 恐らく、最初から、
      「index.html」3 KB
      「default_page.png」6 KB
      「.htaccess」1 KB
      という三つのファイルが存在している筈です。
      (これらの説明は、ここでは割愛させて頂きます)
    • リストの一番上にある「..」は、ファイルやフォルダではなく、 「ひとつ上の階層に移動する」事を意味しています。
  12. 先ほど得た「ledsb_result.gif」ファイルをアップロードします。
    • 通常は、フォルダの階層で整理します。
      が、面倒であれば、そのままの階層にアップロードしてしまっても、
      使えますので、「フォルダ階層」の概念がわからない場合は、
      この後のフォルダ作成・移動は読み飛ばしてしまっても構いません。
    1. 左上の方にある「フォルダ/ファイル作成」をクリックします。
    2. 画面の表示に従って、新しくフォルダを作成して下さい。
      電光掲示板風のgifアニメーションを保管するので、
      「banner」などとしておくと、後で探しやすいです。
    3. 四角の欄の中に「banner」(或いは任意の綴り)と記入して、
      「フォルダ追加」ボタンをクリックします。
    4. すると数秒で、欄の中に書いた綴りが消える筈です。
      特にエラー表示などがでなければ、
      「このウィンドウを閉じる」ボタンをクリックして下さい。
    5. 数秒、間が空くかもしれませんが、
      先ほどのページのリストに、今作ったフォルダが現れる筈です。
      そのフォルダの名称の左側のアイコンをクリックすると、
      その階層に入れます。
      • まだ何もアップロードしていないので、
        当然のように「ディレクトリは空です。」と表示されている筈です。
    6. 「banner」フォルダ内にファイルをアップロードします。
      1. 上の方にある「アップロード」をクリックして下さい。
      2. すると
        「参照ボタンをクリックして、ファイルを選んでください。」
        というウインドウが現れますので、
        「選択」ボタンをクリックして下さい。
        (五つありますが、どれでも構わない筈です)
      3. ファイル選択のウインドウが現れますから、
        先ほどの「ledsb_result.gif」ファイルを選択して、
        「開く」ボタンをクリックして下さい。
      4. ファイル選択のウインドウが閉じて、
        「参照ボタンをクリックして、ファイルを選んでください。」
        というウインドウの一覧に、
        今選択したファイルの名称が表示されている筈です。
      5. そうしたら、
        「参照ボタンをクリックして、ファイルを選んでください。」
        というウインドウの「アップロード」ボタンをクリックして下さい。
        (「Xdomain ファイルマネージャー」というページの方ではありません)
      6. すると、数秒後に一覧からファイルの名称が消えて、
        更に、数秒後に「Xdomain ファイルマネージャー」ページの方のリストに
        今アップロードしたファイルが現れる筈です。
      7. そうしたら、
        「参照ボタンをクリックして、ファイルを選んでください。」
        の方の「このウィンドウを閉じる」ボタンをクリックします。
      8. 「Xdomain ファイルマネージャー」ページの方のリストにある
        「ledsb_result.gif」の名称をクリックすると
        ファイル名の変更ができますから、
        分かりやすい名称にしておく事をお勧めします。
    これで、gifファイルのアップロードができました。

＜webページ上に配置する＞

　[目次へ戻る]

  1. まず、ちゃんとブラウザで表示できるか確かめます。
    ブラウザで空白の新規ページを開いたら、
    そこのURL欄にgifファイルのURLをコピー&ペーストして開いて下さい。
    • gifファイルのURLは、
      「Xdomain ファイルマネージャー」というページの「操作」の列にある
      歯車のような形をしたアイコンをクリックすればわかります。
      また別のウインドウが現れて、情報が記載されています。
      その中の、
      「オーナー」の欄にある文字の後ろに、
      「場所」の欄にある文字列を加えた文字列が、そのファイルのURLになります。
      今までの例の流れからすると、そのURLは
      「ndwiki.html.xdomain.jp/banner/ledsb_result.gif」 になっている筈です。
      (フォルダ名とファイル名は、任意に変えていればそれになっている筈です)
  2. ちゃんとgifアニメーションが表示されればOKですが、
    表示されなければ、何処かがおかしいと思われますので、
    最初から、見直してみて下さい。
  3. gifアニメーションのURLが判った所で、
    そのURLを任意のページに埋め込みます。
    • htmlの記述の仕方と解説は、他所に譲りますが、
      imgタグを使って記述します。
      などと記述するわけです。
    なお、私が管理しているページへの記述は、私がやりますので、
    そのgifアニメーションのURLを教えて頂ければ大丈夫です。

＜イベント告知や宣伝などに使う＞

　[目次へ戻る]

なぜ、gifアニメーションを使うと、イベント告知や宣伝などに使えるかというと、
狭い限られたスペースに貼られても、アニメーションで文字を流せるため、
その内容を、キャンペーンやイベントなどに合わせて変えれば良いだけだからです。

新しく作ったgifファイルを、元のgifファイルに上書きしてしまえばいいのです。
(バックアップや履歴が欲しい場合は、元のgifファイルの名称を変更して、新しいgifファイルの名称を元のgifファイルの名称にしてやればいいのです)
gifファイルの名称が変わらなければ、ページに記述したURLも同じなので、
いちいちページを書き換える必要がないという事です。

もう少し詳しく例を挙げましょう。
ここまでの作業で、
フォルダの名称は「banner」、
ファイルの名称は「ledsb_result.gif」、になっていて
新しく作ったgifファイルに置き換えたいとします。
それなら例えば、
元のgifファイルの名称を
「ledsb_result-close20180915.gif」などと変えてやり、
新しいgifファイルの名称を「ledsb_result.gif」にしてやればいいだけです。
(新しいgifファイルをサーバーにアップロードしなくてはならないが)

すると、サイトのページでは、
と記述されている箇所を修正しなくていいのです。

この方法を使えば、サイトの管理人にgifファイルの内容が変わった事を
報告しなくても済むのです。

こういった手順でバナーを作成して、
サーバーにアップロードして、
そのURLを私に一度教えて頂くだけで構わないのです。

なお、gifファイルの表示されるサイズが大きすぎる場合には、
こちらで勝手に縮小表示します。
例えば、

このままでは、ページの文章と並べて表示するには大きすぎるので、


と記述して、表示サイズを小さくします。
すると、こんな風になります。
文章の一行の幅に近付けると読みにくくなってしまい、広告効果が薄れるので、

文章二行分の幅の
スペースがあれば、
こんな風になります。

お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。


人気ブログランキング
ウェブデザインランキング

Views: 48