全力を挙げて素人がHTML5でWordPressテーマを自作してみた

 /  Tech

HTML5 mug
photo credit: slavik_V via photopin cc

 この記事について:CSSフレームワークをベースにWordPressテーマの自作に挑戦してみたところHTML5を知ることになったのですが、自作にあたり理解を深めるべきポイントがありました。

スポンサーリンク

はじめに

WordPressの自作テーマに奮闘中の最近。CSSフレームワークなるものを知ったので「これならできるかもしれない」と思い、CSSフレームワークをベースにこれまで使っていたWordPressテーマを参考にしながら、HTML5でWordPressテーマの自作に挑戦してみました。

CSSフレームワークって何だ?

CSSフレームワークとは、一言で言えば「効率的にWebサイトを作るための枠組み」と言えるのではないでしょうか。

つまりは、Webサイト作成に必要なレイアウト、メニューバー、テーブル、フォーム、ボタンなどの要素が予め準備されているツール群ということですね。

私が初めてCSSフレームワークなるものを知ったのはBootstrapでした。自作で簡単にWordPressテーマを作る方法は無いかなと探していたことがきっかけです。もちろん、最初は経験がありませんでしたので「これで今風な感じのサイトが簡単に作れるのか」なんて思っていました。

ところが、Bootstrapを使ってみるとなかなかうまく行きません。使いこなすことができなかったんです。そのため「他に何か無いかな」なんて探してみたところ、PureなるCSSフレームワークの存在を知りました。

「そうか、これなら自作できるかもしれない」と思ってこれまで使っていたWordPressテーマを参考に自作に取りかかりました。

見慣れないタグがあるけど、これは何だろう?

Webデザインについては素人とは言っても、なんとなくHTMLのタグを使った経験はあります。しかし、見慣れないタグに出くわしました。

header,nav,main,article,aside,section,footer,・・・

「一体これは何だ?」という感じだったのですが、これがHTML5について取り組むことになるきっかけとなった訳です。

sectionとarticleとaside、どれがどれ?

HTML5という世界に足を踏み込むと、どうやらsectionとarticleとaside、これらがポイントになりそうだということが分かりました。しかし、ここで問題が。

「sectionとarticleとaside、どこでどれを使えばいいんだ?」という疑問です。

分かるような分からないような感じで一向に自作テーマの作業は進みません。そんな中で見えてきたヒントが「アウトライン」という考え方です。

アウトラインについて理解を深めるのが近道だった

「アウトライン」という言葉そのものについては一般的な文書作成の時にアウトラインプロセッサを使った経験がありますので、HTML5で言われるアウトラインというのが言わんとしていることが何となくわかってきました。

つまり、一般的な文章で言うところの章立てですよね、部・章・節・項・目とかの。こういうものをHTMLという言語で実現してくださいという話だと理解し、徐々にHTMLで言うところのアウトラインというものをつかんでいきました。

そこからようやく自作テーマの作成が徐々に進み始め現在のブログのように何とか形になったということです。(IEへの対応とかまだまだ未完成ですが、それはまた別の課題ということで)

特にこれらのサイトはとにかく何度も何度も行ったり来たりして参考にさせて頂きました。

アウトラインを意識しなかったらレイアウトや装飾目的でsection,article,asideなどを使っていたところでした(実際、最初はそうやって作っていました)。

  • アウトラインを与える要素は基本的にアウトラインを決めることを目的に使うことを心掛け、極力CSSを付けないようにする。
  • レイアウトや装飾を決める時はできるだけdivやspanを使うようにする。

アウトラインという考え方について理解を深めることでこの2つが明確になり、最終的には何とかWordPressテーマの自作ができました。

こんなアウトラインになりました(備忘録も兼ねて)

さて、このブログの現在のアウトラインなのですが、「こんな感じになりましたよ」ということでご紹介したいと思います。ハイライト表示の部分がアウトラインとして認識される部分です。

ヘッダー部

メインコンテンツ部(トップページ・投稿記事一覧表示)

メインコンテンツ部(アーカイブorカテゴリーorタグ別投稿記事一覧表示)

メインコンテンツ部(投稿記事)

サイドエリア部

フッター部

アウトライン(トップページ・投稿記事一覧表示)

アウトライン(アーカイブorカテゴリーorタグ別投稿記事一覧表示)

アウトライン(投稿記事)

解決したい疑問と今後の課題

現時点ではこのようにアウトラインが決まりWordPressテーマの自作も一旦落ち着いたのですがまだまだ道半ば。解決したい疑問と今後の課題です。

  • ウィジェットの一部だけnavを使いたい、どうやってやるのか。
  • IEではやはり表示が崩れるので直したい、どう対応すればいいのか。
  • もっと良いアウトラインの書き方があるのではないか、直した方が良いアウトラインがあるのではないか。
  • CSSはまだまだ苦手、きっときれいな書き方があるだろうから直していきたい。

おわりに

当初は「CSSフレームワークを使って簡単にWordPressテーマを自作したいな」なんてことを思っていたのですが、ふたを開けてみるとHTML5のアウトラインについて理解を深めましょうということが中心になっていました。

ネット上でも古い情報と新しい情報が混在しているようで苦労しましたがアウトラインについての理解が大事だということが良くわかりました。アウトラインというのはHTML5に限った話ではないと思いますが、これまではh1~h6まで順番にくっつければいいと思っていただけでした。

HTML5ではより強くアウトラインを意識させられるということなのかもしれません。今回初めてその世界に足を踏み入れたということですので、これからも注目して追っかけていきたいと思います。

 タグ:,

スポンサーリンク
スポンサーリンク
Ads by medi8
Ads by medi8