ヴィンテージでは、サイトをwordpress等のCMSを導入して制作する場合がほとんどです。
CMSを導入する理由として大きいのは、お客様が直接ニュースやコラム等のコンテンツを更新するため、という点が挙げられます。
HTMLに関する知識が無い方でも手軽に更新してもらい、かつ綺麗な見た目が保たれる必要があり、そのためにコーディングやCMS設定・カスタマイズで気を付ける点がいくつかあります。
今回はコーディングにおいて気を付ける点を紹介します。
コーディングに関してヴィンテージが念頭に置いているのは、たった一つの原則です。
それは、
お客様がHTMLを全く意識せずに更新できる
そのために、メインコンテンツ内で、デザインの為のclass、id、div、spanを使わない、という方針を取っています。
見出しや段落、リスト、番号付きリスト、テーブル、注釈、強調、画像は、class名を付けずに適切なデザインや読みやすさに配慮した余白がなされるように設定します。
画像の回り込みやリストのデザインの違い等はwordpressのエディタ機能で出来る範囲に任せます。
投稿がシンプルになるので、お客様は、文章を書くのに専念できます。
その中でよく行うtipsを紹介します。
1．メインコンテンツの親要素にページ毎に固有idを振る
デザインをページ毎に微調整したいときによく利用します。
ベースコーディングに上書きする形で、親要素に固有idを指定したcssを記述します。
固有idはスラッグ名やpost_idを利用することで、テンプレートに記述できます。
2．cssのセレクタを活用
段落と見出しの間の余白を読みやすく設定するのによく利用します。
IE8に対応している兄弟要素(+)や子要素(>)、最初の要素(first-child)等でも十分対応可能です。
参考：Internet Explorer 8を最低限のブラウザとした場合に使ってはいけないCSSや注意を要するCSSのまとめ（外部サイト）
3．ネガティブマージンを活用
見出しに対して段落に常時インデントを付けるときに利用します。
メインコンテンツの左右にpaddingを設定しておき、見出しやテーブル等、インデントを無くしたい要素のみ、左右にネガティブマージンを適用します。
すると、段落やリスト等、見出しの中に入る要素は何もしなくてもインデントが付きます。
4．css3プロパティ、セレクタの活用
対象ブラウザがIE9以上となりますが、お客様でも簡単にボタン等を設置できるようにするために利用します。
なお、ヴィンテージが管理しているサイトにおけるIE8の割合は、執筆時点で全体の約10%前後です。
ヴィンテージでは、古いブラウザでの多少の見た目の違いを許容する「プログレッシブエンハンスメント」という考えのもと、css3プロパティを利用することがあります。
ヴィンテージがwordpressを導入するときに良く使う設定・カスタマイズについてはまた別の機会に取り上げたいと思います。
Webサイト制作、Webシステム制作に関してのご依頼、ご質問等は下記お問い合わせフォームもしくはご連絡先までお問い合わせください。
株式会社ヴィンテージ
TEL：093-513-7255