s13y

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

はてなブログ全体のHTML構造を俯瞰してみる【はてなブログ・HTML構造その3】

はてなブログの全容

HTMLのソースコードは大きく変化することも無いと思います。把握しているだけでもはてなブログのカスタマイズのし易さが違ってきますので全体を見てみましょう。全体が見えれば「こんなものか」と達観することが出来ます。見えない敵に挑み続けるのは精神的に辛いですからね。何事もわかってしまえば大したことはないのです。

<body></body>内がオリジナルテーマを作成する上で重要

となります。前回までの情報はこの際、吹き飛ばしても構いません。全体のソースコードを俯瞰しましょう。

はてなブログのフルカスタマイズを前提に

雑かも知れませんが私なりに見やすいようにソースコードを整理しています。ありったけのオプションを詰め込んだ上でソースコードを抽出しています。公開用であればユーザーがどのオプションを設定しても対応できるようにテーマを作り込む必要があります。自分だけの使用であれば不要なソースコードが多く書かれています。使う部分だけに絞るだけでも随分とわかりやすくなります。

はてなブログのソースコード(トップページ&記事ページ)

<!DOCTYPE html>
<html
lang="ja"

data-admin-domain="//blog.hatena.ne.jp"
data-author="s13y"
data-avail-langs="ja en"
data-blog="www.s13y.com"
data-blog-host="www.s13y.com"
data-blog-is-public=""
data-blog-name="s13y"
data-blog-owner="s13y"
data-blog-uri="https://www.s13y.com/"
data-blog-uuid="10257846132710252623"
data-blogs-uri-base="https://www.s13y.com"
data-brand="pro"
data-data-layer="{&quot;hatenablog&quot;:{&quot;blog&quot;:{&quot;is_public&quot;:&quot;false&quot;,&quot;is_sleeping&quot;:&quot;false&quot;,&quot;name&quot;:&quot;s13y&quot;,&quot;uri&quot;:&quot;https://www.s13y.com/&quot;,&quot;force_pc_view&quot;:&quot;true&quot;,&quot;owner_name&quot;:&quot;s13y&quot;,&quot;disable_ads&quot;:&quot;&quot;,&quot;enable_keyword_link&quot;:&quot;true&quot;,&quot;lang&quot;:&quot;ja&quot;,&quot;is_responsive_view&quot;:&quot;true&quot;,&quot;content_seems_japanese&quot;:&quot;true&quot;,&quot;entry_show_footer_related_entries&quot;:&quot;true&quot;,&quot;enable_ads&quot;:&quot;true&quot;},&quot;brand_tracking_category&quot;:&quot;pro&quot;,&quot;router_type&quot;:&quot;blogs&quot;,&quot;page_id&quot;:&quot;index&quot;,&quot;admin&quot;:{},&quot;pro&quot;:&quot;pro&quot;,&quot;analytics&quot;:{&quot;non_sampling_property_id&quot;:&quot;&quot;,&quot;separated_property_id&quot;:&quot;UA-29716941-19&quot;,&quot;property_id&quot;:&quot;UA-441387-54&quot;,&quot;brand_property_id&quot;:&quot;&quot;},&quot;brand&quot;:&quot;pro&quot;,&quot;permalink_entry&quot;:null}}"
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="index"
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/Blog"

data-initial-state="{}"

>

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex,nofollow" />
<meta name="robots" content="noindex,nofollow,noarchive" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9; IE=10; IE=11" />
<title>s13y</title>
<link rel="canonical" href="https://www.s13y.com/" />
<meta itemprop="name" content="s13y" />
<meta itemprop="image" content="https://cdn.user.blog.st-hatena.com/default_entry_og_image/153650345/1548560614186801" />
<meta property="og:title" content="s13y" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://www.s13y.com/" />
<meta property="og:image" content="https://cdn.image.st-hatena.com/image/scale/30ad407e942740fb8d9bc0e336bc4c1b4730cd54/backend=imager;enlarge=0;height=1000;version=1;width=1200/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fdefault_entry_og_image%2F153650345%2F1548560614186801" />
<meta property="og:description" content="カスタマイズ専用サイト" />
<meta property="og:site_name" content="s13y" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://cdn.user.blog.st-hatena.com/default_entry_og_image/153650345/1548560614186801" />
<meta name="twitter:title" content="s13y" />
<meta name="twitter:description" content="カスタマイズ専用サイト" />
<meta name="twitter:app:name:iphone" content="はてなブログアプリ" />
<meta name="twitter:app:id:iphone" content="583299321" />
<meta name="twitter:app:url:iphone" content="hatenablog:///open?uri=https%3A%2F%2Fwww.s13y.com%2F%3F_ga%3D2.34894561.1194618806.1547389105-23975108.1547389105" />
<meta name="twitter:site" content="@s13y_blog" />
<meta name="description" content="ブログの概要" />
<meta name="google-site-verification" content="Google Search Console" />
<meta name="keywords" content="ブログのキーワード" />
<meta name="msvalidate.01" content="Bing ウェブマスターツール" />
<script id="embed-gtm-data-layer-loader" data-data-layer-page-specific="">
        (function() {
  function loadDataLayer(elem, attrName) {
    if (!elem) { return {}; }
    var json = elem.getAttribute(attrName);
    if (!json) { return {}; }
    return JSON.parse(json);
  }

  var globalVariables = loadDataLayer(
    document.documentElement,
    'data-data-layer'
  );
  var pageSpecificVariables = loadDataLayer(
    document.getElementById('embed-gtm-data-layer-loader'),
    'data-data-layer-page-specific'
  );

  var variables = [globalVariables, pageSpecificVariables];

  if (!window.dataLayer) {
    window.dataLayer = [];
  }

  for (var i = 0; i < variables.length; i++) {
    window.dataLayer.push(variables[i]);
  }
})();
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P4CXTW');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<link rel="shortcut icon" href="https://cdn.blog.st-hatena.com/images/favicon.ico">
<link rel="icon" sizes="192x192" href="https://cdn.blog.st-hatena.com/images/common/meta-icon-global.png">
<link rel="alternate" type="application/atom+xml" title="Atom" href="https://www.s13y.com/feed" />
<link rel="alternate" type="application/rss+xml" title="RSS2.0" href="https://www.s13y.com/rss" />
<link rel="author" href="http://www.hatena.ne.jp/s13y/">
<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=b02160ebf86c4c094103398518e0aec253e42113&amp;env=production" />
<link rel="stylesheet" type="text/css" href="//blog.hatena.ne.jp/-/blog_style/10257846132710252623/50475a494d96907f0a39324abc02304f444b073d" />
<link rel="stylesheet" type="text/css" href="style.css" /><!-- Local CSS -->

<!-- 空のスクリプトタグ -->
<script> </script>

<style>
        div#google_afc_user,
  div.google-afc-user-container,
  div.google_afc_image,
  div.google_afc_blocklink {
      display: block !important;
  }
</style>
<script src="https://cdn.pool.st-hatena.com/valve/valve.js" async></script>
<script id="test-valve-definition">
        var valve = window.valve || [];
  valve.push(function(v) {
    v.config({ service: 'blog' });
    v.defineFluidSlot({"googleAdSlot":"9703508184","insId":"ins-ad-entries-archive-style-top","yadsAdDs":"66031_242885"});
    v.sealDFPSlots();
  });
</script>
<meta name="author" content="s13y" />
</head>

<!-- index.html -->
<body class="page-index header-image-enable enable-top-editarea enable-bottom-editarea page-archive">

<div id="header-container">
<div id="sp-suggest" style="display: none;"><a id="sp-suggest-link" href="#">スマートフォン用の表示で見る</a></div>
</div><!-- End header-container -->

<div id="globalheader-container" data-brand="hatenablog">
<iframe id="globalheader" height="37" frameborder="0" allowTransparency="true"></iframe>
</div><!-- End globalheader-container -->

<div id="container">
<div id="container-inner">

<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" style="background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/s/s13y/20190122/20190122210633.png'); background-position: center 0px;">
<div id="blog-title-content">
<h1 id="title"><a href="https://www.s13y.com/">s13y</a></h1>
<h2 id="blog-description">カスタマイズ専用サイト</h2>
</div>
</div>
</header><!-- End blog-title -->

<div id="top-editarea"><p>タイトル下追加HTML</p></div>

<div id="content" class="hfeed">
<div id="content-inner">

<div id="wrapper">
<div id="main">
<div id="main-inner">

<!-- google_ad_section_start -->
<!-- rakuten_ad_target_begin -->

<div class="ad ad-online-afc" style="display: block !important;">
<ins class="adsbygoogle" id="ins-ad-entries-archive-style-top" style="display:block!important;min-height:100px;"></ins>
</div>

<!-- #archive-entries -->
<div class="archive-entries">

<section class="archive-entry autopagerize_page_element" data-uuid="12345678901234567890">
<!-- #archive-entry-header(記事ヘッダー) -->
<div class="archive-entry-header">
<!-- #archive-date(日付) -->
<div class="date archive-date">
<a href="https://www.s13y.com/" rel="nofollow">
<time datetime="20XX-XX-XX" title="20XX-XX-XX">
<span class="date-year">20XX</span><span class="hyphen">-</span><span class="date-month">XX</span><span class="hyphen">-</span><span class="date-day">XX</span>
</time></a>
</div>
<h1 class="entry-title"><a class="entry-title-link" href="https://www.s13y.com/">サンプルエントリー</a></h1>
</div>

<!-- #カテゴリを登録するとこのタグが挿入される 
<div class="categories"><a href="https://www.s13y.com/" class="archive-category-link category-カテゴリ">カテゴリ</a></div>
-->

<!-- #entry-thumb(サムネイル) -->
<a href="https://www.s13y.com/entry/sample-entry" class="entry-thumb-link">
<div class="entry-thumb" style="background-image: url('https://cdn.image.st-hatena.com/image/square/8b8c27bedbb63962ae6972d630b20c07b7f3c9cd/backend=imagemagick;height=500;quality=80;version=1;width=500/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhatenablog%2F20101106%2F20101106100658.jpg');">
</div>
</a>
<!-- #archive-entry-body(記事本文) -->
<div class="archive-entry-body">
<p class="entry-description">本文</p>

<span class="social-buttons">
<a href="http://b.hatena.ne.jp/entry/https://www.s13y.com/entry/sample-entry" class="bookmark-widget-counter">
<img src="https://b.hatena.ne.jp/entry/image/https://www.s13y.com/entry/sample-entry" alt="はてなブックマーク - サンプルエントリー" /></a>

<span class="star-container"></span>
<div class="hatena-star-metadata" style="display: none"><a class="hatena-star-permalink" href="https://www.s13y.com/entry/sample-entry">サンプルエントリー</a></div>
</span>

</section>

<section class="archive-entry autopagerize_page_element" data-uuid="12345678901234567890">
<!-- #archive-entry-header(記事ヘッダー) -->
<div class="archive-entry-header">
<!-- #archive-date(日付) -->
<div class="date archive-date">
<a href="https://www.s13y.com/" rel="nofollow">
<time datetime="20XX-XX-XX" title="20XX-XX-XX">
<span class="date-year">20XX</span><span class="hyphen">-</span><span class="date-month">XX</span><span class="hyphen">-</span><span class="date-day">XX</span>
</time></a>
</div>
<h1 class="entry-title"><a class="entry-title-link" href="https://www.s13y.com/">サンプルエントリー</a></h1>
</div>

<!-- #categories(カテゴリー) -->
<div class="categories"><a href="https://www.s13y.com/" class="archive-category-link category-カテゴリ">カテゴリ</a></div>

<!-- #entry-thumb(サムネイル) -->
<a href="https://www.s13y.com/entry/sample-entry" class="entry-thumb-link">
<div class="entry-thumb" style="background-image: url('https://cdn.image.st-hatena.com/image/square/8b8c27bedbb63962ae6972d630b20c07b7f3c9cd/backend=imagemagick;height=500;quality=80;version=1;width=500/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhatenablog%2F20101106%2F20101106100658.jpg');">
</div>
</a>
<!-- #archive-entry-body(記事本文) -->
<div class="archive-entry-body">
<p class="entry-description">本文</p>

<span class="social-buttons">
<a href="http://b.hatena.ne.jp/entry/https://www.s13y.com/entry/sample-entry" class="bookmark-widget-counter">
<img src="https://b.hatena.ne.jp/entry/image/https://www.s13y.com/entry/sample-entry" alt="はてなブックマーク - サンプルエントリー" /></a>

<span class="star-container"></span>
<div class="hatena-star-metadata" style="display: none"><a class="hatena-star-permalink" href="https://www.s13y.com/entry/sample-entry">サンプルエントリー</a></div>
</span>
</div>

</section>

</div><!-- End #archive-entries -->

<!-- rakuten_ad_target_end -->
<!-- google_ad_section_end -->

<style>/*post.html
<body class="page-entry header-image-enable enable-top-editarea enable-bottom-editarea">
<div id="header-container">
<div id="sp-suggest" style="display: none;"><a id="sp-suggest-link" href="#">スマートフォン用の表示で見る</a></div>
</div>
<div id="globalheader-container" data-brand="hatenablog">
<iframe id="globalheader" height="37" frameborder="0" allowTransparency="true"></iframe>
</div>

<div id="container">
<div id="container-inner">

<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" style="background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/s/s13y/20190122/20190122210633.png'); background-position: center 0px;">
<div id="blog-title-content">
<h1 id="title"><a href="https://www.s13y.com/">s13y</a></h1>
<h2 id="blog-description">カスタマイズ専用サイト</h2>
</div>
</div>
</header>
<div id="top-editarea"><p>タイトル下追加HTML</p></div>

<!-- #top-box(パンくずリスト) -->
<div id="top-box">
<div class="breadcrumb" data-test-id="breadcrumb">
<div class="breadcrumb-inner">
<a class="breadcrumb-link" href="https://www.s13y.com/" >
<span>トップ</span>
</a> <span class="breadcrumb-gt">&gt;</span><span class="breadcrumb-child"><span>タイトル</span> </span> </div>
</div>
</div>
<!-- End #top-box(パンくずリスト) -->

<script type="application/ld+json" class="test-breadcrumb-json-ld">
            { "@type": "BreadcrumbList", "@context": "http://schema.org", "itemListElement": [{ "position": 1, "item": { "@id": "https://www.s13y.com/", "name": "トップ" }, "@type": "ListItem" }] }
</script>

<div id="content" class="hfeed">
<div id="content-inner">
<div id="wrapper">
<div id="main">
<div id="main-inner">
<!-- google_ad_section_start -->
<!-- rakuten_ad_target_begin -->

<article class="entry hentry js-entry-article date-first autopagerize_page_element chars-200 words-100 mode-markdown entry-odd" id="entry-98012380831514698" data-keyword-campaign="" data-uuid="98012380831514698" data-publication-type="entry">

<!-- #entry-inner -->
<div class="entry-inner">
<header class="entry-header">
<div class="date entry-date first">
<a href="https://www.s13y.com/archive/2019/01/27" rel="nofollow">
<time pubdate datetime="2019-01-27T02:06:06Z" title="2019-01-27T02:06:06Z">
<span class="date-year">2019</span><span class="hyphen">-</span><span class="date-month">01</span><span class="hyphen">-</span><span class="date-day">27</span>
</time>
</a>
</div>
<h1 class="entry-title">
<a href="https://www.s13y.com/entry/2019/01/23/223855" class="entry-title-link bookmark">タイトル</a>
</h1>

<div class="customized-header">
<div class="entry-header-html"><p>記事上追加HTML</p></div>
</div>

<!-- #social-buttons(ソーシャルボタン) -->
<div class="social-buttons">

<!-- はてなブックマークボタン -->
<div class="social-button-item">
<a href="http://b.hatena.ne.jp/entry/https://www.s13y.com/entry/2019/01/23/223855" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="この記事をはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</div>
<!-- Facebook「シェア」ボタン -->
<div class="social-button-item">
<div class="fb-share-button" data-layout="box_count" data-href="https://www.s13y.com/entry/2019/01/23/223855"></div>
</div>
<!-- ツイートボタン -->
<div class="social-button-item">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.s13y.com/entry/2019/01/23/223855" data-count="vertical" data-text="タイトル - s13y" data-lang="ja">Tweet</a>
</div>
<!-- Google +1ボタン -->
<div class="social-button-item">
<div class="g-plusone" data-size="tall" data-href="https://www.s13y.com/entry/2019/01/23/223855"></div>
</div>
<!-- Tumblr共有ボタン -->
<div class="social-button-item">
<a href="http://www.tumblr.com/share" data-hatenablog-tumblr-share-button data-share-url="https://www.s13y.com/entry/2019/01/23/223855" data-share-title="タイトル - s13y" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent; vertical-align: top;">Share on Tumblr</a>
</div>
<span>
<!-- LINEで送るボタン -->
<div class="line-it-button" style="display: none;" data-type="share-e" data-lang="ja" ></div>
<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer" ></script>
</span>
<!-- pocket追加ボタン -->
<div class="social-button-item">
<a data-pocket-label="pocket" data-save-url="https://www.s13y.com/entry/2019/01/23/223855" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
</div>
</div><!-- End #social-buttons(ソーシャルボタン) -->

</header>
<!-- #entry-content(記事本文) -->
<div class="entry-content">
<p>本文</p>
</div>
<!-- End #entry-content(記事本文) -->
<!-- #entry-footer(記事フッター) -->
<footer class="entry-footer">
<p class="entry-footer-section">
<span class="author vcard"><span class="fn" data-load-nickname="1" data-user-name="s13y">s13y</span></span>
<span class="entry-footer-time"><a href="https://www.s13y.com/entry/2019/01/23/223855"><time data-relative datetime="2019-01-27T02:06:06Z" title="2019-01-27T02:06:06Z" pubdate class="updated">2019-01-27 11:06</time></a></span>
</p>
<div class="hatena-star-container"></div>
<div class="hatena-star-metadata" style="display: none">
<a class="hatena-star-permalink" href="https://www.s13y.com/entry/2019/01/23/223855">タイトル</a>
</div>
<!-- #social-buttons(ソーシャルボタン) -->
<div class="social-buttons">

<!-- はてなブックマークボタン -->
<div class="social-button-item">
<a href="http://b.hatena.ne.jp/entry/https://www.s13y.com/entry/2019/01/23/223855" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="この記事をはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</div>
<!-- Facebook「シェア」ボタン -->
<div class="social-button-item">
<div class="fb-share-button" data-layout="box_count" data-href="https://www.s13y.com/entry/2019/01/23/223855"></div>
</div>
<!-- ツイートボタン -->
<div class="social-button-item">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.s13y.com/entry/2019/01/23/223855" data-count="vertical" data-text="タイトル - s13y" data-lang="ja">Tweet</a>
</div>
<!-- Google +1ボタン -->
<div class="social-button-item">
<div class="g-plusone" data-size="tall" data-href="https://www.s13y.com/entry/2019/01/23/223855"></div>
</div>
<!-- Tumblr共有ボタン -->
<div class="social-button-item">
<a href="http://www.tumblr.com/share" data-hatenablog-tumblr-share-button data-share-url="https://www.s13y.com/entry/2019/01/23/223855" data-share-title="タイトル - s13y" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent; vertical-align: top;">Share on Tumblr</a>
</div>
<span>
<!-- LINEで送るボタン -->
<div class="line-it-button" style="display: none;" data-type="share-e" data-lang="ja" ></div>
<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer" ></script>
</span>
<!-- pocket追加ボタン -->
<div class="social-button-item">
<a data-pocket-label="pocket" data-save-url="https://www.s13y.com/entry/2019/01/23/223855" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
</div>
</div><!-- End #social-buttons(ソーシャルボタン) -->

<div class="google-afc-image test-google-rectangle-ads">
<div id="google_afc_user_container_0" class="google-afc-user-container google_afc_blocklink2_5 google_afc_boder" data-test-unit="/4374287/blog_user"></div>
</div>

<div class="customized-footer">
<iframe class="hatena-bookmark-comment-iframe" data-src="https://www.s13y.com/iframe/hatena_bookmark_comment?canonical_uri=https%3A%2F%2Fwww.s13y.com%2Fentry%2F2019%2F01%2F23%2F223855" frameborder="0" scrolling="no" style="border: none; width: 100%;">
</iframe>
<div class="entry-footer-modules" id="entry-footer-secondary-modules"> </div>
<div class="entry-footer-html"><p>記事下追加HTML</p></div>
</div>

<div class="comment-box">
<ul class="comment">
<li class="read-more-comments" style="display: none;"><a>もっと読む</a></li>
</ul>
<a class="leave-comment-title">コメントを書く</a>
</div>

</footer><!-- #entry-footer(記事フッター) -->
</div><!-- End #entry-inner -->
</article>

<!-- rakuten_ad_target_end -->
<!-- google_ad_section_end -->
<!-- #permalink(ページャ・パーマリンク) -->
<div class="pager pager-permalink permalink">
<span class="pager-prev">
<a href="https://www.s13y.com/entry/2019/01/27/124612" rel="prev">
<span class="pager-arrow">&laquo; </span>サンプルエントリー</a>
</span>
<span class="pager-next"><a href="https://www.s13y.com/entry/sample-entry" rel="next">サンプルエントリー
<span class="pager-arrow"> &raquo;</span>
</a>
</span>
</div><!-- End #permalink(ページャ・パーマリンク) -->
*/</style>

</div><!-- End #main-inner  -->
</div><!-- End #main -->

<aside id="box1">
<div id="box1-inner"></div>
</aside>
</div><!-- End #wrapper -->

<aside id="box2">
<div id="box2-inner">

<!-- #hatena-module-profile(プロフィール) -->
<div class="hatena-module hatena-module-profile">
<div class="hatena-module-title">プロフィール</div>
<div class="hatena-module-body">
<a href="https://www.s13y.com/about" class="profile-icon-link"><img src="https://cdn.profile-image.st-hatena.com/users/s13y/profile.png" alt="id:s13y" class="profile-icon" /></a>
<span class="id">
<a href="https://www.s13y.com/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="s13y">id:s13y</span></a>
<a href="http://blog.hatena.ne.jp/guide/pro" title="はてなブログPro"><i class="badge-type-pro">はてなブログPro</i></a>
</span>
<div class="profile-activities">最終更新:<time datetime="2019-01-27T03:46:12Z" data-relative data-epoch="1548560772000" pubdate class="updated">2019-01-27 12:46</time>
<span class="profile-running-duration is-hidden" data-show-until="1549770372">(継続期間:2 週間)</span>
</div>
<div class="profile-description"><p>ブログの説明</p></div>
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
<a href="#" class="hatena-follow-button js-hatena-follow-button">
<span class="subscribing">
<span class="foreground">読者です</span>
<span class="background">読者をやめる</span>
</span>
<span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once>
<span class="foreground">読者になる</span>
<span class="background">読者になる</span>
</span>
</a>
<div class="subscription-count-box js-subscription-count-box">
<i></i>
<u></u>
<span class="subscription-count js-subscription-count">
</span>
</div>
</div>
<div class="hatena-follow-button-box btn-twitter">
<a href="https://twitter.com/s13y_blog" class="twitter-follow-button" data-show-count="false" data-lang="ja">@s13y_blogをフォロー</a>
</div>
</div>
</div>

<!-- #hatena-module-search-box(検索) -->
<div class="hatena-module hatena-module-search-box">
<div class="hatena-module-title">検索</div>
<div class="hatena-module-body">
<form class="search-form" role="search" action="https://www.s13y.com/search" method="get">
<input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required>
<input type="submit" value="検索" class="search-module-button" />
</form>
</div>
</div>

<!-- #hatena-module-link(リンク) -->
<div class="hatena-module hatena-module-links">
<div class="hatena-module-title">リンク</div>
<div class="hatena-module-body">
<ul class="hatena-urllist">
<li><a href="http://www.s13y.com">s13y-1</a></li>
<li><a href="http://www.s13y.com">s13y-2</a></li>
<li><a href="http://www.s13y.com">s13y-3</a></li>
<li><a href="http://www.s13y.com">s13y-4</a></li>
</ul>
</div>
</div>

<!-- #hatena-module-recent-entries(最新記事) -->
<div class="hatena-module hatena-module-recent-entries category-カテゴリ">
<div class="hatena-module-title">
<a href="https://www.s13y.com/archive/category/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA">最新記事</a>
</div>
<div class="hatena-module-body">
<ul class="recent-entries hatena-urllist urllist-with-thumbnails">
<li class="urllist-item recent-entries-item">
<div class="urllist-item-inner recent-entries-item-inner">
<a class="urllist-image-link recent-entries-image-link" href="https://www.s13y.com/entry/sample-entry">
<img alt="サンプルエントリー" src="https://cdn.image.st-hatena.com/image/square/7767a6308530ed25da872f3ba0129e67e1e6b702/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhatenablog%2F20101106%2F20101106100658.jpg" class="urllist-image recent-entries-image" title="サンプルエントリー" width="100">
</a>
<div class="urllist-date-link recent-entries-date-link">
<a href="https://www.s13y.com/archive/2019/01/20" rel="nofollow">
<time pubdate datetime="2019-01-20T07:55:13Z" title="2019-01-20T07:55:13Z">2019-01-20</time>
</a>
</div>
<a href="https://www.s13y.com/entry/sample-entry" class="urllist-title-link recent-entries-title-link  urllist-title recent-entries-title">サンプルエントリー</a>
<a href="http://b.hatena.ne.jp/entry/https://www.s13y.com/entry/sample-entry" class="bookmark-widget-counter">
<img src="https://b.hatena.ne.jp/entry/image/https://www.s13y.com/entry/sample-entry" alt="はてなブックマーク - サンプルエントリー" />
</a>
<div class="urllist-categories recent-entries-categories">
  <a class="urllist-category-link recent-entries-category-link category-カテゴリ" href="https://www.s13y.com/archive/category/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA">カテゴリ</a>
</div>
<div class="urllist-entry-body recent-entries-entry-body">段落 あのイーハトヴ…</div>
</div>
</li>
</ul>
</div>
</div>

<!-- #hatena-module-entries-access-ranking(注目記事) -->
<div class="hatena-module hatena-module-entries-access-ranking" data-count="5" data-source="access" data-enable_customize_format="0" data-display_entry_category="1" data-display_entry_image="1" data-display_entry_image_size_width="100" data-display_entry_image_size_height="100" data-display_entry_body_length="0" data-display_entry_date="1" data-display_entry_title_length="20" data-restrict_entry_title_length="0" data-display_bookmark_count="1">
<div class="hatena-module-title">注目記事</div>
<div class="hatena-module-body"></div>
</div>

<!-- #hatena-module-archive(月別アーカイブ・リスト) -->
<div class="hatena-module hatena-module-archive" data-archive-type="default" data-archive-url="https://www.s13y.com/archive">
<div class="hatena-module-title">
<a href="https://www.s13y.com/archive">月刊アーカイブ リスト</a>
</div>
<div class="hatena-module-body"></div>
</div>
<!-- #hatena-module-archive(月別アーカイブ・カレンダー) -->
<div class="hatena-module hatena-module-archive" data-archive-type="calendar" data-archive-url="https://www.s13y.com/archive">
<div class="hatena-module-title">
<a href="https://www.s13y.com/archive">月刊アーカイブ カレンダー</a>
</div>
<div class="hatena-module-body">
</div>
</div>

<!-- #hatena-module-category(カテゴリー) -->
<div class="hatena-module hatena-module-category">
<div class="hatena-module-title">カテゴリー</div>
<div class="hatena-module-body">
<ul class="hatena-urllist">
<li><a href="https://www.s13y.com/archive/category/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA">カテゴリ (1)</a></li>
</ul>
</div>
</div>

<!-- #hatena-module-recent-comments(最近のコメント) -->
<div class="hatena-module hatena-module-recent-comments">
<div class="hatena-module-title">最近のコメント</div>
<div class="hatena-module-body" data-count=5>
<ul class="recent-comments hatena-urllist"></ul>
</div>
<script class="recent-comments-template" type="text/x-underscore-template">
                                    <li>
      <span class="user-id">
        <img src="<%- comment.icon_url %>" class="hatena-id-icon" alt="<%- comment.user_name %>" title="<%- comment.user_name %>" />
        <% if (comment.is_hatena_user) { %>
          <span data-load-nickname="1" data-user-name="<%- comment.user_name %>">id:<%- comment.user_name %></span>
        <% } else { %>
          <%- comment.user_name %>
        <% } %>
      </span>
      <a href="<%- comment.entry_url %>"><%- comment.entry_title %></a>
      <span class="recent-comment-time">(<time datetime="<%- comment.created %>" data-relative class="recent-comment-time" data-epoch="<%- comment.epoch * 1000 %>"><%- comment.time %></time>)</span>
    </li>
</script>
</div>

<!-- #hatena-module-html(HTML) -->
<div class="hatena-module hatena-module-html">
<div class="hatena-module-title">HTML</div>
<div class="hatena-module-body"><p>追加コメント<p></div>
</div>

<!-- #hatena-module-circles(参加グループ) -->
<div class="hatena-module hatena-module-circles">
<div class="hatena-module-title">参加グループ</div>
<div class="hatena-module-body">
<ul class="hatena-urllist circle-urllist">
</ul>
</div>
</div>

<!-- #hatena-module-authors-list(筆者リスト) -->
<div class="hatena-module hatena-module-authors-list">
<div class="hatena-module-title">執筆者リスト</div>
<div class="hatena-module-body">
<ul class="hatena-urllist authors-urllist">
<li><a href="https://www.s13y.com/archive/author/s13y">
<img src="https://cdn.profile-image.st-hatena.com/users/s13y/profile.png" class="authors-user-icon">
<span class="authors-user-name" data-load-nickname="1" data-user-name="s13y">id:s13y</span>
</a>
</li>
</ul>
</div>
</div>
</div><!-- End #box2-inner -->
</aside><!-- End #box2 -->

</div><!-- End #content-inner -->
</div><!-- End #content -->

<div id="bottom-editarea"><p>フッタ追加HTML</p></div>

</div><!-- #container-inner -->
</div><!-- #container -->

<footer id="footer" data-brand="hatenablog">

<div id="footer-inner">
<address class="footer-address">
<a href="https://www.s13y.com/">
<img src="https://cdn.blog.st-hatena.com/images/admin/blog-icon-noimage.png" width="16" height="16" alt="s13y"/>
<span class="footer-address-name">s13y</span>
</a>
</address>

<p class="services">Powered by <a href="https://hatenablog.com/">Hatena Blog</a> |
<a href="https://blog.hatena.ne.jp/-/abuse_report?target_url=https%3A%2F%2Fwww.s13y.com%2F%3F_ga%3D2.34894561.1194618806.1547389105-23975108.1547389105" class="report-abuse-link test-report-abuse-link" target="_blank">ブログを報告する</a>
</p>
</div>
</footer>

<script type="text/javascript">
    ! function(d, i) { if (!d.getElementById(i)) { var j = d.createElement("script");
            j.id = i;
            j.src = "https://widgets.getpocket.com/v1/j/btn.js?v=1"; var w = d.getElementById(i);
            d.body.appendChild(j); } }(document, "pocket-btn-js");
    </script>
    <script src="https://s.hatena.ne.jp/js/HatenaStar.js?20180530"></script>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=719729204785177&version=v2.7";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="quote-box">

<div class="tooltip-quote tooltip-quote-star">
<i class="blogicon-star" title="引用スターをつける"></i>
</div>

<div class="tooltip-quote tooltip-quote-stock">
<i class="blogicon-quote" title="引用をストック"></i>
</div>

<div class="tooltip-quote tooltip-quote-tweet js-tooltip-quote-tweet">
<a class="js-tweet-quote" target="_blank" data-track-name="quote-tweet" data-track-once><i class="blogicon-twitter" title="引用してツイートする"></i></a>
</div>

</div>

<div class="message-box" id="quote-star-message-box" style="display: none; position: absolute;">スターをつけました</div>
<div class="quote-stock-panel" id="quote-stock-message-box" style="position: absolute; z-index: 3000">
<div class="message-box" id="quote-stock-succeeded-message" style="display: none">
<p>引用をストックしました</p>
<button class="btn btn-primary" id="quote-stock-show-editor-button" data-track-name="curation-quote-edit-button">ストック一覧を見る</button>
<button class="btn quote-stock-close-message-button">閉じる</button>
</div>

<div class="message-box" id="quote-login-required-message" style="display: none">
<p>引用するにはまずログインしてください</p>
<button class="btn btn-primary" id="quote-login-button">ログイン</button>
<button class="btn quote-stock-close-message-button">閉じる</button>
</div>

<div class="error-box" id="quote-stock-failed-message" style="display: none">
<p>引用をストックできませんでした。再度お試しください</p>
<button class="btn quote-stock-close-message-button">閉じる</button>
</div>

<div class="error-box" id="unstockable-quote-message-box" style="display: none; position: absolute; z-index: 3000;">
 <p>限定公開記事のため引用できません。</p>
</div>
</div>
<script type="x-underscore-template" id="js-requote-button-template">
        <div class="requote-button js-requote-button">
    <button class="requote-button-btn tipsy-top" title="引用する"><i class="blogicon-quote"></i></button>
  </div>
</script>

<div id="hidden-subscribe-button" style="display: none;">
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
<a href="#" class="hatena-follow-button js-hatena-follow-button">
<span class="subscribing">
<span class="foreground">読者です</span>
<span class="background">読者をやめる</span>
</span>
<span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once>
<span class="foreground">読者になる</span>
<span class="background">読者になる</span>
</span>
</a>

<div class="subscription-count-box js-subscription-count-box">
<i></i>
<u></u>
<span class="subscription-count js-subscription-count"></span>
</div>
</div>
</div>

<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer>
 { lang: 'ja', "parsetags": "explicit" }
</script>
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/react-with-addons.min.js?version=15.4.1"></script>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/react-dom.min.js?version=15.4.1"></script>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script type="text/javascript" src="//cdn7.www.st-hatena.com/js/jquery/jquery-ui.1.10.0.custom.min.js"></script>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.flot.js?version=0.8.3"></script>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.flot.time.js?version=0.8.3"></script>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/texts-ja.js?version=2d52b277ea741221b3d0780bc5bd5ddf8557c2d1&amp;env=production"></script>
<script id="hatenablog-js" data-env="production" type="text/javascript" src="https://cdn.blog.st-hatena.com/js/hatenablog.js?version=7536a194b6c212b3aa1a7af74d4ae82e0ae1b804&amp;env=production" crossorigin="anonymous"></script>
<script type="text/javascript">
    Hatena.Diary.GlobalHeader.init()
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

</body>
</html>

聞いていた話と違う

「おいおいめちゃくちゃ長いじゃないか」と思った方はご安心ください。こちらのソースコードはトップページをベースに整理しています。<body></body>内にある<style>タグに気が付きましたか?<style>タグは<head></head>内に書くのでしたね。実はこの中に記述されているソースコードを<body>から</div><!-- End #main-inner -->まで置き換えると記事ページへ切り替えられます。なぜそのようなことをするのかと思うかもしれませんが、それは「トップページ」と「記事ページ」という構図が「サイト」としての形を保つために最も大切だからです。知っての通り、トップページだけでサイト全体が出来ているわけではなく、アバウトページやカテゴリーページもあります。

基本的に「トップページ」と共通

他のページを作る際は「トップページ」書き換えるだけで対応できます。タイトルが書かれている「ヘッダー」やプロフィールやメニューなどがある「サイドバー」はどのページでも共通ですよね。つまり<body></body>内にある<style></style>を消したものがトップページのソースコードとなります。この「トップページ」を作り込んでしまえばどのページにも対応可能です。もちろん記事の一番下にある「フッター」も共通です。サイト全体では共通の項目が多いため、実際に作り込む際は楽をすることが出来ます。

カスタマイズの救済処置

はてなブログはHTMLのカスタムが出来ません。はてなブログ側が救済処置として必要のない「コンテナ」を用意してくれているのがわかります。これらをうまく利用すれば他のテーマと一味違ったサイトに変化させることが可能です。それだけ不要なコードに溢れているとも言えます。全体を通してみればソースコードの割に実際に表示されるWebページは簡素です。

はてなブログは「カスタマイズの幅が狭い」

よく言われることですが、初心者にとっては打って付けです。現在の知識ではとても幅が狭いとは思えませんね。Webページとしては十分過ぎる土台が出来上がっておりますので、これをベースに自分の物へと落とし込みしていきましょう。はてなブログは初心者にとって最も効率的に勉強できる教科書のようです。

data-brand=""ってなに?

謎の属性を発見してしまいました。data-bindという属性は知っていますがdata-brandとは知りません。私の勉強不足でしょうか。この先、はてなブログ全体紐解いていく上で合点のいく答えが出せると良いのですが。空の<script>タグがあったりするので「もしかして?」と疑問に感じます。まさかはてなブログ側で見落としているということはありませんよね。

<body>タグ内に<style>タグを使用した意図

<style>で記述していますが、このことに深い意味はありません。「コメントアウト」と言ってソースとは関係ない記述を入れることが出来るのですが、この「コメントアウト内でのコメントアウト」ができない為にHTMLのコメントアウトではなくスクリプトで使われるコメントアウトを利用しました。