【追記あり】アメブロで使えるボタン作成法 その１
←ブログランキング参加中。
この記事「よかった」って思って頂けたら
１クリック応援よろしくお願いします。
再アップ記事です
こんにちわ！
０円アメブロカスタマイズのペカルマンです。
昨日更新しましたコチラの記事 で紹介したボタン作成サイト
As Button Generator
早速僕も使ってみました。（順番が逆ですね・・・・汗；
使ってみて良かったら紹介しろよって話です（笑
で、昨日記事に追記で書いたんですが、テキストが使いづらいです。
フォントの種類も少ないですし・・・・。
って事で、このボタン作成サイトで作ったボタンに
日頃僕が使っている画像加工ソフトPixlr を使ってテキスト挿入を
してみました。
【作成例 その１】
【作成例 その２】
どうですか？なかなか綺麗ですよね・・・・・。はい綺麗です（爆
と言う事で、今回は昨日紹介したサイトの使い方を書きたいと思います。
↑よりアクセスして頂きますと
画面下の方に 「パネルの背景色」という箇所があります。
その横の□をクリックしますとカラーピッカーが出ますので
サイドカラムの背景に色を付けておられる方は、その色に近い色を
選択する事で、プレビュー表示されるボタンとの相性（イメージ）が
つかみやすいと思います。
それでは早速ボタンを作成してみましょう！
【１】
まずはボタンの色と形とサイズを決めます。
「色」と書かれている横の□をクリックすると上図のように
カラーピッカーが出ますので、矢印をスライドさせて
ある程度の色を調整、その後ポインターを動かして
最終的な色を決めます。
色が決まったら、画面右下の 「OK」をクリックします。
*設定を色々と変えるたびにプレビューとして画面に表示されるので
そのプレビューを見ながら、好みのボタンに近づけていきましょう！
【２】
次にボタンのサイズを決めます。
上図、ちょっと見づらいですが、「幅」 「高さ」 「ボーダー色」 「角の丸み」
「ボーダーの太さ」を決めます。
各欄にメーターのようなものが見えますね。上図の△の部分をスライドさせても
数値を変更できますが、ちょっとやりづらいです。
そこで、まず△をクリックし、あとはキーボードの矢印キーの←→で調整した方が
やり易いです。
角の丸みをゼロにすると、角いボタンが出来ます。
ボーダーとはボタンの周り縁を入れる場合に設定します。
縁が要らない場合は０pxにします。
【３】
次はグラデーションのタイプを選択します。
好みのパターンを選択してください。
【４】
次にストライプのパターンを選びます。
必要のない場合は省略してください。
こちらも先ほどと同じように、△をクリックしてキーボードの矢印キーを使って
調整します。ストライプの角度、透明度も設定できるので色々試してみましょう。
【５】
次なんですが、フィルターという箇所がありますがそこは飛ばします。
フィルターを設定してしまうと、その後他の設定が出来ない仕様になっている
みたいなので・・・・。
ボタンに画像を入れたい・・・という方はここで「画像」をクリックします。
するとこのような画面になるので、「画像を挿入する」をクリックすると
画像選択画面となります。保存場所から希望の画像を入れてください。
【６】
最後にフィルターの設定をします。
こちらも好みで使用されたらよいかと思います。
・・・・ってフィルターでどのようになるの？
フィルターを選択するとこのような画面になります。
「Bevel Filter｣ と 「Dropshadow Filter」の２種類がありますが
「Bevel Filter｣の説明は省きます（というか、効果がイマイチわかりませんので）
「Dropshadow Filter」を使うと上図の
この影の部分のような
影を付ける事が出来ます。立体感が出ます。
②の 「有効」というところにチェックを入れて各欄を設定するのですが
「水平方向のぼかし」と「垂直方向のぼかし」は０pxのままで構いません。
他の箇所は色々と数値を変えて、プレビューを見ながら調整してみてください。
【７】
気に入ったボタンが出来上がったらプレビュー右下の「保存」をクリック。
任意の場所に保存して完了です。
一応「テキスト」を入れる事は出来るみたいですが、先にも述べましたように
フォント種類が少ないし、使いづらいです。
次回、この出来あがったボタンにテキストを挿入する方法をアップします。
【追記】
【６】でDropshadowでボタンに影を付けた場合、最初に設定したボタンサイズ
より若干縦横共に、サイズが大きくなります。
正しいサイズ確認は保存先で確認してくださいね。
最後までお読みいただき有難うございました。
０円アメブロカスタマイズのペカルマンでした。