[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ！[第1回]
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いています。
それはそれは、すばらしいテーマでSEOに強いらしく、アクセスが伸びた人がわんさかいるらしいのです。
僕は、昨日変更したので実感ないですけどw
新しく作るわけ
別にこのままでもいいんですが、一応Web業界に生きる端くれとして、それじゃあ男が廃るってもんよ！的な気持ちで
あー、この際作ってみるか！となった訳です。
あと、せっかくSEOに強い仕様になっているんだったら、マークアップも最新にしたいよね！？ってのもあります。
そして、どうせ作るのであれば一からきっちりやってやろうじゃないか！と、もう男気満載なわけです。
そんなわけで、カスタマイズでテーマは作った事あったけど、気持ち新たに初心者気分で一から作り始めたわけです。
なぜHTML5なのか？
どうしてなんでしょ？
あまり考えた事ないです。
一番の理由は、シンプルなソースが好きってことです。
あとは、使えるものは全部使って見ようかなってのもありますね。
なので、ふんだんに盛り込んでいくつもりです。
盛りだくさんにするので、対応するブラウザも当然最新のものばかりになりますが、IE6とかIE7とかもういいでしょ・・・。
<head>の中から攻めます！
いろんなタグの解説やら書き方などは、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の状態
もー、立派にノープランです。
でもこれでいいんです。今回だけは。
ソース先攻型で決めていこうと思っています。
とはいいつつも、
一方、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を触りましょう！
なんということでしょう！ちょっとだけ進化しました。
この方法にどんなメリットがあるかと言いますと、ぼやーっとしたイメージのままある程度進めてしまうことが出来ちゃいます。
どんな風にしよっかなーと、もうコンビニ感覚です！
逆にデメリットとしては、ゴール地点がさっぱりってことですね。
出口のないトンネルをひたすら突き進むことになります。
無事に出れるのかな・・・・行けばわかるさ、ありがとー！by 猪木
はぁ、なんて馬鹿な方法を選んだのでしょう。迷走っぷりが見えますね。
今回は、ここまでにしとうございます。
事の顛末を知りたい方は、最後までおつきあいください。
ad
関連記事
-
-
[Dreamweaver] オプション領域を極める！テンプレート上級編
オプション領域は、難しい！ これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
-
[HTML] 初心者を脱却するためのHTMLの心構え！
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る！ CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[WordPress] 自作プラグインの設定など
プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて
-
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像
-
-
[CSS] animationを使ってみる！
色の変化をCSSのみで実装できる！ CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単！ 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは？ CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
