SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】有名WordPressテーマの要素を調べてみた

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「有名Wordpressテーマの要素を調べてみた」についての解説になります!

こんな方に読んでほしい

  • HTML5を学び始めた方へ
  • HTMLの構造について学びたい方へ
  • 今回はHTML5の要素について記事を書いております

構造について学ぶ前に前回の記事を読んでいただき、
各要素を理解したうえで各テンプレートの構造を学びましょう。

主なHTML5タグ
  • section 
    解説の記事ありますよ
    sectionタグは章や節といったまとまりを示すために使用します。
  • main 
    解説の記事ありますよ
    mainタグとはHTML文書のメインコンテンツを示します。
  • article 
    解説の記事ありますよ
    articleタグとはHTML文書の独立した記事の箇所を示します。
  • header・nav・footer 
    解説の記事ありますよ
    header・nav・footer要素とはセクションの情報を示すタグになります。
  • aside 
    解説の記事ありますよ
    asideタグとは余談・補足の情報を示します。

WordPressテーマの要素を検証について

一般的なHTML構造

上の図のように、HTML5からレイアウトと表す、header、main、aside、footerタグが使用できる
ようになりました。
有名なWordpressテンプレートはどよのうな構造になっているのか、調べてみました。

01.THE THOR

THE THOR

THE THOR構造について
最近は、多くのブロガーさんも愛用しているTHE THOR。
テンプレートの数も多く、1つ1つのクオリティーがとても高いです。

POINT
  • header、main、article、aside、footer5つの要素をしっかり使っておりました。
  • 記事一つ一つをarticle要素で囲んでいました。
  • サイトの管理者やカテゴリー、タグなどaside要素で囲んでいました。

02.AFFINGER

AFFINGER

AFFINGER構造について
AFFINGERも多くのブロガーさんに愛用されておりますよね。
基本、シンプルな構成になっており、とても見やすい印象。

AFFINGER構造について
POINT
  • header、main、article、aside、footer5つの要素をしっかり使っておりました。
  • 記事一覧をarticle要素で囲み、その要素の中に記事がありました。
  • aside要素で囲み、その中にサイトの管理者やカテゴリー、オススメ記事がありました。

03.WP Avenue

WP Avenue

WP Avenue構造について
ファーストビューがとてもかっこいい印象。
また吹き出し、マーカーなどブログとしても必要な機能が多い印象。

WP Avenue構造について
POINT
  • header、main、article、footer4つの要素を使っておりました。
  • 記事一つ一つをarticle要素で囲んでいました。
  • aside要素を使用せず、「.sidebar」を使用しておりました。

04.OPENCAGE

OPENCAGE

OPENCAGE構造について
4つのテンプレートがあり、1つ1つのクオリティーもとても高いです。
最新のWordpressのブロックエディタへの対応もしています。

OPENCAGE構造について
POINT
  • header、main、article、footer4つの要素を使っておりました。
  • 記事一つ一つをarticle要素で囲んでいました。
  • aside要素を使用せず、「#sidebar1」を使用しておりました。

05.JIN

jin

JIN構造について
女性向けのテンプレートもあり可愛い印象。
カスタマイズも多数ありオリジナル性の強い印象。

JIN構造について
POINT
  • main、article、footer3つの要素を使っておりました。
  • header要素を使用せず、「#header-box」を使用しておりました。
  • 記事一つ一つをarticle要素で囲んでいました。
  • aside要素を使用せず、「#sidebar」を使用しておりました。

まとめ

今回は以上です。

5つのWordpressテーマの要素を調べてみましたが、簡単にPOINTをまとめてみました。

POINT
  • 全てにおいてHTML5の要素を導入しておりました。
  • article要素は記事を一つ一つに使用または、記事一覧に使用しておりました。
  • aside要素は使用せず、id名やクラス名を使用してるサイトもありました。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top