WordPressでサイトをつくるとき、デザインやコーディングでちょっと気をつけるだけでハッピーになれるかもしれない3つのコツ

2013.02.07 | 制作あるある
スポンサードリンク

夜遅く帰ってきて、夜中だけどこんなものを食べてしまったサーモンです。

夜食ってなんでこんなにおいしいんでしょうね?

おにぎりはやっぱり鮭だよね

わたしがなぜ、サーモン色になったかというと、決して食いしん坊だから、とか、もう選ぶ色がなかったとかそんなことではないですよ。

私は請負で仕事をすることが多いので、ディレクターさん、デザイナーさん、コーダーさん、そしてWordPress構築、バラバラに集まったりすることがあるわけです。

そうすると、みんながみんなWordPressのこと分かってるわけじゃないので、ちょっとした行き違いがおきたりして、うまく進まなくなっちゃったりすることがあるんですね。

設計とか運営とか、ホント考えるべきことはいろいろあるんですけど、今回はコーダー目線で、こんなこと忘れないようにすると、スムーズに進むかもよ?ってことを書きたいと思います。

エディタから入れられるhtmlについてのスタイル設定わすれてない?

単純にブログとかだったらそんなに忘れるもんじゃないと思いますけど、細かくデザインされた固定ページがいっぱいあってその他の部分に更新してもらう部分があるようなときに起こりがち。

デザイナーさん、コーダーさん、

うっかり list-style:none とかにしちゃってませんか?

h1~h3くらいまでしかデザインしてなかったりしませんか?

更新する方があれ?ってならないよう、エディタから入れられるhtmlにはきちんとスタイルが適用されるようにしておきましょう。

WordPressでデフォルトで入るスタイルについてわすれてない?

代表的なのが、画像につくCSS。画像をアップロードして、記事に挿入するときに右、とか左、とか選ぶあれですね。

alignleftとか、alignright とか aligncenter とかのクラスがつくようになってます。

うっかり画像を他の所で別のクラス付けてfloatとかしてると、忘れちゃったりします。

間違ってもお客様に

「画像を左に寄せたいときは、class=”img-left”って入れてくださいね」

なんて言わないですむようにしたいですね。

ここらへんを参考にして、これらのものについてはしっかりデザインして、CSSが適用されるようにしておきましょう。

body_classっていう便利なものがあるの知ってる?

WordPressでは、その記事の種類やidなどいろんな状態を表すクラスをbodyに振ってあげることができます。

だから、ページごとにデザインを変えたい時なんかは、それを想定してコーディングできるようにしておくと便利なんですよ。

他にもウィジェットとかメニューとかに入るクラス名とかも色々あるんですけど、まぁそこまでは大変なので、ワイヤー書いたり、デザインしたりコーディングしたりするときに、とりあえずこの3つだけでも外さないようにしておいたら無駄な戻りも減るし、更新する方も迷わなくっていいし、WordPress構築する人も泣いて喜ぶし、悪いことはないんじゃないかと思います。

ちなみにサーモンって#fa8072 なんですって。

もっと詳しく知りたい、ぬかりなくテーマを作りたいっていうひとはこちらを。

WordPressのテーマ編集時に覚えておきたいID名やClass名 from tamotsu toyoda