はじめに

こんにちは！ももちょこです！

今回は私が作成した自由にカスタマイズできるバナーをご紹介します。

このツールは、カスタマイズしたバナーを作成することができます。

初めての方は使い方を先にご覧ください。

使い方

それでは、今回作成したバナー作成ツールの使い方を説明します。

まずは下のダウンロードボタンからbanner.zipをダウンロードします。

ダウンロードをしたらzipファイルを展開してください。

次にバナーに表示するテキストの設定をします。

まず初めに「バナーに表示するテキスト」の欄に、表示したい文章を入力します。

次に「アイコンを選択」の一覧から、テキストの隣に表示したいアイコンをクリックします。

アイコンは選択しなくても構いません。

追加ボタンをクリックすると、入力したテキストと選択したアイコンがプレビューエリアに追加されます。

追加したテキストを削除したい場合はプレビューエリアの削除したいテキストをホバーすると削除ボタンが表示されますのでクリックをして削除してください。

バナーに表示するテキストの作成が完了したら、「index.html をダウンロード」ボタンをクリックして、バナーの骨格となるHTMLファイルを保存します。

この時、保存場所は先ほど展開をした【bannerフォルダ】に保存をしてください。

次にバナーのデザインの設定をします。

【フォント】使用したいフォントをドロップダウンリストから選択します。

【フォントサイズ】スライダーを動かして、文字の大きさを調整します。

【フォントウェイト】スライダーを動かして、文字の太さを調整します。

【アイコン間隔】アイコンとテキストの間の余白をスライダーで調整します。

【文字色】カラーピッカーを使って、文字とアイコンの色を選択します。

デザインが完成したら、「style.css をダウンロード」ボタンをクリックして、デザイン情報を保存したCSSファイルを保存します。

保存場所は先ほど同様に展開をした【bannerフォルダ】に保存をしてください。

次にバナーのアニメーションの設定をします。

【アニメーションの種類】テキストがどのように切り替わるかを選択します。

【イージング】アニメーションの動きの滑らかさを選択します。

【表示間隔】一項目あたりの表示時間をスライダーで設定します。

アニメーションの設定が完了したら、「script.js をダウンロード」ボタンをクリックして、アニメーションを制御するJavaScriptファイルを保存します。

保存場所は先ほど同様に展開をした【bannerフォルダ】に保存をしてください。

最後に上記の手順でダウンロードした3つのファイル (index.html, style.css, script.js) が【bannerフォルダ】に保存されているか確認をしてください。

手順通りに進めていると【bannerフォルダ】内が下の画像のような感じになると思います。

画像のようになっていたら設定完了です。

ここからは配信画面に表示する方法を説明していきます。

OBSで配信をしていることを想定して説明をしていきますのでご了承ください。

まず、OBSにブラウザソースを追加してローカルファイルにチェックを入れて先ほど作成した「index.html」を読み込みます。

このとき、幅を1920・高さを200にしてください。

各項目の設定をしてOKボタンを押したら設定完了です。

表示したときに文字の境目が黒くなるのが気になる場合は下記の方法をお試しください。

ブラウザソースを右クリックしてブレンド方法からSRGBオフを選択する。

あとは各自調整を行ってください。

基本的な使い方は以上です。

ワイプバナー背景

好みのワイプバナー背景があったらダウンロードしてお使いください。

使用例

作成したバナーは、お知らせやワイプバナーなどに使うことができます。

使い方は様々なので自由に使ってください！

注意点

2つ目のバナーを作成する場合は【bannerフォルダ】を別の名前にして各ファイルを保存してください。

「font.css」ファイルの入れ忘れにご注意ください。

さいごに

今回はこれで以上になります。

最後まで読んでいただきありがとうございました！

何か質問などあればContactからお気軽にお問い合わせください。

最後にTwitterなどのSNSで共有拡散していただけるとありがたいです。