s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

はてなブログのオリジナルテーマ作成には必要のないマークアップを把握する【はてなブログのHTML構造その1】

はてなブログでオリジナルテーマを作るだけならば不要の知識

はてなブログはその仕様上、HTMLが弄れないことは別の記事で説明しました。つまり自分でHTMLを書いてサイトを一から作るという場合でも無い限り、<body>とに囲まれた中身以外に使用するタグは予備知識程度という認識でしかありません。しかしながらはてなブログの全容を把握しておくことはオリジナルテーマ作成のみならず、HTMLについてもっと深い部分で理解することができます。

手っ取り早い勉強法はソースを見てひとつひとつの意味を調べること

はてなブログのソースコードを見てみましょう。はてなブログはWebページとして完成されていますので1から10までの材料が一通り揃っています。ある程度の知識がなければつまづいてばかりで進むことは出来ません。順序よく学ぶことが大切です。

テーマ作成で意識するのは<body></body>内だけ

前回の記事で以下のようなHTML5の基本的なマークアップを書きました。

<!DOCTYPE html>
<html>
<head> ←今回はここまで
<meta charset="utf-8">
<title>ページ・タイトル</title>
<style>/* CSS */</style>
<script>/* JavaScriptコード */</script>
</head>
<body>
...
</body>
</html>

もちろんはてなブログでもこの構造は変わりません。ここから最終的にHTMLページとして仕上げる為には様々な「設定」を施します。もう一度書きますが、オリジナルテーマ作成には全くもって必要ありません。ただ「ブログの設定」で関係してくる部分も出てきます。

<!DOCTYPE html><html>

<!DOCTYPE html>について文書型宣言は変わりませんが<html>はごちゃごちゃと細工をしています。

<html
  lang="ja"

data-admin-domain="//blog.hatena.ne.jp"
data-author="s13y"
data-avail-langs="ja en"
data-blog="s13y-theme.hatenablog.com"
data-blog-host="s13y-theme.hatenablog.com"
data-blog-is-public=""
data-blog-name="s13y"
data-blog-owner="s13y"
data-blog-uri="https://s13y-theme.hatenablog.com/"
data-blog-uuid="10257846132710252623"
data-blogs-uri-base="https://s13y-theme.hatenablog.com"
data-brand="pro"
data-data-layer="{&quot;hatenablog&quot;:{&quot;permalink_entry&quot;:{&quot;title&quot;:&quot;\u30bf\u30a4\u30c8\u30eb&quot;,&quot;date&quot;:&quot;2019-01-27&quot;,&quot;author_name&quot;:&quot;s13y&quot;,&quot;categories&quot;:&quot;&quot;,&quot;uri&quot;:&quot;https://s13y-theme.hatenablog.com/entry/2019/01/23/223855&quot;,&quot;hour&quot;:&quot;11&quot;},&quot;brand_tracking_category&quot;:&quot;pro&quot;,&quot;brand&quot;:&quot;pro&quot;,&quot;pro&quot;:&quot;pro&quot;,&quot;router_type&quot;:&quot;blogs&quot;,&quot;blog&quot;:{&quot;lang&quot;:&quot;ja&quot;,&quot;enable_ads&quot;:&quot;true&quot;,&quot;is_public&quot;:&quot;false&quot;,&quot;is_sleeping&quot;:&quot;false&quot;,&quot;owner_name&quot;:&quot;s13y&quot;,&quot;disable_ads&quot;:&quot;&quot;,&quot;enable_keyword_link&quot;:&quot;true&quot;,&quot;uri&quot;:&quot;https://s13y-theme.hatenablog.com/&quot;,&quot;name&quot;:&quot;s13y&quot;,&quot;is_responsive_view&quot;:&quot;true&quot;,&quot;content_seems_japanese&quot;:&quot;true&quot;,&quot;force_pc_view&quot;:&quot;true&quot;,&quot;entry_show_footer_related_entries&quot;:&quot;true&quot;},&quot;page_id&quot;:&quot;entry&quot;,&quot;admin&quot;:{},&quot;analytics&quot;:{&quot;property_id&quot;:&quot;UA-123456789-1&quot;,&quot;brand_property_id&quot;:&quot;&quot;,&quot;non_sampling_property_id&quot;:&quot;&quot;,&quot;separated_property_id&quot;:&quot;UA-29716941-19&quot;}}}"
data-device="pc"
data-dont-recommend-pro="false"
data-global-domain="https://hatenablog.com"
data-globalheader-color="b"
data-globalheader-type="pc"
data-has-touch-view="1"
data-no-suggest-touch-view="1"
data-page="entry"
data-parts-domain="https://hatenablog-parts.com"
data-plus-available="1"
data-pro="true"
data-router-type="blogs"
data-sentry-dsn="https://03a33e4781a24cf2885099fed222b56d@sentry.io/1195218"
data-sentry-sample-rate="0.1"
data-static-domain="https://cdn.blog.st-hatena.com"
data-version="8560d2030913263622d60dacb4e42a3a"

itemscope
itemtype="http://schema.org/Article"

data-initial-state="{}"

>

本来であればで事足ります。こちらははてなブログ独自のものが大半ですので解説はありません。気になったことといえばlang=jaなど昔に見かけた値があります。htmlが「何語で書かれているのか」を示すために存在していますが、Googleでは「使うな」と公式で発言しています。data-から始まるものが「独自データ属性」になります。data-admin-domain=""などこの記述を見かけたらそのブログは「はてなブログで作られている」ということがわかるのです。なんとなく意味はわかりますが、実際にどういうことをしているのかまではわかりませんね。

「data-data-layer=」にある「UA-123456789-1」という文字列はアナリティクスのものです。ダッシュボードの左メニューから「設定」ページ入り「詳細設定」タブから「解析ツール」の「Google Analytics 埋め込み」を設定すると挿入され、Google Analyticsが有効になります。もう1つある「UA-29716941-19」ははてなブログ側のコードでしょうか。

ヘッダ

<head>にはOGPを設定する記述が書かれています。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

「Open Graph Protcol」の略でSNSでシェアした際に設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素になります。SNSとはFacebookやTwitterなどです。

prefix属性

html5では「RDFa Core 1.1」および「RDFa Lite 1.1」が使用できます。RDFaのガイドラインによるとprefixとは「語彙」を指示しますので「これからOGPを使います」と宣言しています。この記述によってmetaに「property属性」でOGPの設定を記述することができるのです。実際にこの「属性」は「メタタグ」で出てきます。

次の記事はこちら

www.s13y.com