動くバナーの作成はお絵描きアプリProcreateを使用してワードプレスのテーマ「Cocoon」のサイドバーに設定する手順の記事になります。
![](https://u-tami-1.com/wp-content/uploads/2022/07/名称未設定のアートワーク-3-2.gif)
![](https://u-tami-1.com/wp-content/uploads/2022/07/名称未設定のアートワーク-2-1.gif)
![](https://u-tami-1.com/wp-content/uploads/2022/07/サイドバー8-1024x410.png)
![](https://u-tami-1.com/wp-content/uploads/2021/04/procreate.png)
![ゴリたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
バナーのサイズも色々あるよね!
今回は長方形の動くのバナーを作成するよ!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
キャンバスサイズ:1200x500px
![](https://u-tami-1.com/wp-content/uploads/2022/07/名称未設定のアートワーク-3-2.gif)
静止画のバナーでも良いですが、今回は上記画像のような文字の色が変わる動くバナーを作成します。
文字の色が変わるバナーを作成するよ!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
![](https://u-tami-1.com/wp-content/uploads/2022/07/20220728_100747492_iOS-1024x768.png)
![](https://u-tami-1.com/wp-content/uploads/2022/07/20220728_062602876_iOS-1024x768.png)
主な正方形バナーのサイズは250x250px/300x300px、長方形バナーのサイズは120x600px/320x100pxとされてますが、このサイズのキャンバスでイラストを描くのは小さくて描きづらいので1200x500pxにします。カラープロファイルはRGBします。
![ゴリたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
1200x600pxでもいいよ!
カラープロファイルCMYKとRGBの違いについてはこちらの記事をご覧ください。
![](https://u-tami-1.com/wp-content/uploads/2022/07/長方形バナー1.png)
色を変える文字以外は1つのレイヤーにします。作成中は編集しやすいように別々のレイヤーで作成して最終的に統合すればOKです。
![ゴリたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
デザインするポイントはあるの?
強調したい言葉やイラストを大きくして、クリックしてサイトに移動するよう誘導する言葉があるといいかもね!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
![](https://u-tami-1.com/wp-content/uploads/2022/07/20220728_091837630_iOS-1024x768.png)
文字のレイヤーを複製して色を変えます。文字以外のレイヤー(背景)を一番下に配置します。
「🔧設定」>「キャンバス」>「アニメーションアシスト」をONにします。
![](https://u-tami-1.com/wp-content/uploads/2022/07/20220728_091934042_iOS-1024x768.png)
文字以外のレイヤー(背景)をすべての文字の背景として設定したいので、フレームをタップしてフレームオプションにある「背景」をONにします。
「再生」をして文字の色が変わるのを確かめて完了です。
アニメーションの基本についてはこちらの記事をご覧ください。
![](https://u-tami-1.com/wp-content/uploads/2022/07/20220728_102247816_iOS-1024x768.png)
書き出すファイル形式は「アニメーションGIF」で「ウェブ対応」にしてPCと共有できるファイルに書き出します。
私はOneDriveに書き出したよ!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
その他ファイル形式についてはこちらの記事をご覧ください。
サイドバーにバナーを設定する(ワードプレス)
![](https://u-tami-1.com/wp-content/uploads/2022/07/サイドバー1-1024x562.png)
ワードプレスの管理画面にログインしたら「外観」>「ウィジェット」をクリックします。
![](https://u-tami-1.com/wp-content/uploads/2022/07/サイドバー2-1024x584.png)
テキスト(任意のテキスト)項目をドラッグ&ドロップして「サイドバー」セクションの中の好きな位置に追加します。
![](https://u-tami-1.com/wp-content/uploads/2022/07/サイドバー3-1024x582.png)
「メディアを追加」からProcreateで作成したバナーを追加します。
![](https://u-tami-1.com/wp-content/uploads/2022/07/サイドバー4.png)
バナー画像をクリックします。クリックすると画像の四隅に白い四角が表示され選択されている状態になります。バナー画像を選択してから「リンク」アイコンをクリックします。
![](https://u-tami-1.com/wp-content/uploads/2022/07/サイドバー5.png)
表示された枠にリンク先のURLを入力します。
![ゴリたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
バナー画像を選択しないでリンクアイコンからURLを入力するとどうなるの?
バナー画像の上か下にURLが張り付くよ(下記画像)。
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
![](https://u-tami-1.com/wp-content/uploads/2022/07/サイドバー6.png)
リンク先を新しいタブで開きたい場合
URLを入力した枠の右側にある「⚙歯車」アイコンをクリックして「リンクを新しいタブで開く」にチェックをいれて「更新」をクリックします。
保存をして完了です。
![ゴリたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
サイドバーの一番上にバナーが設定されたね!
バナーをクリックすると指定したサイトへアクセスできるね!是非オリジナルバナーを作成してみてね!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
コメント