前回からの続き。今回はWordPressのテンプレートタグとは直接関係ないのですが、試作品ページの各要素をエリア分けします。しかし毎回その名前をどう付ければ良いのか悩みますな。いろいろ参考にしていくと一定の慣用ルールがあるようで、当サイトでも「container」とか「POST」とか見様見真似で名付けていますが、以前も書いたようにHTML5では便利なタグが追加されているので、下記の記事を参考にしてそれらを採用してみることにします。そしてまた繰り返すけれど、正しく使えているのかどうかはよく分かりません。
まずは先頭部分
まずページトップにあるナビゲーション部分は＜header＞とします。これはHTML5で採用済みのタグで、ここにロゴとか各メニュー＜nav＞を配置。
その次に来るのは曲名。ここを＜section＞タグで括ろうと思います。以前なら＜div＞を使ってたところ。idは「コードネーム」と名付けて、制作中の音楽の仮タイトルを入れます。その仮タイトルはWordPressで呼ぶところの「カテゴリ」扱いにしようと考えていて、そのカテゴリ（タイトル）毎に日記をダラダラ書いて行く…というイメージです。後にもっと良い構成を思い付いたら臨機応変に変えて行きますが、現時点でも例えば、＜header＞の中に＜nav＞と＜section＞を内包させるべきなのかなぁ…とも思ったりします。どちらが構造的に正しいんでしょうか？でも、ここであまり悩んでいると先に進めなくなるのでテキトーに済ませておきます。
記事本文全体のエリア
さて、次は投稿記事全体部のエリア構成。ここはまだ悩みつつの書き込み。以前だったら「コンテナ」として括っていた部分を、記事本文全体を表す新しいタグである＜article＞で囲もうかな…と考えています。上の「カテゴリ（仮タイトル）」もその中に入れるべきかしら？…と悩んでいるのですが、ひとまず分離させて「article（記事）」という本来の意味で括るとします。
上で作成した＜article＞の中に、記事本文を配置する＜section＞を挿入（idはpost）。
以前書いたように、この本文postエリアは若干センターから右寄りにシフトさせます。僕は利き目が右目なので、フォーカスする部分が右側に在る方が気分が安定するんですよねえ。まあ、科学的根拠は全くありませんけど。WIREDや、つい先日３カラムから２カラムに戻ったITmediaなど、記事本文が左側にあるのは、実は「右側にある広告を読者に注目させたい」のではないかと勝手に想像しています。しかし本来注目すべき記事が左側にあるのは正直なところ読み難いです。
最後にフッターを加えて、まずはザックリとした主要エリアの配置構成は終わり。
今回のhtml
今後、下記のように作業中のhtmlファイル等を掲載していく事になりますが、読者目線は無視し、「自分さえ判ればイイ！」という、完全に自分の為の備忘録となりますので、多々間違っていたり、非常に見づらい箇所や、書式がテキトーだったりしますがご了承下さい。
WordPress思い出す（その３ー１）
<?php /* WordPressを思い出す（３の１） */?> <!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="all"> <title><?php bloginfo( 'name' ); ?></title> </head> <body> <header>メニュー</header> <section id="code_name"> <h1>仮タイトル</h1> </section> <article> <section id="post"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> <?php endwhile; endif; ?> </section> </article> <footer>フッター</footer> </body> </html>
19行〜30行目：投稿記事を出力する「ループ」部分を＜article＞で囲みます。
今回のCSS
これまでチマチマと「padding-top:」とかいう感じで上下左右を分けて書いてきたけど、長くなるのでこれからは１行で。でも書式をいつも忘れるのでメモ。下の記事がとても参考になります。
CSS
padding: 5px 5px 5px 5px;
順に「上」「右」「下」「左」の時計回り。途中に「,」は不要。
CSS： marginの正しい理解 (CSSのmarginが難しい)（kojika17）
ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。（kojika17）
WordPress思い出す：CSS（その３ー１）
/*
Theme Name: FLFL
Theme URI: http://www.flipflipflip.com/
Author: FLFL
Author URI: http://www.flipflipflip.com/
*/
@charset "utf-8";
/*ここにCSS Reset （テーマ「twentytwelve」より一部抜粋し流用。長いので掲載は省略）*/
/*_/_/_/_/_/_/_/_/基礎/_/_/_/_/_/_/_/_/*/
/*ヘッダ-------*/
header {
width: 100%;
height: 48px;
background-color: #2a84ab;
font-family: 'Lucida Grande','Helvetica Neue light', sans-serif;
text-align: center;
}
/*ボディ-------*/
body {
width: 100%;
height: auto;
background-color: #f5f6f7;
}
/*コードネーム（カテゴリ）-------*/
section#code_name {
width: 100%;
height: 100px;
background-color:#023d7d;
vertical-align: middle;
}
#code_name h1 {
font-family: 'Gotham SSm A', 'Gotham SSm B', 'Helvetica Neue', 'sans-serif';
font-size: 28px;
font-weight: bolder;
color: white;
text-align: center;
padding-top: 32px;
line-height : 1;
}
/*ポスト投稿-------*/
section#post {
width: 100%;
background-color: #f5f6f7;
margin: 0px auto 0px auto;
padding: 0px;
}
/*フッター-------*/
footer {
width: 100%;
height: 60px;
background-color: #ebebeb;
margin: 30px 0px 0px 0px;
padding: 28px 0px 0px 0px;
text-align: center;
}
/*□■□■□■□■□MacBook Air以上はココから□■□■□■□■□*/
@media screen and (min-width : 1024px) {
body {
background-color: #f7f8cb;
}
header {
height: 60px;
background-color: #fb9774;
border: solid 1px #222222;
}
section#code_name {
width: 100%;
height: 100px;
background-color:#bcc9bc;
vertical-align: middle;
border: solid 1px #ff0000;
}
#code_name h1 {
font-size: 36px;
color: #3f3f3f;
font-weight: 400;
text-align: center;
letter-spacing: 6px;
padding: 20px 0px 0px 0px;
}
article {
width: 940px;
background-color:#cdf1d1;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
border: 1px solid #021ffc;
}
section#post {
width: 800px;
background-color: #55d6f4;
margin: 0px auto 0px 140px;
padding: 10px auto 60px auto;
border: 1px solid #02fda4;
}
footer {
width: 100%;
height: 60px;
background-color: #cad2ba;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: solid 1px #ff0000;
}
所々にborder: solid 1px #~;等が在るのはメンテ作業時の視認用。通常は0pxにして消しています。
記事掲載用に一部抜粋にとどめたり、設定値を修正していたりします。
細かな設定値等は回を追う毎に、状況に応じて更新されます。
しばらくはMAMP内でのローカル作業につき、MacBook Airでの表示確認を先行しています。
以上の設定で、Safariでの表示はこんな感じになります。つづく。
次回は今回のつづき。
2014-05-31 ＞ VPS＆WordPress引っ越しメモ