[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] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重
-
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
-
[jQuery] OSX風のスクロールバーにするプラグイン!
trackpad-scroll-emulator trackpad-scroll-emulator