WEBデザイナーのくせにブログのデザインをいつまでもいじろうとしないめんどくさがり屋の@delaymaniaです。
「だってめんどくさいんだもん」の一言ではすまないくらいたくさんの方に見てもらってるのでいいかげんなんとかします。
今日たまたま見かけた@Gaku0318さんの記事でものすごく訂正してあげたいことがあったので記事にしてしまいました。
晒しあげるつもりとかダメだしとかじゃなくて、ホントにいまのうちに教えてあげたいことだったので。
なにが問題なのか
僕が見た記事がこれ。
初心者の方にブログの書き方を教えてあげるという、サービス精神満載の素晴らしい記事。
僕も見習って「WEBデザイナーが教えるブログの書き方」なんて記事書こうかななんて思ってしまいましたよ。
ただ問題が一つ。
htmlに直接スタイル書いてる
これは危ないパターンのやつです。
htmlに直接スタイルを書くのがなぜいけないのか
たとえばこれ。
これは@Gaku0318さんの記事に書かれてるソースを持ってきたものです。
<span style="font-size:large;"> <div style="padding:10px 10px;border-color:#6699ff;border-width:0 0 1px 7px;border-style:solid;background:#f5f5f5;"> <b>見出し</b> </div> </span>
なぜこれがダメなのか。
それを語る前に、本来どうやって書くべきなのか、正しい書き方を書いておきます。
htmlの書き方
<h2>見出し</h2>
cssの書き方
.hogehoge h2{
font-size:112.5%; /*←この数字は適当です。18px相当の大きさ。*/
font-weight:bold;
border-color:#6699ff;
border-width:0 0 1px 7px;
border-style:solid;
background:#f5f5f5;
padding:10px 10px;
}
こっちが正解です。
.hogehogeは任意のidかclassに置き換えてください。
htmlには見出しのh2タグを入れるだけ。
あとは外部のCSS(WordPressであればデフォはstyle.css)に書いてスタイルを適用させてあげます。
フォントサイズはlargeって書かないで数値で指定してあげた方がいいとかそういう技術的な話は一回置いておいて、なにが問題なのかというと
デザイン変えたいときにすべてのページのすべての個所を修正しなきゃいけなくなる
ということです。
記事数が少ないうちに改善しないと、1000記事くらいになったときに直したくなったら気が狂いそうになりますよ。
必ず、適用させたいスタイルはCSSのファイルに書いてあげましょう。
その他の問題点
SEO的にもよろしくないです。
見出しはちゃんとhタグで囲ってあげましょう。
さらにMarsEditを使ってるならショートカットにhタグをつけておけば、これくらいのタグ付けならTextExpanderに頼る必要もなくなります。
テキストを指定したあとにショートカットを押せばテキストの前後にタグをつけるという便利な使い方も可能です。
最後に
上っ面だけを教えるとかえって混乱するということもあるので、かき乱してしまったらすみません。
でも、直接htmlに「style=””」っていう記述の仕方をしない方がいいですよっていうことだけ伝わればおっけーです。
10分で書いたやっつけ記事ですが、とにかく早く伝えたかったので。
これを機に、本気で「WEBデザイナーが教えるブログの書き方」っていう記事書いていきますね。