Y-DESIGNER

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

Dressなんて怖くない!!最近よくみる見出しデザインにチャレンジ(前編)

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

今回はDressの記事第2弾です。

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

こんな見出しのデザイン、最近のホームページで見たことありませんか?

BiNDでも日本語のWeb Fontが多数使えるようになったのは皆様ご存知の通りです。

しかしながら、見出しのデザインをするのに現状のBiNDでは、特に日本語のWeb Fontを活用仕切れないのも残念ながら事実ではあります。

それはDressを使わないとWeb FontとCSSでデザインする見出しのデザインの幅を広げていくことができないからです。

愚痴ると前文だけで1記事できちゃうのでこの辺で。

見出しも画像などでデザインするのではなくテキストで作成する方がSEO的にも良いというのはデジタルステージさんもアナウンスをしてましたね。

見出しのデザインをするのにWeb FontとCSSの活用は必須になります。

今回は上の写真で紹介している見出しデザインをBiNDのDressを使って表現していきます。

まずはテキスト入力

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

段落のスタイルはタイトルにしています。テキストは『ここがタイトル』と入力しました。

デザインの性質上、あまり長いタイトル文にはこちらの見出しデザインは不向きかと思います。テキストの文字数にはご注意ください。

タイトル名を入力できたら適用しましょう。

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

Dressを開こう!!

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

今回はブランクサイトでサイト作成をしていますのでDressも新規作成にします。

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

Dressファイルに名前をつけましょう。

こちらは日本語でも大丈夫です。今回、私はsampleにしました。

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

作成ができたらテンプレートを編集を押します。

タイトルのデザインをする

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

選択中の項目の右側にある鉛筆マークを押して選択項目を展開しましょう。

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

まずは『段落を選択』のところを『タイトル』にしましょう。

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

今回は以下のように設定しました。画像をクリックすると拡大されますので設定を見たい人は写真を拡大することもできます。

  • 文字色 #232323
  • 文字サイズ 2em
  • フォント 源柔ゴシックBold
  • 文字間隔 0.1em
  • 行の高さ 1.0
  • 文字揃え/ヨコ位置 center

文字位置のcenter以外は皆様のデザインに合わせて変更していただいて大丈夫です。

デザインの性質上text-align: center;はしておいた方が良いです。

タイトルの高度な設定

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

デザイン設定を下に降っていくと高度な設定という項目があります。

高度な設定の中の以下の項目を設定します。

  • 表示 inline-block
  • 幅 100%
  • ポジション relative

まず表示を『inline-block』にすると文字揃えのcenterが解除されたように文字が左によってしまうと思いますが気にしなくて大丈夫です。

次の幅を『100%』にすれば中央揃えに戻ります。単位をpxにしないように気をつけてください。

ちなみになんでこうなるかと言いますとdisplayでh2をinline要素であり、Block要素であるという指定をしたからなんですが、この説明だけで1記事書けそうなので今回は割愛。

最後にポジションを『relative』にします。

これでh2を基準に設定したことになります。

まとめ

前編はここまで。後編に続きます。

blog.y-designer.com

(C)2017 Y-DESIGNER