山梨県のホームページ制作Y-DESIGNERスマートフォン用の表示で見る山梨県のホームページ制作Y-DESIGNERBiNDでのホームページ制作に役立つ情報をお届けしています。ヒーローヘッダーTweetこんばんは。山梨県でホームページ制作をしているY-DESIGNERの須山です。BiNDなどのソフトでホームページを作っているとソフトの仕様の兼ね合いでデザインに縛りが出てしまいます。モニターのサイズに合わせて縦横全体に広がって文字は常に中央表示になるようなことはできないって思っていませんか?。できるんですよ、これ。DRESS使いますけど。コツと仕組みがわかればこれは簡単なので2回に分けて紹介して行きます。週末も山梨の自宅にいますなんて意味のわからないこと書いてますが、これができるようになります。トレンドのヒーローヘッダをBiNDでも実現しましょう!!因みにいきなり完成してるサイトデータでやらないでください。CSSをいじるので全体的に体裁がおかしくなる可能性があります。1,サイト設定からページの幅を設定しましょう。2,背景画像を設定しましょう3,テキストを入力4,DRESSを開こう!!5,CSSを設定しますまとめ1,サイト設定からページの幅を設定しましょう。これをやる時は必ずページ全体は100%にしてください。全幅になりませんので。コンテンツも一応100%にしておきます。ブロック内コンテンツは文字とかが入るエリアですね。今回は1000pxにします。最近はパソコンのモニターとかも大きくなったので1200pxとか1400pxくらいで設定しても面白いと思いますよ!するとブロックの幅が全て100%になりました。ブランクサイトで作る時はまずこれをしましょう。2,背景画像を設定しましょう背景画像を設定します。今回はビルボードエリアで作業しています。コンテンツエリアでやろうとすると苦労しますのでこれをやるのはヘッダエリアかビルボードエリアがオススメです。サイズは大きめのデータを用意しましょう。全体に広がるようにストレッチにします。3,テキストを入力ここでキャッチになるテキストを入力します。ポイントは段落スタイルは1種類しか使わないことです。複数使うと今回の方法はできません。改行したい位置が決まっているのであればこの時点で改行もしておきます。『山梨の』と『自宅に』の間で改行しました。できたら適用を押します。背景とテキストまで入りました。CSSは設定していないので文字は黒のままですね。小さい上に写真と同化して見えませんね。今回は文字のCSSもDRESSで設定します。4,DRESSを開こう!!DRESSのボタンを押して新規作成にします。DRESSの名前は管理しやすい名前で大丈夫です。日本語でも大丈夫みたいです。今回は『sample』にしました。ここまでできたらテンプレートを編集を押しましょう。編集の際は左下にある編集中のページでプレビューにチェックを入れます。実際の編集ページを見ながら編集ができるようになります。5,CSSを設定します今回はビルボードエリアに設定していますので適応範囲をビルボードエリアにします。選択中の項目の右側にある鉛筆マークを押すとさらに詳細にエリアの指定ができます。今回はブロックレイアウトをプレーンのままにしてありますのでブロックの選択をプレーンブロックにします。ここまで設定したらオプションを選択の下にあるOKボタンを押して選択中の項目を閉じます。デザイン設定を下に進んで行くと高度な設定のところに高さ(height)がありますのでそこをクリックします。上の写真を同じように設定するにチェックを入れて数値は『100』単位は『vh』にします。できたらOKを押します。これで横幅・高さ100%の可変の背景ができました!まとめDRESSが登場したことでBiNDのデザインの自由度も格段に上がっています。HTMLやCSSがわからなくてもホームページが作れるが売り文句のBiNDですがHTMLやCSSがわかれば、もっとステキなサイトが制作できます!!せっかくある機能ですから練習用のサイトデータ作って練習してみてください。次回は左上の小さな黒文字の『週末も山梨県の自宅にいます』のデザインをDRESSで変更していきます。05:05全2回!!DRESSなんて怖くない!!BiNDでレスポンシブなヒーローヘッダーを作ろう!!(前編)Tweet関連記事2018-10-20BiNDでホームページを制作する時に気をつけたいこと。山梨県でホームページの制作をしているY-DESIGNER...2018-05-04BiNDでやってくべき!サイトデータのバックアップ方法こんにちは。山梨県でホームページ制作をしているY-DESIGNERの...2018-02-27BiNDの電話サポートならY-DESIGNERまで!こんばんは。山梨県でホームページ制作をしているY-DESIGNERの...2017-11-02BiNDのDRESSだけでCSSを設定し続けた結果。»ABOUTBiNDを使用したホームページ制作やSEO、マーケティングのことなどの情報を発信しています。Y-DESIGNERスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。