私の運営するサイトやページに、
「バナーを用意してくれたら貼りますよ」という部分が幾つかあります。
例えば、
「アニメ・キッズ カラオケClub 一覧」
「アニメ・キッズ カラオケShop 一覧」
などです。
そのgifの作り方や、設置の方法などを説明します。
＜概要＞
[目次へ戻る]
大雑把に作業の全体を説明します。
- gifアニメーションを作成する
- サーバーを用意する
- サーバーにgifをアップロードする
- gifを表示させる
という具合になります。
gifアニメーションは簡単に作るツールがあります。
サーバーは無料のレンタルサーバーで構いません。
そのサーバーにアップロードし、
表示させたいページに、imgタグを記述するだけです。
＜gifアニメーションを作る＞
[目次へ戻る]
下の画像が、gifアニメーションの例です。
この電光掲示板風のgifアニメーションを作る方法は幾つかありますが、
簡単に作成できるツール(webページ)がありますので、
それを今回は使います。
「電光掲示板 Generator – LANDHERE」
といページがありますので、上記リンクをクリックしてページを開いてください。
使い方は説明しなくても、何となく解ると思いますが、一応書いておきます。
- 「電光掲示板 Generator – LANDHERE」を開きます。
-
そのページをちょっと下に移動(スクロール)すると、
「テキスト入力による生成」という段落があります。 -
その段落の中に
「テキスト（500文字以下／改行は無視されます）」
と書かれた欄(長方形)があります。
その欄の中に、表示させたい文章を書きます。(コピー$ヘーストでも可) -
そのまま「作成」ボタンを押しても構いませんが、
「フォント」と書かれたポップアップメニューをクリックして、
任意のフォント(書体)を選ぶ事もできます。 -
「仕上がり幅」という欄は、実際に表示させる、
電光掲示板風のgifanimationの横幅(長さ)です。
掲載するページ上のスペースに合わせた数値を記入します。
例えば、「128」の場合はこう↓なります。
「50」の場合はこう↓なります。
- 「余白の幅」と「消灯色（背景の色）」も指定できます。
-
「作成」ボタンを押すと、
「電光掲示板 Generator – LANDHERE」の
ページ冒頭で表示されているgifアニメーションに反映されます。 -
そのgifアメーションをクリックすると、
完成したgifファイルがダウンロードされます。
通常は「ダウンロード」フォルダ内に入りますが、
右クリックすればダウンロード先を指定する事もできます。
※このダウンロードされた「ledsb_result.gif」ファイルを
Macのプレビュー.appなどで開いてもアニメーションしませんが正常です。
＜gifをアップロードする＞
[目次へ戻る]
上記で得られた「ledsb_result.gif」ファイルを
ネット上にアップロードする必要があります。
(自宅にあるコンピュータをネット上に公開する方法もありますが、ここでは割愛します)
-
サーバーを用意します。
- サーバーは、無料レンタルのもので構いません。
-
ここではサーバーの一例として
「Xdomain
」を新規に契約する方法を紹介します。
(無料であっても、それを利用する事は法的には「契約」になる)
ですが、他のサーバーでも構いません。
-
「Xdomain
」をクリックして開きます。
- ページ上方にあるメニューから「お申し込み」をクリックします。
- 「無料レンタルサーバーご利用お申し込み」というボタンをクリックします。
-
メールアドレスの登録を求められるので、
欄に記入して、「確認メールを送信」ボタンをクリックします。
※ここで登録するメールアドレス宛に、
サーバーのメンテナンスや障害情報などが送信されるので、
ちゃんと受け取り読めるアドレスを登録しましょう。 -
「確認メール」の【お申し込みURL】に記載されているURLを
クリックするか、コピー&ペースとして開きます。 -
パスワードやあなたのお名前など、幾つかの項目がありますので、
必要な箇所に記入して、最後にある「利用規約」を読んだら、
「利用規約に同意する」の左側の小さな四角を
クリックして、チェックマークを入れたら、
「確認画面に進む」ボタンをクリックします。 -
確認画面の内容に問題なければ、
「会員登録を確定する」ボタンをクリックします。
(すると、「会員登録完了のお知らせ」という題にあるメールが送られて来ますので、目を通しておいて下さい。) -
次に表示されたページの「ログイン」ボタンをクリックします。
すると、「エックスドメイン管理パネル」というページが表示されます。
-
「エックスドメイン管理パネル」というページの左下の方にある、
「➡︎無料レンタルサーバー」をクリックします。 -
すると、表示されたページで、「サーバーID」を求められますので、
欄に任意の綴りを記入して、
「サーバーIDの登録（確認）」ボタンをクリックします。- この「サーバーID」というものは、あなたの管理するURLの一部になります。
-
「サーバーID」の綴りは普通、
サイト(日本ではホームページとも呼ぶが)の名称にちなんだ綴りにします。
例えば、「ニッチでドワーフなwiki」というサイトを作りたい場合は、
そのままでは、綴りが長くなってしまうので、
「ndwiki」等とある程度略してやります。 -
「サーバーID」は、他の人(サイト)と重複してはいけない筈なので、
「入力したサーバーIDはご利用いただけません。別のサーバーIDを入力してください。」等と表示されたら、綴りを変えてください。
-
確認ページが表示されるので、IDに入力ミスなどがなければ、
「サーバーIDの登録（確定）」をクリックします。-
このページには、「戻る」ボタンが設置されていないようです。
ブラウザの「戻る」ボタンをクリックしてしまうと、エラーが発生しますので、
綴りを修正する場合は、もう一度
左下の「➡︎無料レンタルサーバー」をクリックします。
-
このページには、「戻る」ボタンが設置されていないようです。
-
サーバーIDの登録が完了したら、
再度、「➡︎無料レンタルサーバー」をクリックします。 -
するとさっきとは違うページが表示されますので、
「HTMLサーバー」の「利用を開始する ＞」ボタンをクリックします。
すると、初期設定にやや時間が掛かるらしく、
直ぐには次のページが表示されません。
が、1〜2分待たされて、その旨のページが表示されます。 -
再度、「➡︎無料レンタルサーバー」をクリックします。
すると、さっきとは若干内容が異なる表示になります。 -
「HTMLサーバー」の右側は
「管理パネルログイン ＞」というボタンに変わっている筈ですから、
それをクリックします。 -
「サーバー管理パネル HTMLサーバー」というページが表示されますので、
右の方にある「FTP」の「➡︎FTPアカウント設定」をクリックします。 -
「FTPアカウント設定」というページが表示されますので、
その「FTPアカウント」の
「WebFTP」という欄にある「ログイン」をクリックします。 -
すると
「ファイルマネージャーにログインしています。
※しばらく待っても移動しない場合、はログインするを押してください」
というページが一瞬表示されたのちに、
「Xdomain ファイルマネージャー」というページが現れます。-
恐らく、最初から、
「index.html」3 KB
「default_page.png」6 KB
「.htaccess」1 KB
という三つのファイルが存在している筈です。
(これらの説明は、ここでは割愛させて頂きます) - リストの一番上にある「..」は、ファイルやフォルダではなく、 「ひとつ上の階層に移動する」事を意味しています。
-
恐らく、最初から、
-
先ほど得た「ledsb_result.gif」ファイルをアップロードします。
-
通常は、フォルダの階層で整理します。
が、面倒であれば、そのままの階層にアップロードしてしまっても、
使えますので、「フォルダ階層」の概念がわからない場合は、
この後のフォルダ作成・移動は読み飛ばしてしまっても構いません。
- 左上の方にある「フォルダ/ファイル作成」をクリックします。
-
画面の表示に従って、新しくフォルダを作成して下さい。
電光掲示板風のgifアニメーションを保管するので、
「banner」などとしておくと、後で探しやすいです。 -
四角の欄の中に「banner」(或いは任意の綴り)と記入して、
「フォルダ追加」ボタンをクリックします。 -
すると数秒で、欄の中に書いた綴りが消える筈です。
特にエラー表示などがでなければ、
「このウィンドウを閉じる」ボタンをクリックして下さい。 -
数秒、間が空くかもしれませんが、
先ほどのページのリストに、今作ったフォルダが現れる筈です。
そのフォルダの名称の左側のアイコンをクリックすると、
その階層に入れます。-
まだ何もアップロードしていないので、
当然のように「ディレクトリは空です。」と表示されている筈です。
-
まだ何もアップロードしていないので、
-
「banner」フォルダ内にファイルをアップロードします。
- 上の方にある「アップロード」をクリックして下さい。
-
すると
「参照ボタンをクリックして、ファイルを選んでください。」
というウインドウが現れますので、
「選択」ボタンをクリックして下さい。
(五つありますが、どれでも構わない筈です) -
ファイル選択のウインドウが現れますから、
先ほどの「ledsb_result.gif」ファイルを選択して、
「開く」ボタンをクリックして下さい。 -
ファイル選択のウインドウが閉じて、
「参照ボタンをクリックして、ファイルを選んでください。」
というウインドウの一覧に、
今選択したファイルの名称が表示されている筈です。 -
そうしたら、
「参照ボタンをクリックして、ファイルを選んでください。」
というウインドウの「アップロード」ボタンをクリックして下さい。
(「Xdomain ファイルマネージャー」というページの方ではありません) -
すると、数秒後に一覧からファイルの名称が消えて、
更に、数秒後に「Xdomain ファイルマネージャー」ページの方のリストに
今アップロードしたファイルが現れる筈です。 -
そうしたら、
「参照ボタンをクリックして、ファイルを選んでください。」
の方の「このウィンドウを閉じる」ボタンをクリックします。 -
「Xdomain ファイルマネージャー」ページの方のリストにある
「ledsb_result.gif」の名称をクリックすると
ファイル名の変更ができますから、
分かりやすい名称にしておく事をお勧めします。
-
通常は、フォルダの階層で整理します。
＜webページ上に配置する＞
[目次へ戻る]
-
まず、ちゃんとブラウザで表示できるか確かめます。
ブラウザで空白の新規ページを開いたら、
そこのURL欄にgifファイルのURLをコピー&ペーストして開いて下さい。-
gifファイルのURLは、
「Xdomain ファイルマネージャー」というページの「操作」の列にある
歯車のような形をしたアイコンをクリックすればわかります。
また別のウインドウが現れて、情報が記載されています。
その中の、
「オーナー」の欄にある文字の後ろに、
「場所」の欄にある文字列を加えた文字列が、そのファイルのURLになります。
今までの例の流れからすると、そのURLは
「ndwiki.html.xdomain.jp/banner/ledsb_result.gif」 になっている筈です。
(フォルダ名とファイル名は、任意に変えていればそれになっている筈です)
-
gifファイルのURLは、
-
ちゃんとgifアニメーションが表示されればOKですが、
表示されなければ、何処かがおかしいと思われますので、
最初から、見直してみて下さい。 -
gifアニメーションのURLが判った所で、
そのURLを任意のページに埋め込みます。-
htmlの記述の仕方と解説は、他所に譲りますが、
imgタグを使って記述します。 などと記述するわけです。
そのgifアニメーションのURLを教えて頂ければ大丈夫です。 -
htmlの記述の仕方と解説は、他所に譲りますが、
＜イベント告知や宣伝などに使う＞
[目次へ戻る]
なぜ、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ファイルの表示されるサイズが大きすぎる場合には、
こちらで勝手に縮小表示します。
例えば、
このままでは、ページの文章と並べて表示するには大きすぎるので、
スペースがあれば、
こんな風になります。
お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。
 人気ブログランキング |
 ウェブデザインランキング |
|
|