今回は「有名Wordpressテーマの要素を調べてみた」についての解説になります！
こんな方に読んでほしい
- HTML5を学び始めた方へ
-
HTMLの構造について学びたい方へ - 今回はHTML5の要素について記事を書いております
構造について学ぶ前に前回の記事を読んでいただき、
各要素を理解したうえで各テンプレートの構造を学びましょう。
- 主なHTML5タグ
- section
解説の記事ありますよsectionタグは章や節といったまとまりを示すために使用します。
- main
解説の記事ありますよmainタグとはHTML文書のメインコンテンツを示します。
- article
解説の記事ありますよarticleタグとはHTML文書の独立した記事の箇所を示します。
- header・nav・footer
解説の記事ありますよheader・nav・footer要素とはセクションの情報を示すタグになります。
- aside
解説の記事ありますよasideタグとは余談・補足の情報を示します。
WordPressテーマの要素を検証について
上の図のように、HTML5からレイアウトと表す、header、main、aside、footerタグが使用できる
ようになりました。
有名なWordpressテンプレートはどよのうな構造になっているのか、調べてみました。
01.THE THOR
THE THOR構造について
最近は、多くのブロガーさんも愛用しているTHE THOR。
テンプレートの数も多く、1つ1つのクオリティーがとても高いです。
- POINT
- header、main、article、aside、footer5つの要素をしっかり使っておりました。
- 記事一つ一つをarticle要素で囲んでいました。
- サイトの管理者やカテゴリー、タグなどaside要素で囲んでいました。
02.AFFINGER
AFFINGER構造について
AFFINGERも多くのブロガーさんに愛用されておりますよね。
基本、シンプルな構成になっており、とても見やすい印象。
- POINT
- header、main、article、aside、footer5つの要素をしっかり使っておりました。
- 記事一覧をarticle要素で囲み、その要素の中に記事がありました。
- aside要素で囲み、その中にサイトの管理者やカテゴリー、オススメ記事がありました。
03.WP Avenue
WP Avenue構造について
ファーストビューがとてもかっこいい印象。
また吹き出し、マーカーなどブログとしても必要な機能が多い印象。
- POINT
- header、main、article、footer4つの要素を使っておりました。
- 記事一つ一つをarticle要素で囲んでいました。
- aside要素を使用せず、「.sidebar」を使用しておりました。
04.OPENCAGE
OPENCAGE構造について
4つのテンプレートがあり、1つ1つのクオリティーもとても高いです。
最新のWordpressのブロックエディタへの対応もしています。
- POINT
- header、main、article、footer4つの要素を使っておりました。
- 記事一つ一つをarticle要素で囲んでいました。
- aside要素を使用せず、「#sidebar1」を使用しておりました。
05.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に関する様々な情報を発信しています。
最新記事
関連記事
