BiNDでホームページ制作 | Y-DESIGNER

HOME | BLOG | 20170116005511

BiNDでも覚えておきたいHTML(書式のスタイル編)

2017.01.16 10:00

BiNDHTML

こんにちは。Y-DESIGNERの須山です。
BiNDはHTMLやCSSの知識がなくてもホームページが作れることで有名ですが、HTMLやCSSの知識があればより良いホームページを作ることができます。今回は、ブロックエディタ内の書式のスタイルについて見ていきたいと思います。因みにこのBlogはBiNDPressで更新していますが本文内に直接HTMLが入力できるみたいです。一言もサポートの方には書いてなかったのでサポート対象外の気がしますが、検証の意味も兼ねてHTMLも部分的に記述しています。

目次

BiNDの書式のスタイル
実際のHTMLで確認
カスタムHTMLの利用
まとめ

BiNDの書式のスタイル


見出し(Hタグ)の設定

BiNDで見出しを指定するタグは ページタイトル(h1)、タイトル(h2)、大見出し(h3)、小見出し(h4)になります。hタグは、そのページの文章の見出しを指定するタグですのでホームページを作る際に、このページ内の文章構成はどうなっていて、この部分はどの見出しになるのかなどを考えて指定していくと良いを思います。例えで見出し構造を作ると以下のようになります。

=============================
(h1)山梨県のホームページ制作 | Y-DESIGNER
  (h2)web制作  
    (h3)制作の流れ
    (h3)制作の費用について
    (h3)制作後の管理について
  (h2)制作実績
  (h2)会社案内
=============================

この辺はSEOにも関係してきます。特にページタイトル(h1)、タイトル(h2)あたりは重要視されています。見出しタグをつけると文字のサイズ、太さなども変わりますが、デザインによっては文字の大きさを小さくしたいなどの場合もあると思います。一番よろしくないのは、ページタイトルにしたら文字が大きくなったから、大見出しに変更したら理想の文字サイズになりましたみたいな使い方はアウトです。hタグはそのページの文章構成の見出しを表す部分ですのでしっかりと使いましょう。また、文字の大きさなどを変えたい場合はCSSで変更します。BiNDでCSSを変更できる箇所は複数あるのでCSSに関しては後々の記事で触れていきたいと思います。

段落(pタグ等)の設定

BiNDで段落(文章)を指定するタグは 本文、リード、引用、囲み、注釈、クレジットになります。
本文は見出しと以下の段落タグ以外の文章のほとんどがこれになると思います。
リードは見出しや画像の補足・説明文などで使用しています。
引用は、他のホームページなどから文章を持ってきた時に使います。(引用先の表記もしておいた方が良いです。)
注釈は、文章中の単語などを取り上げてその意味を説明する時に使います。(文章の下にある※1とかです)
クレジットは著作権(所有者・権利者)の表記です。どのホームページにもあるのはfooterの部分でよく見る(c)2017.Y-DESIGNERみたいな表記です。また、素材サイトなどから写真などをダウンロードした際に、使用要件の中でクレジットの表記を条件としているサイトもありますので、そういった素材サイトのクレジット表記もこれになります。

その他の書式のスタイル

あまり使用頻度はないかもしれませんが、 HTMLタグ、コメント非表示、なしという書式スタイルがあります。
HTMLタグは直接HTMLタグを入力できます。iflameタグなどを利用する際はこちらの書式スタイルが良いと思います。
コメント(非表示)はブロックエディタには表示されるが実際にホームページには表示されない書式スタイルです。コメントアウトと言いますが、ホームページを制作する上で、他の作業者などへこのブロックの説明文をつけたい時などに使用するのが一般的かと思います。中の人同士の引き継ぎに使うタグですね。
なしは、なしです。。。ざっくりですね。見出し、段落を示すタグをつけない場合はなしを使います。意外とこれは使います。BiNDで言えば、分割・区切り線・フォームなどを設置する場合はこれになります。

実際のHTMLで確認

では、実際にHTMLでの記述はどうなっているのでしょう?簡単な デモページを作りました。
HTMLではこうなっています。

赤い枠で囲んだ部分がPOINTです。見出しの書式スタイルの部分は問題ないト思います。段落タグ等は全てpタグになっていますね。つまり、BiND上では見た目の違いだけですね。これはあまりよろしくないですね。引用はblockquoteタグやqタグ、注釈やクレジットはsmallタグを使うのがHTML5のルールなのでデジタルステージさんが改善してくれるのを待ちましょう。全てpタグになっていてもデジタルステージさんが改善してくれる可能性はありますのでBiND上での書式スタイルはしっかり設定しておくことをオススメします。

カスタムHTMLの利用

では、上記のような問題を解決するにはどうすれば良いでしょう?オススメはカスタムタグの使用ですがHTMLの知識が必要になりますので無理に使わない方がいいです。

ブロックエディタの右側にある赤枠がカスタムタグです。カスタムタグはHTMLタグと違って、段落扱いになりませんので、部分的にHTMLを埋め込みたい時にはこちらを使いましょう。strongタグやsmallタグなどでY-DESIGNERでもよく使っています。

まとめ

簡単にホームページを作れるのはBiNDの良いところです。BiNDに限らず、ホームページを制作できるソフトの使い方・特性、また基本的なHTML・CSSの知識があるとより良いホームページが作れます。
見出しタグ・段落タグは適正な書式スタイルを使いましょう!気になる部分はカスタムタグを活用しましょう!

ホームページ制作の特徴・料金プランはこちら
ホームページの管理に関してはこちら
ホームページ・印刷物の制作の流れはこちら
ホームページ制作のコンテンツのご案内hこちら
BiNDでのホームページに関してのよくある質問
制作に関するお問い合わせはこちら
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |