BiND4でつくるホームページ@動画: 6月 2011

2011年6月27日月曜日

2種類のアンカーを設定してページ内を移動する

リンクを押したときにページの途中へ移動できるアンカーの設定方法は、BiND4では、ブロックごと（ブロックの先頭）に設定する方法と、ブロックの途中（ブロックの真ん中でも設定可能）に設定する方法の2種類あります。

今回は、その2種類を動画で紹介いたします。

1つ目は、ブロックエディタに最初から用意されている箇所に「アンカー名」を設定するやり方です。
これは、ブロックの先頭にアンカーが設定されるので、小さいブロックの時に便利です。

2つ目は、ブロックを細かく分けずに、縦に長くなったブロックの途中にアンカーを設定したい時に使用します。1つ目のやり方よりも少し複雑になりますが、リンクを設定するときに、「#アンカー名」の「#」を付け忘れるとうまくページが移動しないので、「#」は忘れずに！

よかったら、動画を御覧ください！

←ランキング参加中です！只今3位の前後です!

にほんブログ村←ありがとうございます！只今2位です!

おわりに
初めて当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。
もしブログの内容が気に入って頂けましたらRSSリーダーの登録よろしくお願いします。

2011年6月20日月曜日

BiND4でメニューボタンをカスタマイズしよう！

mixiチェック

BiND4にあらかじめ用意されているテンプレートの「Cloud-クラウド-」のメニューボタンをカスタマイズして、よりオリジナルのデザインに近づけるためのテクニックをご紹介します。

「Cloud-クラウド-」は非常に使い勝手のよいテンプレートですので、初心者の方にもおすすめです。

ただし、今回ご紹介するカスタマイズは、背景が透明の画像を予め用意しなければなりません。画像を作成するには、レタッチソフト（photoshop等）が必要です。初心者の方には、ちょっと壁が高いかもしれませんが、GIMP（無料のレタッチソフト）を使用すれば、簡単に作成することができます。今回の動画では、画像の作成は省略させていただきましたが、今後、「GIMPでつくるバナー」の動画を作成する予定です。

それでは、さっそくメニューボタンをカスタマイズしましょう！動画を御覧ください。

←ランキング参加中です！只今3位の前後です!

2011年6月13日月曜日

SiGNで本の形が飛び出たバナーを作成しよう

mixiチェック

今回は、本の形が飛び出たバナーをBiND4付属の画像作成ソフト"SiGN"を使って作成します。

※本の画像はあらかじめ用意した画像を使います。

「透明」を活かして「飛び出し」を表現する

ボタン領域の背景からアイコンなどを少し飛び出したように配置すると、よりポイントが強調されて、目を引くバナーになります。

バナーのファイル形式を「PNG」に指定し、背景透明度を「0」にすることで、背景画像を配置していない領域を透明にすることができます。この透明な領域とアイコンを重ね合わせることで、イラストが「飛び出して」見えるようなバナーを作成します。

SiGNのテンプレートでは、画像やテキストがレイアウトできる領域があらかじめ固定されていますが、その領域全体を使用しなければいけない決まりはありません。

重要なことは、そのパーツごとの配置ではなくて、バナー全体のレイアウトを整えることです。

思ったより簡単に作成できますので、ぜひ、チャレンジしてみてください。

※出典：「楽しく、気軽にできるウェブデザインレシピブック」デジタルステージ監修

←ランキング参加中です！只今3位の前後です!