AMP対応のHexoテーマを自作する：（１）制作手順とブログの構成

記事更新日 

記事公開日 

タグ：,

  1. Home
  2.  > TECHBLOG
  3.  > CMS
  4.  > Hexo

以前WordPress用のテーマを作るぞって張り切って記事を書いたんですが、結局2, 3記事書いてほったらかしになりました。でも今回サーバを変えたのを機にブログも一新しようと思い、Hexoのテーマを自作してみることにしてみました。テーマ名はYamashinaでいきます。うちのブログはPCからのアクセスがほとんですが、せっかくテーマにするんだから、2016年からGoogleが本腰をあげるAMPにも対応したものにしていきます。もちろん最低限のSEO対策（自分の知識の範囲内で）もします。

制作手順

Hexoのテーマを作るといっても、いきなりEJSでHTML書いてStylusでCSS書いて…なんてことはしません。これはWordPressでオリジナルのテンプレートを作る場合も同じです。大まかな流れはこんな感じです：

  1. デザインの異なるページの数だけHTMLのマークアップ
  2. Googleリッチスニペット対策
  3. CSSを当てる
  4. HTMLからEJSに変更
  5. パーツに分けてテーマ化する
  6. 5で分けたパーツに応じてCSSも分割してStylusへ
  7. テーマで個別設定可能な部分（例えばAnalyticsのトラッキングコードとかそういうの）を変数化

それぞれについてはおいおい書いていく記事で説明すると思います（多分）。

ブログの構成

一般的なブログは以下のような構成をもっています：

  • トップページ
    ブログの入り口。よくあるパターンだと上部にヘッダー、左右（どちらか）にナビゲーション（カテゴリ一覧やアーカイブへのリンク）があって、真ん中に記事のリストが並ぶ。

  • 投稿ページ
    投稿された記事そのものを表示するページ。

  • アーカイブページ
    投稿日時別に投稿記事のリストを表示するページ。

  • カテゴリーページ
    記事の属するカテゴリー別に投稿記事のリストを表示するページ。

  • タグページ
    記事につけられたタグ別に投稿記事のリストを表示するページ。

  • 固定ページ
    投稿記事とは別のページ。例えばexample.com/blog/about/とかの自己紹介ページなんかがそれ。

HexoにしろWordPressにしろ、これらすべてに個別のデザインを当てているテーマ（WordPressだとテンプレート）というのは少ないんじゃないかと思います。だいたいのテーマやテンプレートでは

  • トップページ
  • アーカイブページ
  • カテゴリーページ
  • タグページ

にはすべて同じデザインを使用して、リスト表示される記事のフィルタリングだけが異なっています（例えばアーカイブならURIで指定された年月に投稿された記事とか）。また

  • 投稿ページ
  • 固定ページ

では、トップ・アーカイブ・カテゴリー・タグページで記事リストが並んでいた部分を、投稿記事や固定ページの内容に置き換えたものになっているはずです。ということは、テーマを自作するときに用意しないといけないデザインは

  • 全ページで共通するヘッダー・フッターやサイドバー
  • トップ・アーカイブ・カテゴリー・タグページでの記事のリスト
  • 投稿・固定ページでの内容部分

だけということになります。

このような典型的なパターンだと、制作手順1で書いた『デザインの異なるページの数だけHTMLでマークアップ』で必要なページは2ページということになります。しかもほとんどは共通してるので、テーマを自作すると言っても実際のコーディング量はそれほど大したことありません。

次回はHTMLのマークアップ

きっと書くはず…

関連記事