読者です 読者をやめる 読者になる 読者になる

godmemo

デザイン/WEB屋のメモです。自分用

ホームページ制作ソフト『Bind7』のデザインテクニック

WEBテクニック関連 WEB

f:id:godspade:20150203210514p:plain

Webを美しく、楽しく、カンタンに。

デザイン性ユーザー満足度No.1に輝いたBiNDが、そのデザイン力をさらに研ぎすます。
無料カート機能も登場。さらに使いやすくなったBiND第7世代。

で有名なホームページ制作ソフトBind7のちょっとしたテクニック。

自分用メモ的な感じで書き留めていきます。

Bindシリーズは、ぼくが4年程前に試行錯誤でWEBの勉強をしているころに出会ったソフトです。

現在は、当時に比べて使用頻度は減ったものの、まだまだ出番があり重宝しているソフトです。

Bind5〜7を使っていて、今でもWEBの仕事の内容によってはこちらのソフトで制作してます。

そもそもプロ向きではないため、使っているだけでプロに鼻で笑われる可能性も否めませんw

がしかし、ビジネスの場でも使いようによっては十分に使えるソフトです!

これは個人的な意見なので、人それぞれ感じ方が異なりますので本当につかえるかどうかは自分の目で確かめてみてください。

 

スポンサーリンク  

ホームページを作る時、ホームページビルダーとBindのどちらのソフトを使ったらよいか??

ここは永遠のテーマだとおもいますが、どちらも「簡単に作れる」的なコンセプトのホームページ制作ソフトです。

ソフトシェアでいけばホームページビルダーの方がダントツシェアを占めております。

大変恐縮なのですが、実は僕はホームページビルダーを使った事がないため・・・・

どっちがいい!というお話ができません。ごめんなさい。

Bindの魅力はいくらでも語れますので、それはまた別の機会にw

 

1.Bind6からCSSを指定できるようになった!!!!が、しかしサイトの読み込みの都合でカスタムCSSの表示が1テンポ遅い!!!

さすがにビルダーだけあってか、Bindの構築システムが独特な動きを生みます。

カスタムCSSの読み込みがだいぶ後回しになるようで、スタイル指定していたとしてもサイト表示した瞬間はスタイル指定していない状態のものが一瞬登場したあとに、スタイル指定されたものが表示されます。

 

気にならない人もいると思いますが、ぼくはこの挙動が非常に気になるのです!

具体的にどんな挙動か?ということで僕が実際に経験した動きの説明をしますね。

f:id:godspade:20150203214332j:plain

サイト左上部に配置する『h1』タグ。スタイル指定していないと、

こんな感じででかくなる!

わけで、通常はfont-size:11px; 的な感じで指定しますよね。

BindのカスタムCSSを使って小さく表示したいのですが、挙動がおかしくなるんです。

 

①サイト表示!

   ⬇

②「オーダーメイドで作る、世界で二人だけの奇跡の指輪IGNITEbridal jewelry [イグナイトブライダルジュエリー]」

デフォルトのh1の表示に一瞬なってから

  ⬇

③オーダーメイドで作る、世界で二人だけの奇跡の指輪IGNITEbridal jewelry [イグナイトブライダルジュエリー]

って指定サイズになるんです。

 

そのせいで、サイト全体が動くw

「かっくん」

てかんじでね。

 

それがいやでいやで、どうにかならないかと思ったときの必殺技があります。

  

 

 

FTPサーバーに直接CSSをアップしてそこから読み込みます。

Bindしか使った事ないという方には、cssファイルの作成とFTPにファイルアプロードという作業は大変かと思いますが、慣れれば簡単です。

 

f:id:godspade:20150204123428p:plain

まずは『contents.css』というファイルを作ります

エディタで h1タグのスタイルを指定

cssファイル内に他にも「かっくん」と動作させたくない部分のスタイルを指定できます。

 

f:id:godspade:20150204123423p:plaincontents.cssを保存したら 

FTPの、サイトデータが格納されている階層に『contents.css』ファイルをアップロード

 

 

続いてBind側の設定です

f:id:godspade:20150204123431p:plain

 ページ設定の「スクリプトと詳細設定」の項目にcssファイルを読み込むタグを挿入

<link rel="stylesheet" type="text/css" href="./contents.css">

 

f:id:godspade:20150204124252p:plain

 そしたら最後にcontents.cssのスタイルを反映させたい文章などを作ります。

この時『カスタムタグ』内に写真のようにhtmlを記述。

 

これで問題なく反映されるはずです!

 

 

便利なホームページ制作ソフトBind7ですが

特有の「かっくん」挙動を回避する為には、この方法が得策だと思います!!