ブログ作成のツボブログ作成のツボ当「ブログ作成のツボ」では、WordPressを使ってブログを作成する際のお役立ち情報を配信しています。ブログの立ち上げから筆者の経験談、便利だなと思ったプラグインの使い方等も掲載しています。動作チェックロールオーバーボタンの作成概要このブログではAdobe社のFireworksというソフトを使って作成します。ロールオーバーボタンは、マウスオーバー時に別のイメージを表示(ロールオーバーと言います)するボタンです。Fireworksではこのロールオーバーボタンを作成する場合ステートを利用する方法もありますが、元となるボタンイメージをシンボル化することで、ビジュアルに編集できより簡単に作成できるメリットがあります。最初に元となるボタンイメージを作成します。この元となるボタンはFireworksで別途作成したものでもいいですし、Googleでインターネットから収集した単一画像でも構いません。どちらの方法でもシンボル化することはできますが、単一の画像の場合には影をつけて押し込まれたようなものしかできません。後半にマウスオーバー時の別画像が必要になるので、ここで合わせて準備していただくと便利です。元となるボタンイメージが完成したら、ボタンイメージをシンボル化します。シンボル化するには、ボタンイメージを全選択しマウスの右クリックから表示されるポップアップメニューの“シンボルに変換”または画面上部にあるメインメニューから“編集>シンボル>シンボルでも変換”でもできます。シンボル化するためにイメージを全選択するStep3)ボタンをシンボルにここではマウスの右クリックで“シンボルに変換“を選びました。シンボル化の実行Step4)シンボルの種類はボタンにチェックを忘れずに設定!下記のようなシンボル変換ダイアログが表示されますので、シンボルにつける名前とシンボルの種類から“ボタン”を選んでください。シンボル化詳細を設定Step5)シンボル表示画面OKを押すと画面が以下のようなシンボル表示画面に変わります。この画面ではマウスオーバー時の画像を作成することはできません。シンボル化されたイメージStep6)シンボル編集画面シンボル編集をするために、シンボル化されたボタンをダブルクリックまたは“編集>シンボル>シンボル編集”を選択します。シンボル編集1Step7)マウスオーバーイメージの作成1以下はシンボル編集画面です。ここでは、マウスオーバー時のイメージを作成するために、プロパティのステートからオーバーを選んでクリックします。シンボル編集2Step8)マウスオーバーイメージの作成2まだマウスオーバー時のイメージは作成されてませんので、画面上は一旦真っ白になり何も表示しません。シンボル編集3Step9)アップのグラフィックをコピーマウスオーバー時のイメージは元となるアップ時のイメージを再利用して作るのが一般的でもっとも簡単です。プロパティにある“アップのグラフィックをコピー”ボタンを押下し、ボタンイメージをコピーしてください。別途マウスオーバー時の画像を用意した場合は、こちらで読み込んでください。シンボル編集4Step10)コピーイメージ(オーバー)の編集コピーされたボタンイメージは通常の画像編集の要領で色を変えたり文字を変更することができます。下記の例では背景色を変更して作成しました。コピーイメージ(オーバー)の編集終了マウスオーバー時のイメージの作成が終わったら、全画面にある画面左上のボタンをクリックし元画面に戻ります。これでアップ時とマウスオーバー時に色が変化するボタンの作成は完了です。シンボル編集6動作チェック動作確認は、画面上部にあるプレビューボタンをクリックして確認することができます。出来上がったボタンにマウスを重ね合わせと色が変化します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。undefined”エラーが発生2019.12.28SmartLifeをショートカットに登録する2019.12.042019.12.06NFCタグシールを使えば、家のなかでSuica的タッチ&ゴー2019.12.042019.12.06Googleドライブの使用状況を確認する方法2019.11.272019.11.29ロリポップのドメインをWWWなしに設定するTips2019.11.192019.11.25タロイモ(管理人)毎日ちょっとずつ前進するようにブログ制作に励んでますが、現実は大変厳しいですね。ブログ作成のツボ.タイトルとURLをコピーしました。