Quick Cacheでスマホも別でキャッシュできる!?

WPのキャッシュプラグインはQuick Cacheを使っていますが、スマホやガラケー用にテーマ別で切り替え表示しているサイトは、キャッシュしないよう「No-Cache User-Agent Patterns」で指定しなければいけません。

この指定をしないと、PCでキャッシュされたデータが携帯でアクセスした際にも反映されてしまいテーマを切り替えてる意味がない(泣!という残念な結果になります。

でも、どうにかしてPCとは別にキャッシュできないのだろうかなぁ…と、ググってみたらスマホなどモバイル別でもキャッシュできる方法があるよう☆
なので試してみました。

続きを読む Quick Cacheでスマホも別でキャッシュできる!?

WordPress3.7にバージョンアップしてみた

WordPress 3.7 「カウント ベイシー」がリリースされていたので早速バージョンアップ。なんの問題もなく更新終了、ダッシュボードにはこのような文面が。

wp3-7

確かに管理画面の見た目は以前と変わらないので、何の変化も感じません。私もそれでかまわないと思います(笑。

で、3.7は何が変わったかというと、一番の目玉はバックグラウンド更新とセキュリティ強化でしょうか。

続きを読む WordPress3.7にバージョンアップしてみた

画像下にテキストを周り込ませないCSS

画像にCSSでfloatで指定した場合、文字が画像の下まで回りこんでいきます。。。marginやpadding指定でやり過ごしてましたが、ブラウザによるレイアウト崩れが気になっていました。

通常の場合↓

海「海の少年」  著 者:小川未明

今年の夏休みに、正雄さんは、母さんや姉さんに連れられて、江の島の別荘へ避暑にまいりました。正雄さんは海が珍しいので、毎日朝から晩まで、海辺へ出ては、美しい貝がらや、小石などを拾い集めて、それをたもとに入れて、重くなったのをかかえて家へ帰ると、姉や妹に見せて、だんだんたくさんにたまるのを見て、東京へのおみやげにしようと喜んでいました。←この部分が気なる

続きを読む 画像下にテキストを周り込ませないCSS

投稿フォーマットの活用

WordPressバージョン3.1から導入された投稿フォーマット。
よく分からなかったのでスルーしていましたが…single.phpでちょっとした表示切替に役立つじゃん!ということで活用することにしました。

投稿画面
投稿画面内

投稿フォーマットの種類

  • aside/アサイド
  • audio/音声
  • chat/チャット
  • gallery/ギャラリー
  • image/画像
  • link/リンク
  • quote/引用
  • status/ステータス
  • video/動画

テーマを投稿フォーマットに対応させる

テーマが投稿フォーマットに対応していない場合は、function.phpに以下を記入します。

/*投稿フォーマット*/
add_theme_support( 'post-formats', array( 'aside', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio' ) );

投稿フォーマットの各テンプレート(content-フォーマット名.php)と、標準フォーマット用のcontent.phpをテーマ内にアップロード。

さらに、投稿記事や固定ページなどのテンプレート内のthe_content()部分を、投稿フォーマットを読み込ませるタグに書き換えます。

single.phpまたはpage.phpに投稿フォーマットを読み込ませる

通常の投稿表示のタグ部分↓

<?php the_content(); ?>

上記をget_template_partで、投稿フォーマットのテンプレートパーツを読み込む タグに変更↓

<?php get_template_part( 'content', get_post_format() ); ?>

続きを読む 投稿フォーマットの活用

header要素

ページやページ内文章のヘッダー(見出し情報)を示す要素です。
例えばタイトル、概要、日付などを<header>で囲います。

<body>
<header><!--サイトの見出し情報 -->
<h1>日本の詩</h1>
<nav>メニューナビゲーション</nav>
</header>
 <article>
  <header><!-- 文書の見出し情報 -->
  <h1>くらかけの雪</h1>
  <p>宮沢賢治『春と修羅』より</p>
  </header>
  <p>たよりになるのは
  くらかけつづきの雪ばかり
 野はらもはやしも
 ぽしやぽしやしたりくすんだりして
 すこしもあてにならないので
 ほんたうにそんな酵母かうぼのふうの
 おぼろなふぶきですけれども
 ほのかなのぞみを送るのは
 くらかけ山の雪ばかり
   (ひとつの古風こふうな信仰です)
 </p>
 </article>
<aside>サイドバー</aside>
<footer>フッター</footer>
</body>

上記のように、サイト全体のヘッダー情報や、各文書内の見出し情報である部分はheader要素として囲うことができるため、一つのページに複数回使用可能。
<header>の中に<header>を入れたりしてはいけません。

ちなみにmetaタグやCSSなどを記述する<head>とは別物。

h1~h6の見出しが必ずしも必要ではない

html5を学習し始めの頃は、<header>は「ヘッダー」なんだから、必ず見出しタグが必要なんだ!と思い込んでいたけど…必ず必要というわけでもないとのこと(笑)

<article>
<header><!--▼見出しを入れなくてもいい -->
<p><time datetime="2013-09-15">2013.09.15</time></p>
<p>新着情報のお知らせ</p>
</header>
<p>サイトをリニューアルしました。</p>
</article>

<header>の中には、通常は<h1>–<h6>や <hgroup>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。

<header>-HTML5タグリファレンス

でも、個人的には見出しを入れたほうが様になる?気がして、見出しを入れてコーディングするようにしてますが・・。

なんとな~く分かってきた?html5

今までのhtmlでは、一つのページ内に大見出しタグ<h1>は「一つ」という決まりがありました。一つのページ内にh1タグを複数使用することは、文書構造的にアウト。下手したら検索エンジンロボットにスパム扱いされてしまい、seo的には最悪な結果になってしまいます。

ところが、html5は基本、一つのページにh1を幾つ使ってもOKという構造になっているんです。「h1タグは一つだけっ!」という感じで今までやってきてた私は、1ページにh1が乱発しているとなんだか気持ちが悪い(笑

ですが、html5を理解しはじめると、<h1>が以前ほど重要ではなくなり、ページの内容とその構成がより重要視されているんだ…と思い知らされます。

続きを読む なんとな~く分かってきた?html5

article要素

<article>は「単体で完結できるセクション」を示す際に使用する要素です。

articleで囲う箇所について

  • そのページから切り取っても単独で成り立つ文章(箇所)であること
  • そのページの主要な内容であること

一つのページに複数使用可能

ページに単体でなりたつ文章が複数ある場合は<article>で区切ってもOK。

ニュース情報などの場合–追記更新

作成中

TOPページなどの場合–追記更新

作成中

入れ子にしてもよい

<article>を入れ子にして使用する場合は、必ず外側の<article>の内容に対し、内側の<article>の内容は関連しているものでなければならない。

<article>
<header>
<h1>『屈折率』</h1>
<p>宮沢賢治「春と修羅」より</p>
</header>
<p>七つ森のこつちのひとつが
 水の中よりもつと明るく
 そしてたいへん巨きいのに
 わたくしはでこぼこ凍つたみちをふみ
 このでこぼこの雪をふみ
 向ふの縮れた亜鉛あえんの雲へ
 陰気な郵便脚夫きやくふのやうに
   (またアラツデイン 洋燈ラムプとり)
 急がなければならないのか</p>
<section>
  <header>
  <h2>コメント</h2>
  <p>2件のコメントが投稿されました</p>
  </header>
  <article>
  <header>  <p>Hさんのコメント</p>
  <p><time datetime="2013-03-02">2013-03-02</time></p>
  </header>
  <p>七つ森のひとつが明るい(屈折でより大きく見える)に対し、でこぼこ雪、縮れた亜鉛の雲、陰気な郵便脚夫のように険しく孤独な道を行く…賢治の修行僧のような人生を暗示しているような詩だ。</p>
  </article>
  <article>
  <header>
  <p>Kさんのコメント</p>
  <p><time datetime="2013-01-15">2013-01-15</time></p>
  </header>
  <p>光の現象による屈折と、心情の現象による屈折。光と影、明から暗へ…といった二つの対象とカタチを実に美しく表現していると思います。</p>
  </article>
</section>
</article>

<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。

<article>-HTML5タグリファレンス

section要素

<section>は、ページ内のその部分が一つの文章の章や節(セクション)であることを示すタグ。見出しを含む文章の区切りなどに使用します。

section要素内には見出しタグが必要

前述にあるように<section>で囲われた箇所は、章や節であることを意味づけるので<section>要素内には必ず、h1~h6の見出しタグが必要不可欠です。

どの見出しタグから記述しても大丈夫なようですが、ページ全体の文章構成の流れがおかしくならないよう注意。

<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。

セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。

<section>-HTML5タグリファレンス

sectionが必要?不必要?と迷ったら…

なんとなく理解できたと思って、コーディングし始めると、ここは<section>で囲うか囲わないべきか?と戸惑うことがあります。

そんなときは見出しが必要か必要でないかで判断するといいそうです。
「見出しが必要ないor無理に付ける内容でもない」=「章や節として区切る必要はない」と判断できるから、<section>で囲う必要もないってわけですね。

section使用の注意点

  • レイアウト目的で使用しない。レイアウト目的なら<div>を使用。
  • 見出しを付けれない、また付ける必要ながない部分を<section>で囲まない。

article、nav、aside、header、footerなどもセクションのひとつ

より具体的な意味がある内容は、各セクションタグにあわせコーディングすることが重要です。
例えば、コンテンツの主要内容であれば<article>、ナビゲーションであるなら<nav>、コンテンツ本文と関係あるがややそれる内容であるなら<aside>を使用する…など。

HTML5でサイトをコーディングする際は、各セクション要素の意味を理解しておくことが必要不可欠ですね。