[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] コーディングを早くする5つの方法
コーディングは、早くなる！ 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
-
[CSS] animationを使ってみる！
色の変化をCSSのみで実装できる！ CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
-
[javascript] Google Maps javascript API v3の使い方（基本編）
Google Maps javaScript API v3とは Google Maps API V
-
-
[HTML]デザインは、やはり大切だった！
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る！ CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
-
[jQuery] 実際の案件でよく使っていたプラグイン4選！
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
-
[jQuery] フルサイズ（ブラウザいっぱい）で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る！ Dreamweaverのテンプレートは、ベースを作り、さらにそのベ
