Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

オリジナルテーマ・HTML化作業

デザインを考えたら、次はHTML化作業です。

WordPressのテーマはPHPを利用して作りますが、PHPを利用しても結局のところ最終的なアウトプットはHTMLになります。(PHPを利用して「こういうHTMLを出力してください」とお願いする感じ)

 

HTML化作業をしてしまえば、あとは必要な部分にWordPressの関数などを埋め込んでいくだけです。なのできちんとHTML化をしておくとそのあとの作業も進めやすいと思います。

 

HTML/CSSの細かい文法事項は参考書や解説サイトを探せばいくらでもあると思うのでそちらをご参照ください。

個人的にはこの本がとても参考になりました。CSSはこの本を読んだだけでかなり自由に使いこなせるようになったと実感できているのでお勧めです。

 

なお、CSSでも特にレイアウトをきれいに整えるには以下のようなものをよく使います。

  • float:left;, float:right;, clear:both;
  • width,  margin, padding

css

このあたりはいちいち調べなくても済むように、書き方とその効果を覚えてしまったほうが効率よく作業できます。

あとclearfix(クリアフィックス)という用語も覚えておくと良いと思います。

 

また、レイアウトが思った通りになっているか確認するためにbackgroundに一時的に色を設定するのも便利です。

極端な例ですが以下のように各要素に色をつけて思った通りの位置・サイズになっているか確認できます。

blog005

 

ちなみにこれらHTML化作業はすべてSublime Text2というエディタを使いました。

使い始めたばかりで特殊な使い方はしていませんが、MacでもWindowsでも使えるのと、ハイライト表示してくれるのが便利でこれだけでも使う価値は十分あると思いました。

blog006

 

Sublime Textの使い方はこちらのサイトとかかなり参考になります。

”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!