HTML5のレイアウト構造

html5で作った場合の基本レイアウト。あくまで基本です。

ワンカラムレイアウトの基本

<body>
<div id="container">
<header>
<h1>サイト名:ロゴ</h1>
<nav>ナビゲーション</nav>
</header>
 <main role="main">
  <article>
  <h1>タイトル見出し1</h1>
   <section>
   <h2>タイトル見出しh2</h2>
   <p>本文</p>
    <section>
    <h3>タイトル見出しh3</h3>
    <p>本文</p>
    </section>
   </section>
  </article>
 </main>
<aside>カテゴリなど</aside>
<footer>フッター</footer>
</div>
</body>

サイドバーなど複数のカラムで構成されたレイアウトの場合

フルードレイアウト基本

<div id="wapper">
<header>
<h1>サイト名:ロゴ</h1>
<nav>ナビゲーション</nav>
</header>
<div id="contents">
 <main role="main">
 <article>
  <h1>タイトル見出しh1</h1>
  <section>
   <h2>タイトル見出しh2</h2>
   <p>本文</p>
    <section>
    <h3>タイトル見出しh3</h3>
    <p>本文</p>
    </section>
   </section> 
  </article>
 </main>
 <aside>カテゴリーなどのサイドバー</aside>
</div>
<footer>フッター</footer>
</div>

<article>要素は、それ単体でも成り立つセクションに使用。複数使用ができます。
<main>要素は一ページに一つだけ、そのページのメイン部分を囲います。
また、他セクションの子孫として使用してはいけない。
ただ<div >の中に<main>があるのはよいのか…?<div>は装飾用タグだからいいんじゃないか…?考察中….
<div>の中に<main>もOK。
<div>は装飾タグなので基本どこへ使っても問題はないと思います。

main 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP

大見出し要素<h1>の複数使用

htm4では、h1要素は一つのページに一つで、複数使用すると構造的にアウト。SEOでもスパム行為とみなされます。

しかしhtml5では、h1要素を複数使用することができるんです!

とはいえh1内にキーワードを乱発すると結局スパム扱いされてしまいそう…なのでキーワードの多用に注意しながら、階層ごとにあった見出しにするよう注意が必要です。

<hgroup>要素は使わない

wordpressデフォルトテーマ「twentyeleven、twentytwelve」では、見出しをグループ化する要素<hgroup>が使用されていますが…

■hgroup要素の使用例

<header>
 <hgroup>
 <h1>見出し1</h1>
 <h2>見出し2</h2>
 </hgroup>
</header>

が、新テーマ「twentythirteen」では使用されていません!
このhgroup要素は2013年4月に廃止勧告がされています。

HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除

なのでhgroupは使用は避けましょう。

gooのpingエラーを回避

WordPressでのPing送信にはプラグイン「smart-update-pinger」を使用しています。

■プラグインは下記サイトよりダウンロード
Smart update pinger
「日本語化版」をクリックしてダウンロード
※Winの場合右クリック→”名前を付けてリンク先を保存”

が、なぜかいつもgooで送信エラーになっていて…
調べると「smart-update-pinger.php」のuseragent部分を変更するといいそうです。

↓変える箇所

$client->useragent .= ' -- WordPress/'.$wp_version;

wordpressの部分をabc(好みの半角英数字)に変更して再UP。ブログ名とかお勧め

$client->useragent .= ' -- abc/'.$wp_version;

変更後に何かしら記事を投稿。管理画面で「設定」→「smart-update-pinger」にてPing送信状態を確認すると

09/18/13 10:27:07 - http://blog.goo.ne.jp/XMLRPC への ping 送信が成功しました

送信成功!!

にしてもgooはWordpressを意図的に拒否してるのでしょうか(^^;)

WEB標準はXHTMLからHTML5へ

ウェブページは基本、HTMLという言語で表示されます。デザインを補うにはCSS言語。
今の標準はXHTML+CSSですが、これからは・・・HTML5×CSS3。

IE8以下のブラウザはHTML5のタグを認識せずCSS3にも対応していません。だから2、3年前まではHTML5なんてまだまだ…と思ってたんですが!スマホの普及と、Microsoftが発表したwindowsXPのサポート終了※でさらにHTML5が加速するでしょう。(※2014年4 月9 日以降はXPのセキュリティパッチは有料となる)

運営しているサイトのアクセス履歴をみると、既にPCはIE9以上のアクセスが増えてIE8以下は減っています。あとはiphone、ipad仕様でSafari、Android仕様でChromeブラウザが急増。う~ん…IE8以下はもう切り捨てゴメンにしていいでしょうか?だめ?

ちなみにhtml5.jsとselectivizr.jsというJavaScriptファイルで、HTML5×CSS3をIE8以下に対応させることが可能ですが、レスポンシブウェブデザインで作ったサイトをIE8で見ると表示がやや遅れます。

スマホはHTML5×CSS3×jQueryで

さらに、スマホ用サイトにはjQuery(ジェイ・クエリー)が必要不可欠。JavaScriptのひとつで、画像の拡大表示やスライドショー、ドラッグドロップ、アコーディオンタブなどさまざまな動作を可能にします。

ただ、個人的にショックだったのがスライドショー関連。これFlashでお勉強してまで作ったのに、iPhone・iPadのiOSは標準でFlashをサポートしていないことが判明。(アプリで見れる?らしいですが…)
なんで、jQueryプラグインで作り直し…しかもHTMLに文字+画像を入れて動かすjQueryスライドショーは、SEO的にScript記述しかしないFlashより優れているじゃありませんか!
なんなんだよもぅ!

WP Super Cache削除後のエラーと復旧

キャッシュ系プラグインで冷や汗がでるエラーが起きたのでメモッておきます。

問題になったのはwordpressのキャッシュプラグイン「WP Super Cache」。
これ、なにやらよろしくないということで、別のプラグインに切り替えた後、いらないから一覧から削除しよ~って削除しましたら…ん?削除されていない?固まった状態になりブラウザで画面を移動すると…

「wp-config.php」の内容がむき出しに表示されてるではありませんか!

wp-config.phpは、パスワードとか重要な情報が記載されてるのに…なによコレェ。
というかこれがよろしくないことだったんですね…

もうどのページも管理画面へ行ってもwp-configが醸し出されている。
うひゃーッ!となって復旧方法をぐぐってみたら、「データベースをダウンロードしてwordpressを再インストール」とありました。まじですか。。。

続きを読む WP Super Cache削除後のエラーと復旧

コピーライト

WordPressでfooter.phpなどに書くコピーライト(著作権表記)のPHPコピペです

Copyright(c) 2013 <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> All Rights Reserved.

2012-2013(今の年)
のように今の年を自動表記させる場合は以下

Copyright(c) 2012-<?php echo date('Y');?> <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> All Rights Reserved.

レスポンシブウェブを学習してみる

運営しているサイトで最近売上げが落ち気味。
アクセス数は以前とあまり変わらないのに…なぜ?サイトコンテンツ自体に問題があるかもしれないけど、気になるのがスマートホンからのアクセス急増。
PC半分、スマホ半分。とくにiphone端末が多い。

docomoがiphone出すということでさらに需要が増えるでしょう…もう一般ユーザーはPCよりスマホ派が多くなるんでは!?ということで遅いけどスマホ用のサイトコーディングを勉強ことにしました。

で、頭をフル回転してマスターしようとしてるのがレスポンシブウェブデザイン。メモることが多くて、忘れてしまいそうなのでこのブログにじゃんじゃんメモしてこうと思います。

レスポンシブウェブってなんじゃらほい

レスポンシブウェブとは、1つのテンプレートでPCをはじめスマートフォン(iphone 、Android)やipadなどのタブレットなどさまざまなデバイスに対応するウェブデザインの制作手法です。

Multi Device

サイト構造によっては向き不向きがあるようですが・・・

  • これ以上テンプレートを増やしたくない
  • 元々シンプルな構造のサイト

な場合はもうレスポンシブウェブにしてしまったほうがいいと思います。

WordPressなど記事投稿内容はシンプルにする

サイトはほとんどWordpressで構築しているのですが、記事投稿で画像+文字+CSSやTableで複雑にデザインを組んじゃってるページは崩れるはず・・・。まぁでも長い目で見れば今修正しておけば、後々の運営が楽になることでしょう。

  • 記事投稿はとにかくシンプルに
  • PCで見るよりスマホで見たときを意識して投稿する