Y-DESIGNER

BiNDでのホームページ制作に役立つ情報をお届けしています。

BiNDでのCSSの設定について

f:id:y-designer:20170929064843j:plain

おはようございます。Y-DESINGERの須山です。

ホームページを作るのに最低限度必要なプログラミング言語がHTMLとCSSです。
それにJavaScriptやjQueryなどが使用できれば動きのあるサイト(スライドショーやページアニメーションなど)が制作できます。

今回はBiNDでのCSSはどこで設定できるのかをご説明していきます。

そもそもCSSとは?

CSSとはホームページ上の装飾をつけるためのプログラミング言語です。

例えば、文字の大きさを変える、文字に色をつける、写真に影をつけるなどなど。
CSSだけでも色々なことができます。

BiNDではCSSの設定が大きく分けて4パターンありますのでそれぞれの設定のメリット・デメリットなどを紹介していきます。

ブロックエディタで設定

f:id:y-designer:20170929070317j:plain

ここを使っている人が一番多いのではないでしょうか?赤く囲んである部分を使用して以下のCSSの設定ができます。

  • 文字の種類
  • 文字の大きさ
  • 文字の色
  • 蛍光マーカー風
  • 文字の太さ
  • 文字を斜体にする
  • 文字の下に線を引く
  • 文字に取り消し線を引く
  • ブロック内で分割する
  • 回り込みを解除する

ブロックエディタでのメリット

とにかく簡単です。まさにWord感覚でホームページに装飾ができます。

ブロックエディタでのデメリット

上で紹介した以上の設定はできません。例えば行間を広げたい、文字と文字の間隔を広げたいなどはここではできません。

また、後々修正する時に文字の大きさが何に設定されているのかが極めてわかりにくいです。

実際のCSSの記述としてもここで設定するのはオススメできません。できればここは使わないに限ります。

ブロックエディタでの使い所

本当に一部分にデザインをつけたい時に活用しましょう。

例えばフォントの英数字のみフォントを変えたい、一文字だけ色を変えたい、などと言ったピンポイントでの使用がオススメです。HTMLがわかる人に言うならspanタグを使う箇所です。

CSS詳細設定

f:id:y-designer:20170929071851j:plain

CSSを覚えたらぜひここを活用しましょう!
むしろここを活用できるようになると色々と自由度が広がります。

ブロックエディタでタブをCSSに切り替えれば設定の画面になります。
段落のスタイルやカラムごとにCSSを設定でき、ブロックエディタでは設定できなかったCSSも設定が可能です。

CSS詳細設定を使うメリット

ブロックエディタでの直接CSSと比較して自由度がグーンと上がります。

BiNDは簡単に作れるんでしょ?なんて言わずにぜひ、CSSを覚えてこちらの使用もチャレンジしていただきたいです!

CSS詳細設定を使うデメリット

当然、CSSの知識は必要になります。
とは言え、CSS詳細設定で使用できるCSSの種類も限られているので、CSS詳細設定の項目だけに絞ってCSSのお勉強をするのもありだと思います。

また、CSS詳細設定でCSSファイルの名前をつけます。このCSSファイルの名前を増やせば増やすほどCSSファイルが増えます。

つまり、CSS詳細設定のファイル数もできるだけ少なくする努力は必要です。共通でデザインにするなどして無駄にファイルが増えないように気をつけましょう。

CSSファイルのリンクはHTMLのhead内にありますので、あまりに数が増えるとBiND10で読み込みを早くするために一部記述位置を変えたのに、また遅くなる原因を作る可能性が出てきます。CSS詳細設定のファイル数もできるだけ少なくできるようにしましょう。

CSS詳細設定でできないこと

CSS詳細設定でもBiNDで使用できる全てのCSSが使える訳ではありません。

例えば、ナビゲーションメニューやスマホボタンのカスタマイズはCSS詳細設定ではできません。

BiNDのデフォルトで使用できる全てのCSSを使うためにはDRESSを使う必要があります。

みんなの宿敵『DRESS』

f:id:y-designer:20170929073455j:plain

CSSの理解がないと確実に使用が難しいのがこちらの『DRESS』です。
少なくとも初心者には絶対に無理です。

でも私はDRESS大好きです。デジタルステージさんありがとう。

ただ、Y-DESIGNERでお客様にBiNDを紹介する時にお話ししているのは、HTMLやCSSの知識がなくてもホームページが作れるのは完全にテンプレート通りに作ればの話です。

なぜなら写真とテキスト入れ替えるだけですから。文字の色変えたければブロックエディタでWord感覚でできます。

つまり初心者の方にとってテンプレートの選び方はものすごく大切です。
デザインで選ぶだけでなくテンプレートのページ構成等も検討した方が良いでしょう。

ナビゲーションのカスタマイズなどは初心者の方々には絶対無理です。ページ構成もぜひ確認してください。

DRESSを使うメリット

単純に自由度が高いです。その一言につきます。

こんなこともできます。

blog.y-designer.com

blog.y-designer.com

HTMLがわかる人に言うなら、BiNDではclass名をつけて、それにCSSを設定できませんが適用範囲と選択中の項目、以下諸々をうまく組み合わせることでclassやidにCSSを指定するのと近いようなことができるようになります。

CSS詳細設定ではできないナビゲーションメニューのカスタマイズやスマホボタンのカスタマイズもDRESSでできます。

また、DRESSのファイルを複数使うことはあまりないと思いますが(1つのDRESSファイルで十分CSSの設定ができますので)1つのDRESSファイルでCSSを設定すればCSSファイルは1つですみます。

つまりCSS詳細設定と比較してCSSファイルの数が確実に少なくてすみます。

サイトの表示速度にも少なからず役にたつと思いますのでCSSがわかる方はぜひDRESSに慣れていただきたいです。

慣れればそれなりに使えます。使わないと慣れません。

DRESSを使うデメリット

CSSを管理するのは現状CSS詳細設定のが簡単です。またDRESSを使いこなすのに適用範囲と選択中の項目の設定の仕方が肝になります。これをうまく使えればDRESSだけでCSSの設定が全てできそうな気がします。(現在挑戦中です。)

しかしながらそれは非現実的なので・・・。

使えれば色々な面で便利だけど使いこなすまでに時間はかかります。まずはCSS詳細設定で慣れるのが一番です。

スクリプトと詳細設定

f:id:y-designer:20170929075642j:plain

これぞBiNDでの最終兵器です。(外部CSSファイルのアップロードとリソースエディタを除けば)

直接CSSをHTMLファイル内に記述できます。

つまりBiNDのデフォルトで登録されていないCSSも使用できます。BiNDではclassはつけることができませんがブロックにidをつけることはできますのでidとHTMLを組み合わせての使用が可能になります。

言うまでもありませんがDRESS以上に難易度が上がります。CSSの記述の仕方を完全に覚えてなくてはなりません。

まとめ

今回ご紹介していませんが他に外部CSSファイルのアップロードとリソースエディタという方法もあります。それこそ、BiNDでホームページ作らなくてもよくない?って人達が使う機能なので今回はパスしました。

難易度が上がれば上がるほど自由度が上がり、メリットもでてきます。

正直、本当にテンプレート通りで良いって人は少ないと思います。少なからず、ちょっとレイアウトを変えたいとか自分のこだわりがあると思います。
だから私のところにちょくちょくBiNDの操作を教えてって電話がきます。嬉しい限りです。

でもCSSって言うと皆様げんなりしてしまい遠隔操作でこちらで説明しながら設定するのがほとんどです。

CSS詳細設定のCSS覚えるだけならそこまでのボリュームはありませんので、この機会に学習してみてはいかがでしょうか?

 

BiNDの困った・お悩みはY-DESIGNERまで!!

y-designer.com

 

(C)2017 Y-DESIGNER