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

2011年8月3日水曜日

BiND4でページにツイッターバッジを取り付ける方法

ウェブページの左右どちらかにツイッターの”follow me”ボタンが付いているのをよく見かけます。これは「TwitterFollowBadge」というTwitterのフォローミーバッジをWEBサービスの「フィードバックバッジ」のようにブログやサイトへ設置できるサービスです。今回は、「TwitterFollowBadge」をBiND4で作成したページに取り付ける方法を動画でご紹介します。

ログインも不要で、いくつか設定を行い、サイトにタグを貼り付けるだけで設置可能です。
TwitterFollowBadge

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

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

おわりに

初めて当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。

もしブログの内容が気に入って頂けましたらRSSリーダーの登録よろしくお願いします。

2011年7月20日水曜日

ブロックテンプレートの保存はとっても便利

mixiチェック

好評いただいておりますBiND4オリジナル動画マニュアルは、

今だけ販売開始セールとして

通常価格~~4,980円~~　→　1,980円（税込）~~7/31（日）まで~~　←　割引セールは終了しました。

くわしくはこちら

お気に入りのブロックを他のサイトでも使用できるようにブロックテンプレートとして保存できる機能です。

”ブロックの共有”でも同じようなことができますが、”ブロックの共有”だと今開いているサイトでしか使えないので、複数のサイトを作成しているときに、あのブロックをこのサイトでも使いたいなぁ～というときに、最初から作らなくてもいいのでとても便利です。

やり方はとても簡単ですので、是非活用したい機能です。

詳しくは動画をご覧下さい。

BiND4オリジナル動画マニュアルは、今だけ販売開始セールとして

通常価格~~4,980円~~　→　1,980円（税込）~~7/31（日）まで~~　←　割引セールは終了しました。

くわしくはこちら

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

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

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

2011年7月12日火曜日

表（テーブルパーツ）に写真を入れたい

mixiチェック

BiND4には、表（テーブル）を作成するエディタが用意されています。しかし、ちょっと使いづらいのが難点です。さらにそのテーブルパーツエディタでは写真を入れることができないのです。

ちょっと面倒ですが、こうすれば写真を入れることができますので、よかったら御覧ください。

BiND4オリジナル動画マニュアルは、今だけ販売開始セールとして

通常価格~~4,980円~~　→　1,980円（税込）~~7/31（日）まで~~　←　割引セールは終了しました。

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

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

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

2011年7月5日火曜日

ついにBiND4のオリジナル動画マニュアル販売開始！

mixiチェック

BiND4で実際にトップページを作成していく過程の動画を音声解説付きで収録しました！

現在、BiND4の使い方サポートとして、関東限定で出張レクチャーをしているのですが、大変ありがたいことに、全国の方からご依頼の連絡をいただくようなり、どうしたらいいのか考えておりました。そこで、BiND4でウェブページができるまでを解説した動画をつくれば、現地まで行かなくても、今までよりももっと沢山の方にBiND4のすばらしさが伝わるのではないかと思い、今回この動画を販売させていただくことになりました。

動画マニュアル内でつくったサンプルページはこちらです。

このオリジナル動画マニュアルには、解説書には載っていないテクニックや裏技がたくさん紹介されています。また、思ったとおりにならない、どうもうまくいかない等でお悩みのあなたに、制作途中で壁にぶつかったときの解決のヒントや、どうしてうまくいかないのかを出来る限り詳しく解説しています。

今回、このブログを読んでいただいているあなたへの特典として、

今だけ販売開始セールとして

通常価格~~4,980円~~　→　1,980円（税込）

~~7/31（日）まで~~　←　割引セールは終了しました。

さらに無料のフォトレタッチソフト”GIMP”を使ったメニューボタンの作成方法の動画もお付けいたします！

※Flash動画ですので、パソコンでのみ再生できます。
※商品はダウンロードしていただく形になりますので、送料はかかりません。
※決済方法は、楽天銀行（旧イーバンク）です。
※GIMPとは、フリーソフトでありながら有料のグラフィック編集ソフト（フォトショップetc）と比べても遜色のないレベルの機能を備えたビットマップグラフィック編集・加工ソフトです。

商品についてのお問い合わせはこちらまでどうぞ。

【収録内容】
01　はじめに
02　ヘッダーと背景
03　グローバルメニュー
04　サイドメニュー
05　メインコンテンツ
06　フッター
07　調整

特典
01　GIMPのダウンロードとインストール
02　メニューボタンの作成　その1
03　メニューボタンの作成　その2

【収録時間】

約75分

動画内で使用した素材が入っているので、そのままテンプレートととしてお使いいただけます。メニューボタンの元素材も入っています。

BiND4でホームページを作ったけど、使い方がよくわからなかったり、いまいちデザインがパッとしない・・・そんなあなたに。

せっかくBiND4でホームページを作ったのにもったいないです！

あきらめないでください、あと1歩でホームページづくりが今よりもっと楽しくなります！

ダイジェストをつくりましたので、よかったら御覧ください。

（音声付きですので音量にご注意ください。）

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

2011年6月27日月曜日

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

mixiチェック

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

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

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

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

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

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

2011年6月20日月曜日

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

mixiチェック

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

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

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

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

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

2011年6月13日月曜日

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

mixiチェック

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

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

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

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

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

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

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

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

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

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

2011年6月6日月曜日

ブロックスキンでカラー選択時のリンクの色を他の色に変更したい

mixiチェック

ブロックスキンでカラーを選択するとリンクの色も選択したカラーになります。どうしても色を変更したいときは、”リンクパーツのテキスト”に”タグ”を打ち込んで色を変更します。（リンクのアンダーラインの色は変更できません）

【タグ】
<span style="color:#6F8AF5">任意の文字</span>

※上記は色を青に変更するときの設定です。
#6F8AF5を変更すれば、他の色に変更できます。

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

2011年5月24日火曜日

ブロックを共有してみよう

mixiチェック

ブロックの共有とは、特定のブロックを複数ページで共有することができるBiND4の機能です。

簡単に同じ内容のブロックを追加することができるので大変便利です。

例えば、サイドバーには、すべてのページに表示させておきたいブロック（サイドメニューや新着情報など）があると思います。それらを共有に設定しておけば、なにか変更が発生したとき、ひとつのページだけ編集すれば、他のページの共有されたブロックがすべて編集されます。1ページづつ（全ページ）編集しなくて済むので、手間が省けますね。

共有したブロックのテキストを変更してみましょう。他のページでも共有されたブロックなら変更が反映されますので、作業効率がアップします。

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

2011年5月18日水曜日

カスタムタグで文字を装飾する

mixiチェック

BiND4には、ブロックエディタのパーツ一覧に、カスタムタグが用意されています。

これは、CSSやHTML、JavaScriptなどを自由に入力できる機能です。

初心者の方は、〈カスタムタグパーツ〉の〈セット〉に登録されたタグを利用すると便利です。

今回は”文字を大きくして青色にする”カスタムタグを使って、文字の装飾をしてみましょう。

文字の大きさを変更するときは、HTMLソースエディタを開いて、

font-size:15pt

文字の色を変更するときは、HTMLソースエディタを開いて、

color:#6F8AF5

をそれぞれ、任意の値に変更するだけです。

文字の色はこちらのサイト"WEBセーフカラー216色"を参考にどうぞ。

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

にほんブログ村←こちらも参加しました！よろしくどうぞ♪ 只今10位の前後です!

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

2011年5月14日土曜日

SiGNで角丸バナーを作成するには？

mixiチェック

BiND4に付属している画像作成ソフト「SiGN」を使って、角丸のバナーを作成するやり方です。

SiGNはあらかじめ用意されているテンプレートを使ってバナーを作成します。
ですので、テンプレートのバリエーションによっては角丸のバナーが作れないものもあります。

角丸のテンプレートを選択した時には必ず、
画面下部にある「ファイル形式」ボタンで「PNG」を選択してください。

さらに、その横の「背景色と透明度」のスライダーで透明度を「透明(0)」にしてください。

これをやらないと、角丸にした箇所の背景が白く出てしまうためです。

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

2011年5月10日火曜日

BiND4で作成したサイトをお客様事例のページにアップしました。

mixiチェック

一部ですが、今までに作成したお客様のサイトを事例紹介のページにアップいたしました。
おかげさまで、いろいろな業種のお客様のサイトを作成させていただきました。
何かの参考になればといいなぁ～と思います。

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

登録: 投稿 (Atom)