[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]

公開日: : 最終更新日:2014/08/08 html5, Web制作

HTML5_sticker

現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いています。

それはそれは、すばらしいテーマでSEOに強いらしく、アクセスが伸びた人がわんさかいるらしいのです。
僕は、昨日変更したので実感ないですけどw

新しく作るわけ

別にこのままでもいいんですが、一応Web業界に生きる端くれとして、それじゃあ男が廃るってもんよ!的な気持ちで
あー、この際作ってみるか!となった訳です。

あと、せっかくSEOに強い仕様になっているんだったら、マークアップも最新にしたいよね!?ってのもあります。

そして、どうせ作るのであれば一からきっちりやってやろうじゃないか!と、もう男気満載なわけです。

そんなわけで、カスタマイズでテーマは作った事あったけど、気持ち新たに初心者気分で一から作り始めたわけです。

なぜHTML5なのか?

どうしてなんでしょ?
あまり考えた事ないです。

一番の理由は、シンプルなソースが好きってことです。
あとは、使えるものは全部使って見ようかなってのもありますね。
なので、ふんだんに盛り込んでいくつもりです。
盛りだくさんにするので、対応するブラウザも当然最新のものばかりになりますが、IE6とかIE7とかもういいでしょ・・・。

<head>の中から攻めます!

img01

いろんなタグの解説やら書き方などは、Google先生がバンバン教えてくれるので割愛します。

基本的にいる要素は、

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="description" content="検索結果に出るページの説明文です。">
<meta name="keyword" content="キーワード1,キーワード2,キーワード3">
<meta name="author" content="○○○">
<meta name="copyright" content="○○○">
<link rel="shortcut icon" href="favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS" href="feed/">
<link rel="stylesheet" href="common/css/basic.css">
</head>

こんな感じではないでしょうか。

一旦、HTMLを組み上げる叩き台なので、ざっくりでいいんです。
テーマに組み込むときにもうちょっといろいろ考慮しますよ。

ここからが本番。

もー既に本番なわけですが、ページの中身を作っていきます。

これはもう人それぞれやり方が違うと思うので、一概には言えませんが、今回は実験も兼ねてすっごく変な方法でやってみます。

現在のPhotoshopの状態

img02

もー、立派にノープランです。
でもこれでいいんです。今回だけは。

ソース先攻型で決めていこうと思っています。

とはいいつつも、

一方、Dreamweaverはその時!

<header>aa</header>
<nav>
<ul>
<li>aaa</li>
</ul>
</nav>
<div>aaa</div>
<footer>aa</footer>

・・・・・・ちーん。
ま、徐々に進めますよ。

簡単に説明すると、とりあえずざっくり大枠を決めました。
ここはこれ、こっちはこれ。ってな感じですが、偉そうに言うほど進んでません。
急ぎましょう!

ちょっと進むと・・・

<div>
<header>
<hgroup>
<h1>ブログタイトル</h1>
<h2>サブタイトル</h2>
</hgroup>
</header>
<nav>
<ul>
<li>カテゴリ1</li>
<li>カテゴリ2</li>
<li>カテゴリ3</li>
<li>カテゴリ4</li>
<li>カテゴリ5</li>
<li>カテゴリ6</li>
</ul>
</nav>
<div>
<div>
<div>新規 Div タグの内容がここに入ります</div>
</div>
</div>
<footer>copyright</footer>
</div>

こうなりました。
横幅をフルにしたくないので全体をdivで括りました。

ちょっとここからCSSを触りましょう!

なんということでしょう!ちょっとだけ進化しました。
img03

この方法にどんなメリットがあるかと言いますと、ぼやーっとしたイメージのままある程度進めてしまうことが出来ちゃいます。
どんな風にしよっかなーと、もうコンビニ感覚です!

逆にデメリットとしては、ゴール地点がさっぱりってことですね。
出口のないトンネルをひたすら突き進むことになります。
無事に出れるのかな・・・・行けばわかるさ、ありがとー!by 猪木

img04

はぁ、なんて馬鹿な方法を選んだのでしょう。迷走っぷりが見えますね。

今回は、ここまでにしとうございます。
事の顛末を知りたい方は、最後までおつきあいください。

ad

関連記事

[Dreamweaver] テンプレート機能を使う!初級〜中級編

まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[WordPress] 管理画面にテーブル(WP_List_Table)を表示する

WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[CSS] CSSで作るリストのアイコン

CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現

記事を読む

[Dreamweaver] テンプレート機能初級編!

まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー

記事を読む

[Dreamweaver] オプション領域を極める!テンプレート上級編

オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹

記事を読む

[CSS] clearfixの使い方を考える

現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑