HTML5のアウトライン構造だけでなくセクションもチェックできるChrome拡張&Firefoxアドオン

HTML5のアウトラインをチェックするツールとしてHTML 5 Outlinerとか、同名のChrome拡張などは有名です。

ただ、先日から利用しているHeadingsMapは、Chrome拡張でもFirefoxアドオンでも利用でき、より詳細なアウトライン解析ができて便利なので紹介です。

スポンサーリンク
レクタングル(大)広告

HeadingsMapとは

HeadingsMap

HeadingsMapは、HTMLドキュメントの「HTML5アウトライン」や「見出し構造」のナビゲートマップを表示してくれるブラウザ拡張です。

HeadingsMapは、Chrome拡張版と、Firefoxアドオン版があります。

これまでよく利用されていたHTML5 Outliner(Chrome拡張)等のツールは、アウトライン構造のみが表示されていましたが、HeadingsMapは、アウトライン構造に加えてセクション情報も表示してくれます。

例えば、HTML5 Outlinerで、表示させた場合は、単にアウトライン構造だけが表示されていました。

HTML5 Outlinerで寝ログを表示

一方、HeadingsMapで表示すると、見出しで使われているタグまで見ることができ、構造をより詳細に表示することができます。

HeadingsMapで寝ログを表示

また、section、nav、article、asideのようなセクション要素が利用されているときは、以下のようなセクション構造とともに表示してくれます。

HeadingsMapでSimplicityのセクション構造の表示

また、Headingsタブを表示すると、見出しタグ(h1-h6)のみの構造も見ることができます。

HeadingsMapで寝ログのHeadingsを表示

ChromeでもFirefoxでも利用可能

HeadingsMapは、ChromeでもFirefoxでも利用することができます。

以下で、それぞれについて簡単に使い方を紹介します。

例として利用しているサイトは、「SEOで有名」で検索して出てきた記事によく紹介されていたインターネット広告代理店 オプトです。

Chrome拡張「HeadingsMap」

HeadingsMap(Chrome拡張)は、インストールするとツールバーにHeadingsMap(Chrome拡張)のツールボタンボタンが表示されるので、クリックすると、画面右側にポップアップ形式で表示されます。

HeadingsMapChrome版

Firefoxアドオン「HeadingsMap」

HeadingsMap(Firefoxアドオン)は、インストール後、オプションボタンから「カスタマイズ」をクリックしてください。

オプションボタンからカスタマイズをクリック

カスタマイズ画面で出てくる、HeadingsMapアイコンをドラッグ&ドロップでツールバーに移動させます。

HeadingsMapをFirefoxのツールバーに移動

ツールバーに移動すると、こんな感じで表示されます。

HeadingsMapをツールバーに移動した後

あとは、アウトライン構造を見たいページ上でFirefoxのHeadingsMapツールボタンツールボタンを押せば、サイドバーに分析結果が表示されます。

2016-02-22_12h13_13

まとめ

HeadingsMapを利用すると、従来のツールにはなかったアウトラインに関する情報を、ちょっと詳しく表示させることができます。

これからサイトを作るとか、Wordpressテーマを作成する場合などは、色々なサイトをHeadingsMapで眺めて、参考にしながら作成するといろいろと捗るかもしれません。

Chrome拡張 HeadingsMap

Firefoxアドオン HeadingsMap