[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
関連記事
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
[CSS] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。