CINXE.COM
デザインテーマ制作の手引き - はてなブログ ヘルプ
<!DOCTYPE html><html lang="ja" data-admin-domain="//blog.hatena.ne.jp" data-admin-origin="https://blog.hatena.ne.jp" data-author="hatenablog" data-avail-langs="ja en" data-blog="help.hatenablog.com" data-blog-host="help.hatenablog.com" data-blog-is-public="1" data-blog-name="はてなブログ ヘルプ" data-blog-owner="hatenablog" data-blog-show-ads="" data-blog-show-sleeping-ads="" data-blog-uri="https://help.hatenablog.com/" data-blog-uuid="13208647353034080391" data-blogs-uri-base="https://help.hatenablog.com" data-brand="regular_plan" data-data-layer="{"hatenablog":{"admin":{},"analytics":{"brand_property_id":"UA-69076420-1","measurement_id":"","non_sampling_property_id":"","property_id":"UA-29716941-11","separated_property_id":"UA-29716941-17"},"blog":{"blog_id":"13208647353034080391","content_seems_japanese":"true","disable_ads":"brand","enable_ads":"false","enable_keyword_link":"false","entry_show_footer_related_entries":"false","force_pc_view":"true","is_public":"true","is_responsive_view":"true","is_sleeping":"false","lang":"ja","name":"\u306f\u3066\u306a\u30d6\u30ed\u30b0 \u30d8\u30eb\u30d7","owner_name":"hatenablog","uri":"https://help.hatenablog.com/"},"brand":"regular_plan","page_id":"entry","permalink_entry":{"author_name":"hatenablog","categories":"\u30c7\u30b6\u30a4\u30f3\u30ab\u30b9\u30bf\u30de\u30a4\u30ba","character_count":7857,"date":"2013-02-20","entry_id":"6435922169448941648","first_category":"\u30c7\u30b6\u30a4\u30f3\u30ab\u30b9\u30bf\u30de\u30a4\u30ba","hour":"18","title":"\u30c7\u30b6\u30a4\u30f3\u30c6\u30fc\u30de\u5236\u4f5c\u306e\u624b\u5f15\u304d","uri":"https://help.hatenablog.com/entry/theme/custom-theme"},"pro":"pro","router_type":"blogs"}}" data-device="pc" data-dont-recommend-pro="false" data-global-domain="https://hatena.blog" data-globalheader-color="b" data-globalheader-type="pc" data-has-touch-view="1" data-help-url="https://help.hatenablog.com" data-hide-header="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-environment="production" data-sentry-sample-rate="0.1" data-static-domain="https://cdn.blog.st-hatena.com" data-version="add51ddc2d3c0599e98ea1239ac012" data-initial-state="{}"><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="max-image-preview:large"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7; IE=9; IE=10; IE=11"> <title>デザインテーマ制作の手引き - はてなブログ ヘルプ</title> <link rel="canonical" href="https://help.hatenablog.com/entry/theme/custom-theme"> <meta itemprop="name" content="デザインテーマ制作の手引き - はてなブログ ヘルプ"> <meta itemprop="image" content="https://ogimage.blog.st-hatena.com/13208647353034080391/6435922169448941648/1718680761"> <meta property="og:title" content="デザインテーマ制作の手引き - はてなブログ ヘルプ"> <meta property="og:type" content="article"> <meta property="og:url" content="https://help.hatenablog.com/entry/theme/custom-theme"> <meta property="og:image" content="https://ogimage.blog.st-hatena.com/13208647353034080391/6435922169448941648/1718680761"> <meta property="og:image:alt" content="デザインテーマ制作の手引き - はてなブログ ヘルプ"> <meta property="og:description" content="はてなブログでは、CSSを編集してオリジナルテーマを作ることができます。本ドキュメントでは、Webデザイナーの方がはてなブログ用オリジナルテーマを作成するために必要な情報をまとめています。"> <meta property="og:site_name" content="はてなブログ ヘルプ"> <meta property="article:published_time" content="1361352713"> <meta property="article:tag" content="デザインカスタマイズ"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://ogimage.blog.st-hatena.com/13208647353034080391/6435922169448941648/1718680761"> <meta name="twitter:title" content="デザインテーマ制作の手引き - はてなブログ ヘルプ"> <meta name="twitter:description" content="はてなブログでは、CSSを編集してオリジナルテーマを作ることができます。本ドキュメントでは、Webデザイナーの方がはてなブログ用オリジナルテーマを作成するために必要な情報をまとめています。"> <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%2Fhelp.hatenablog.com%2Fentry%2Ftheme%2Fcustom-theme"> <meta name="twitter:site" content="@hatenablog"> <meta name="description" content="はてなブログでは、CSSを編集してオリジナルテーマを作ることができます。本ドキュメントでは、Webデザイナーの方がはてなブログ用オリジナルテーマを作成するために必要な情報をまとめています。"> <meta name="keywords" content="はてな,ブログ,ヘルプ"> <script id="embed-gtm-data-layer-loader" data-data-layer-page-specific="{"hatenablog":{"blogs_permalink":{"blog_afc_issued":"false","is_blog_sleeping":"false","has_related_entries_with_elasticsearch":"false","entry_afc_issued":"false","is_author_pro":"true"}}}"> (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 --> <link rel="shortcut icon" href="https://help.hatenablog.com/icon/favicon"> <link rel="apple-touch-icon" href="https://help.hatenablog.com/icon/touch"> <link rel="icon" sizes="192x192" href="https://help.hatenablog.com/icon/link"> <link rel="alternate" type="application/atom+xml" title="Atom" href="https://help.hatenablog.com/feed"> <link rel="alternate" type="application/rss+xml" title="RSS2.0" href="https://help.hatenablog.com/rss"> <link rel="alternate" type="application/json+oembed" href="https://hatena.blog/oembed?url=https%3A%2F%2Fhelp.hatenablog.com%2Fentry%2Ftheme%2Fcustom-theme&format=json" title="oEmbed Profile of デザインテーマ制作の手引き"> <link rel="alternate" type="text/xml+oembed" href="https://hatena.blog/oembed?url=https%3A%2F%2Fhelp.hatenablog.com%2Fentry%2Ftheme%2Fcustom-theme&format=xml" title="oEmbed Profile of デザインテーマ制作の手引き"> <link rel="author" href="http://www.hatena.ne.jp/hatenablog/"> <link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=add51ddc2d3c0599e98ea1239ac012"> <link rel="stylesheet" type="text/css" href="https://usercss.blog.st-hatena.com/blog_style/13208647353034080391/722a44294c89ae37814ccb135d6262295aa5f27c"> <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 type="application/ld+json">{"@context":"http://schema.org","@type":"Article","dateModified":"2024-06-18T12:19:21+09:00","datePublished":"2013-02-20T18:31:53+09:00","headline":"デザインテーマ制作の手引き","image":["https://cdn.blog.st-hatena.com/images/theme/og-image-1500.png"]}</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-KJZ3HS9');</script> <!-- End Google Tag Manager --> <meta name="viewport" content="width=device-width"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-29716941-31', 'auto'); ga('send', 'pageview'); </script> <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "5cw1jc89ui"); </script> <!-- Global site tag (gtag.js) - Google Analytics cs@--> <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-189387219-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-189387219-1'); </script> </head> <body class="page-entry enable-top-editarea enable-bottom-editarea category-デザインカスタマイズ globalheader-off globalheader-ng-enabled"> <div id="globalheader-container" data-brand="hatenablog" style="display: none"> <iframe id="globalheader" height="37" frameborder="0" allowtransparency="true"></iframe> </div> <div id="container"> <div id="container-inner"> <div id="top-editarea"> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KJZ3HS9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <div class="header-wrapper"> <div class="header-wrapper-inner"> <nav class="header-logo-hatenablog"><a href="http://hatenablog.com/"> <img src="https://cdn.blog.st-hatena.com/css/theme/help/images/logo-hatenablog.svg" alt="Hatena Blog" class="header-logo-hatenablog-img"></a> </nav> <header class="blog-title"> <div id="blog-title-inner"> <div id="blog-title-content"> <h1 id="title"><a href="/">はてなブログ ヘルプ</a></h1> </div> </div> </header> <div class="header-search"> <form class="search-form" role="search" action="/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> </div> </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 --> <article class="entry hentry test-hentry js-entry-article date-first autopagerize_page_element chars-8000 words-400 mode-hatena entry-odd" id="entry-6435922169448941648" data-keyword-campaign="" data-uuid="6435922169448941648" data-publication-type="entry"> <div class="entry-inner"> <header class="entry-header"> <div class="date entry-date first"> <a href="https://help.hatenablog.com/archive/2013/02/20" rel="nofollow"> <time datetime="2013-02-20T09:31:53Z" title="2013-02-20T09:31:53Z"> <span class="date-year">2013</span><span class="hyphen">-</span><span class="date-month">02</span><span class="hyphen">-</span><span class="date-day">20</span> </time> </a> </div> <h1 class="entry-title"> <a href="https://help.hatenablog.com/entry/theme/custom-theme" class="entry-title-link bookmark">デザインテーマ制作の手引き</a> </h1> <div class="entry-categories categories"> <a href="https://help.hatenablog.com/archive/category/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA" class="entry-category-link category-デザインカスタマイズ">デザインカスタマイズ</a> </div> </header> <div class="entry-content hatenablog-entry"> <p>はてなブログでは、CSSを編集してオリジナルテーマを作ることができます。作成したテーマは、<a href="https://blog.hatena.ne.jp/-/store/theme/">テーマストア</a>に投稿して、ほかのはてなブログユーザーに使ってもらうこともできます。<br> 既存のデザインテーマをブログにインストールしたい場合はヘルプ「<a href="/entry/theme/install_theme">デザインテーマをインストールする</a>」を参照してください。</p><p>本ドキュメントでは、Webデザイナーの方がはてなブログ用オリジナルテーマを作成するために必要な情報をまとめています。</p> <div class="callout-info"> オリジナルテーマの作成は、CSSの知識がある方を対象にしています。 </div><ul class="table-of-contents"> <li><a href="#テーマを作成する準備">テーマを作成する準備</a><ul> <li><a href="#1-テーマ確認用のブログを開設する">1. テーマ確認用のブログを開設する</a></li> <li><a href="#2-サンプルエントリーをコピー">2. サンプルエントリーをコピー</a></li> </ul> </li> <li><a href="#サンプルテーマBoilerplate">サンプルテーマ「Boilerplate」</a><ul> <li><a href="#Boilerplateテーマの使い方">Boilerplateテーマの使い方</a></li> </ul> </li> <li><a href="#responsive">レスポンシブデザインのテーマを作成する</a><ul> <li><a href="#レスポンシブデザインを有効にする">レスポンシブデザインを有効にする</a></li> <li><a href="#付録-はてなブログのレスポンシブデザインテーマの挙動">付録: はてなブログのレスポンシブデザインテーマの挙動</a></li> </ul> </li> <li><a href="#はてなブログのページ構成">はてなブログのページ構成</a><ul> <li><a href="#各ページの例">各ページの例</a></li> </ul> </li> <li><a href="#CSSチェックリスト">CSSチェックリスト</a><ul> <li><a href="#スタイルの記述が必要ないもの">スタイルの記述が必要ないもの</a></li> </ul> </li> <li><a href="#デザインとコーディングの注意事項">デザインとコーディングの注意事項</a></li> <li><a href="#デザインカスタマイズの仕様">デザインカスタマイズの仕様</a><ul> <li><a href="#背景画像">背景画像</a></li> <li><a href="#ヘッダ画像">ヘッダ画像</a><ul> <li><a href="#ヘッダ画像のクラス">ヘッダ画像のクラス</a></li> </ul> </li> <li><a href="#HTMLを自由記述できる箇所">HTMLを自由記述できる箇所</a></li> <li><a href="#Archiveページ">Archiveページ</a></li> <li><a href="#ページャ">ページャ</a></li> <li><a href="#ヘッダーメニュー">ヘッダーメニュー</a></li> <li><a href="#はてなブログPro">はてなブログPro</a></li> </ul> </li> <li><a href="#関連項目">関連項目</a></li> <li><a href="#はてなブログの機能追加にともなうHTML構造の変更履歴">はてなブログの機能追加にともなうHTML構造の変更履歴</a><ul> <li><a href="#最新記事モジュールにサムネイル画像を表示2014年3月13日">最新記事モジュールにサムネイル画像を表示（2014年3月13日）</a></li> <li><a href="#Archiveページのサムネイル表示2014年2月28日">Archiveページのサムネイル表示（2014年2月28日）</a></li> <li><a href="#ページャに記事タイトルを表示2014年2月28日">ページャに記事タイトルを表示（2014年2月28日）</a></li> <li><a href="#記事上にHTMLを記述できる機能2014年2月5日">記事上にHTMLを記述できる機能（2014年2月5日）</a></li> <li><a href="#続きを読む記法-2013年3月27日">続きを読む記法 (2013年3月27日)</a></li> </ul> </li> </ul> <div class="section"> <h3 id="テーマを作成する準備">テーマを作成する準備</h3> <p>テーマを作成するにあたって、まずデザインを確認できる環境を用意しておくと作業がはかどります。</p> <div class="section"> <h4 id="1-テーマ確認用のブログを開設する">1. テーマ確認用のブログを開設する</h4> <p>テーマを確認するために、専用のはてなブログを新しく開設することをおすすめします。はてなブログでは、1アカウントにつき最大3つまで<small>（有料プラン「はてなブログPro」に加入すると最大10個まで）</small>のブログを開設できます<small>（詳細は、ヘルプ「<a href="/entry/register">はてなブログを始める</a>」を参照）</small>。</p><p>共同作業が必要なければ、ブログの公開範囲を「<strong>自分のみ</strong>」が閲覧できるようにしておけばよいでしょう。</p><p>テーマのCSSは、ブログのデザイン編集画面「<strong>デザインCSS</strong>」欄に記述していきます <small>（詳細は、ヘルプ「<a href="/entry/design/design-css">デザインCSSを記述する</a>」を参照）</small>。</p> </div> <div class="section"> <h4 id="2-サンプルエントリーをコピー">2. サンプルエントリーをコピー</h4> <p>デザインを確認できるように、はてなブログの記事に必要な要素をあらかじめまとめた「<a href="/entry/theme/sample-entry">サンプルエントリー</a>」を用意しています。</p><p>これをコピーして、先ほど用意したテーマ確認専用ブログの編集画面に貼り付け、新しい記事として投稿してください。CSSを修正したら、この記事を表示してデザインを確認するとよいでしょう。</p> </div> </div> <div class="section"> <h3 id="サンプルテーマBoilerplate"><span id="boilerplate">サンプルテーマ「Boilerplate」</span></h3> <p>はてなブログのデザインCSSをカスタマイズする土台に適したサンプルテーマ「<strong>Boilerplate</strong>」を配布しています。</p><p>このテーマをもとにCSSを記述すると、<strong>ゼロからテーマを作るのが難しい</strong>という方でも、比較的簡単にデザインテーマを作ることができます。</p> <div class="section"> <h4 id="Boilerplateテーマの使い方">Boilerplateテーマの使い方</h4> <p>Boilerplateテーマのソースコード（CSSおよびSCSSファイル）は、GitHub（<a href="https://github.com/hatena" target="_blank"">github.com/hatena</a>）で公開しています。</p><p><a href="https://github.com/hatena/Hatena-Blog-Theme-Boilerplate"><img src="https://cdn-ak.favicon.st-hatena.com/?url=https%3A%2F%2Fgithub.com%2Fhatena%2FHatena-Blog-Theme-Boilerplate" alt="" class="http-favicon"></a><a href="https://github.com/hatena/Hatena-Blog-Theme-Boilerplate">GitHubでBoilerplateテーマのソースコードを見る</a></p><p>このCSSおよびSCSSファイルは、MITライセンスのもとで自由に複製・再配布できます。このサンプルテーマをもとにしたテーマの配布も自由です。記事本文の書式やコメント欄のスタイルなど、必要な部分だけをコピーして使ってもかまいません。</p> </div> </div> <div class="section"> <h3 id="responsive">レスポンシブデザインのテーマを作成する</h3> <p>デザインテーマは、スマートフォンで適切に表示される<strong>レスポンシブデザインに対応することを強く推奨します</strong>。<br> はてなブログでレスポンシブデザインのテーマを作成するには、次の2つの条件を満たすように作成してください。</p> <ol> <li>Media queries（メディアクエリ）などを使用して、どのデバイスから閲覧しても適切な見た目になるよう、デザインテーマのCSSを調整する</li> <li>テーマのCSSの先頭に<strong><code>Responsive: yes</code></strong>という行を含んだコメントを挿入する <ul> <li>テーマの開発時などで、テーマストア以外からCSSをインポート（@import）する場合は、インポート先のCSSではなく「デザインCSS」欄に直接 <code>Responsive: yes</code> コメントを記述してください。</li> </ul></li> </ol><p>例えば、<a href="https://blog.hatena.ne.jp/-/store/theme/12921228815720753487"><strong>Evergreen</strong></a>テーマでは下記のようなコメントを記述しています。なお、コメントにはテーマ作者などの情報をこのように含めるのもよいでしょう。</p> <pre>/* Theme: evergreen Author: Hatena Blog Team Description: 1カラムで文章を書くことに集中できるテーマです <strong>Responsive: yes</strong> */ </pre><div class="callout-warning"> 正しくレスポンシブデザインに対応していないデザインテーマは、単に画面サイズを縮小しただけのブログが表示されるなど、かえって見づらくなるおそれがあります。必ず、ここでの説明に従ってテーマを作成してください。また、作成後にさまざまなデバイス幅で動作確認を行ってください。 </div> <div class="section"> <h4 id="レスポンシブデザインを有効にする">レスポンシブデザインを有効にする</h4> <p>このように設定したデザインテーマを適用したブログで、レスポンシブデザインを有効にするには、デザイン編集画面の「スマートフォン」タブで設定します。詳細は、ヘルプ「<a href="/entry/design/smartphone">ブログのデザインを変更する（スマートフォン）</a>」を参照してください。</p> </div> <div class="section"> <h4 id="付録-はてなブログのレスポンシブデザインテーマの挙動">付録: はてなブログのレスポンシブデザインテーマの挙動</h4> <p>デザインテーマのCSSに<strong><code>Responsive: yes</code></strong>のコメントが記述されている場合、はてなブログでは下記のようにスマートフォンデバイスに適した<code>viewport</code>をHTMLヘッダーで指定します。</p> <pre class="code" data-lang="" data-unlink=""><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre> </div> </div> <div class="section"> <h3 id="はてなブログのページ構成">はてなブログのページ構成</h3> <p>はてなブログは、次のような種類のページで構成されています。それぞれのページが正しく見られるようにデザインする必要があります。</p> <pre class="code" data-lang="" data-unlink="">トップページ ┣ パーマリンク（記事ページ） ┣ Aboutページ ┣ Archiveページ ┣ Archive/Categoryページ ┗ Searchページ</pre> <div class="section"> <h4 id="各ページの例">各ページの例</h4> <p>上記のページは、<a href="http://sample.hatenastaff.com/">サンプルのブログ</a> を例に取ると、それぞれ次のURLが該当します。</p> <table> <tbody><tr> <th>ページの種類</th> <th>URLの例</th> </tr> <tr> <td>トップページ</td> <td><code>http://sample.hatenastaff.com/</code></td> </tr> <tr> <td>パーマリンク（記事ページ）</td> <td><code><i>top_url</i>/entry/2013/01/25/121312</code></td> </tr> <tr> <td>Aboutページ</td> <td><code><i>top_url</i>/about</code></td> </tr> <tr> <td>Archiveページ</td> <td><code><i>top_url</i>/archive</code></td> </tr> <tr> <td>〃（年間）</td> <td><code><i>top_url</i>/archive/2012</code></td> </tr> <tr> <td>〃（月間）</td> <td><code><i>top_url</i>/archive/2012/01</code></td> </tr> <tr> <td>〃（日付ごと）</td> <td><code><i>top_url</i>/archive/2013/01/09</code></td> </tr> <tr> <td>〃（カテゴリー）</td> <td><code><i>top_url</i>/archive/category/%E6%96%B0%E6%A9%9F%E8%83%BD</code></td> </tr> <tr> <td>Searchページ</td> <td><code><i>top_url</i>/search?q=%E3%81%AF%E3%81%A6%E3%81%AA</code></td> </tr> </tbody></table><p>※<code><i>top_url</i></code>にはブログのトップページのURL<small>（ここでは<code>http://sample.hatenastaff.com/</code>）</small>を当てはめてください。</p> </div> </div> <div class="section"> <h3 id="CSSチェックリスト">CSSチェックリスト</h3> <p>オリジナルのテーマを作成するには、少なくとも以下の箇所に対してCSSを書く必要があります。このチェックリストをもとに、書き忘れた箇所がないか確認しましょう。</p> <ul> <li>ブログタイトル</li> <li>ブログのひとこと説明</li> <li>記事 <ul> <li>日付</li> <li>カテゴリー</li> <li>「編集」リンク</li> <li>はてなブログタグへのリンク</li> <li>記事下の広告</li> <li>記事下の関連記事 <ul> <li>関連するとみられる記事がブログ内にあるとき表示されます。表示されない場合は、いくつか記事を投稿し、しばらく時間をおいてください。</li> </ul></li> <li>コメント欄</li> </ul></li> <li>サイドバーモジュール <ul> <li>プロフィール、最新記事などの各モジュール <ul> <li>モジュールのオプションをすべて表示した状態で確認することをおすすめします</li> </ul></li> </ul></li> <li>ページャー</li> <li>フッターリンク</li> <li>Aboutページ</li> <li>Archiveページ <ul> <li>カテゴリーのパンくずリスト</li> </ul></li> </ul> <div class="section"> <h4 id="スタイルの記述が必要ないもの">スタイルの記述が必要ないもの</h4> <p>以下の項目はあらかじめ標準のCSSが適用されているため、デザインテーマでスタイルの記述は不要です。</p> <ul> <li>ヘッダーメニュー</li> <li>Archiveページの検索ボックス</li> <li><a href="https://help.hatenablog.com/entry/reading/subscribe">読者になるボタン</a></li> <li><a href="https://help.hatenablog.com/entry/hatena/star">はてなスター</a></li> <li><a href="https://help.hatenablog.com/entry/tag">タグ</a> <ul> <li>必要があればコンテナ上下の余白を調整してください。</li> </ul></li> </ul><div class="callout-warning"> これらの要素にスタイルを記述した場合、将来のはてなブログの仕様変更によって、予告なく正常に表示されなくなることがあります。 </div> </div> </div> <div class="section"> <h3 id="デザインとコーディングの注意事項">デザインとコーディングの注意事項</h3> <p>作成したテーマをテーマストアに投稿する際は、下記の注意事項を守ってください。</p> <ul> <li>一般的に使用されているWebブラウザについて、各PC環境（WindowsまたはMac）の各最新版で正しく表示されるようにしてください<small>（具体的にはヘルプ「<a href="/entry/supported-browsers">はてなブログでの使用を推奨するWebブラウザ</a>」を参照してください）</small>。 <ul> <li>レスポンシブデザインのテーマでは、スマートフォン環境（AndroidおよびiOS）での表示も確認してください。</li> </ul></li> <li>ヘッダ・フッタを移動したり隠したりしないでください。また、ヘッダメニューより上部やフッタより下部に要素を置かないでください。（border等の装飾も含む）。</li> <li>はてなブログのすべての機能が正しく使えるデザインにしてください。 <ul> <li>やむを得ず一部の機能が利用できなかったり、隠れてしまう場合には、必ずテーマ ストアの「テーマの説明」欄にその旨を明記してください。</li> <li>機能が正常に使えないような場合には、選択されたライセンスの許諾事項に関わらず、はてなにて修正対応を行うことがございますのでご了承ください。</li> </ul></li> <li>テーマで使う画像のホスティングには、<a href="http://f.hatena.ne.jp/my">はてなフォトライフ</a>の利用を推奨します。</li> <li>広告を隠したり、広告に別の要素を重ねて表示しないでください。</li> <li>カテゴリーに対して「タグ」または「ハッシュタグ（<code>#</code>）」の装飾を用いることは避けてください。これらのモチーフは<a href="https://help.hatenablog.com/entry/tag">タグ</a>を表すときに使います。</li> <li>自分だけが使う目的で、テーマストアに非公開で投稿することは問題ありません。 <ul> <li>ただし、はてなブログ以外のウェブページからCSSを参照する目的で投稿したり、はてなブログのデザインテーマに関係のないCSSを投稿した場合、テーマの公開停止や削除処置をとることがあります。</li> </ul></li> </ul> </div> <div class="section"> <h3 id="デザインカスタマイズの仕様"><span id="design-customizing">デザインカスタマイズの仕様</span></h3> <div class="section"> <h4 id="背景画像">背景画像</h4> <ul> <li>ユーザーは「デザイン設定」の「カスタマイズ」タブの「背景画像」で、背景画像を設定できます。</li> <li>用意された画像の中からも選ぶことも、ユーザーがアップロードすることもできます。</li> <li>ユーザーが背景を設定すると、選択した画像に応じて「デザインCSS」欄に下記のようなスタイルが指定されます。</li> </ul><pre class="code" data-lang="" data-unlink="">/* <system section="background" selected="bg1"> */ body{ background-color:#3e2d1b; background-image:url('/images/theme/backgrounds/theme1.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center top; background-size:cover; } /* </system> */</pre> </div> <div class="section"> <h4 id="ヘッダ画像">ヘッダ画像</h4> <ul> <li>ユーザーは「デザイン設定」の「カスタマイズ」タブの「ヘッダ」で、自由に画像をアップロードできます。</li> <li>デフォルトで表示される画像のサイズは、高さが200px、横幅は最大1000pxです。</li> <li>ヘッダ画像を設定すると、<code>div#blog-title-inner</code>に下記のような専用のスタイルがインラインで指定されます。</li> </ul> <pre><div id="blog-title-inner" style="background-image: url('<em><span data-unlink="">http://example.com/20121206113746.jpg</span></em>'); background-position: center <em>ユーザーが「位置を調整する」で指定した表示領域のオフセット値</em> px;"> <h1 id="title"><a href="/"><em>はてなブログ開発検証用日記</em></a></h1> <h2 id="blog-description"><em>ブログのひとこと説明</em></h2> </div> </pre> <div class="section"> <h5 id="ヘッダ画像のクラス">ヘッダ画像のクラス</h5> <ul> <li>ヘッダ画像を指定すると、「表示設定」に応じて<code>body</code>タグに下記のクラスが付与されます。</li> <li>基本的にスタイルはあらかじめ調整されており、各テーマで細かな調整を行います。</li> </ul> <table> <tbody><tr> <th> ヘッダ画像の表示方法 </th> <th> bodyに付与されるクラス </th> </tr> <tr> <td> 画像なし </td> <td> なし </td> </tr> <tr> <td> 画像とテキストを表示 </td> <td> <code>header-image-enable</code> </td> </tr> <tr> <td> 画像だけ表示 </td> <td> <code>header-image-only</code> </td> </tr> </tbody></table> </div> </div> <div class="section"> <h4 id="HTMLを自由記述できる箇所">HTMLを自由記述できる箇所</h4> <ul> <li>ユーザーは「デザイン設定」の「カスタマイズ」タブの下記の欄で、自由にHTMLを書くことができます。</li> <li>この部分には特にスタイルを書く必要はありませんが、余白などを整えてもよいでしょう。</li> <li>ユーザーが記述したHTMLは、次のようなIDやクラスが付与された<code>div</code>内に置かれます。</li> </ul> <table> <tbody><tr> <th> HTMLを記述できる箇所 </th> <th> 表示されるページ </th> <th> 付与されるセレクタ </th> </tr> <tr> <td> タイトル下（ヘッダ） </td> <td> すべてのページ</td> <td><code>div#top-editarea</code></td> </tr> <tr> <td> 記事上（記事） </td> <td> 記事ページ</td> <td><code>div.entry-header-html</code></td> </tr> <tr> <td> 記事下（記事） </td> <td> 記事ページ</td> <td><code>div.entry-footer-html</code></td> </tr> <tr> <td> フッタ </td> <td> すべてのページ</td> <td><code>div#bottom-editarea</code></td> </tr> </tbody></table> </div> <div class="section"> <h4 id="Archiveページ"><span id="archive">Archiveページ</span></h4> <p>Archiveページは、「はてなブログのページ構成」で説明したように、過去の記事一覧を表示するページです。</p><p>Archiveページには、記事のサムネイルと本文冒頭が表示されます。以下にCSS記述例を挙げます。</p> <pre class="code" data-lang="" data-unlink="">.page-archive .archive-entries .archive-entry { margin-bottom: 3em; } .page-archive .archive-entries .date { position: static; } .page-archive .archive-entries .entry-title { font-size: 130%; margin: 0 0 .5em; } .page-archive .archive-entries .categories { margin: 0 0 .5em; } .page-archive .archive-entries .entry-description { font-size: 100%; margin: 0 0 1em; line-height: 1.5em; }</pre> </div> <div class="section"> <h4 id="ページャ"><span id="pager">ページャ</span></h4> <p>トップページと記事パーマリンクには、「過去の記事」「新しい記事（またはページ）」へのリンクとなるページャが表示されます。パーマリンクのページャには、記事タイトルが表示されます。以下にCSS記述例を挙げます。</p> <pre class="code" data-lang="" data-unlink="">.pager { margin: 1em 0; display: block; *zoom: 1; } .pager:after { display: block; visibility: hidden; font-size: 0; height: 0; clear: both; content: "."; } .pager .pager-prev { float: left; text-align: left; width: 45%; } .pager .pager-next { float: right; text-align: right; width: 45%; }</pre> </div> <div class="section"> <h4 id="ヘッダーメニュー">ヘッダーメニュー</h4> <p>ヘッダーメニューとは、ブログの上部にある、はてなブログロゴやメニューが並んでいるバーです。あらかじめスタイルが適用されていますので、デザインテーマでのスタイリングは不要です。</p> </div> <div class="section"> <h4 id="はてなブログPro">はてなブログPro</h4> <p>有料プラン「はてなブログPro」に加入しているユーザーのブログでは、はてなブログのヘッダーメニューとフッターリンクを表示しないようにできます。このときクラスなどに次のような変更があります。</p> <ul> <li>ヘッダーメニューの要素（<code>#globalheader-container</code>）が消える</li> <li>フッターリンクの要素（<code>footer#footer</code>）が消える</li> <li>消えた状態を表すため<code>globalheader-off</code>クラスが<code>body</code>に付与される</li> </ul> </div> </div> <div class="section"> <h3 id="関連項目">関連項目</h3> <ul> <li><a href="/entry/register">はてなブログを始める</a></li> <li><a href="/entry/theme/sample-entry">サンプルエントリー</a></li> <li><a href="/entry/design">ブログのデザインを変更する</a></li> <li><a href="/entry/supported-browsers">はてなブログでの使用を推奨するWebブラウザ</a></li> <li><a href="/entry/design/smartphone">ブログのデザインを変更する（スマートフォン）</a></li> <li><a href="/entry/hatena/fotolife">はてなフォトライフを使う</a></li> <li><a href="/entry/pro">はてなブログPro（有料プラン）</a></li> <li><a href="/entry/theme/install_theme">デザインテーマをインストールする</a></li> </ul> </div> <div class="section"> <h3 id="はてなブログの機能追加にともなうHTML構造の変更履歴"><span id="history">はてなブログの機能追加にともなうHTML構造の変更履歴</span></h3> <div class="section"> <h4 id="最新記事モジュールにサムネイル画像を表示2014年3月13日">最新記事モジュールにサムネイル画像を表示（<a href="http://staff.hatenablog.com/entry/2014/03/13/170215">2014年3月13日</a>）</h4> <ul> <li>サイドバーの編集記事モジュールにサムネイル画像を表示できるようにしました。</li> <li>CSSで装飾するには、<code>ul</code>要素の<code>urllist-with-thumbnails</code>クラスあるいは<code>img</code>要素の<code>recent-entries-entry-image</code>クラスを利用してください</li> </ul> </div> <div class="section"> <h4 id="Archiveページのサムネイル表示2014年2月28日">Archiveページのサムネイル表示（<a href="http://staff.hatenablog.com/entry/2014/02/28/184730">2014年2月28日</a>）</h4> <ul> <li>Archiveページに記事のサムネイルと本文の冒頭を表示するよう仕様を変更しました。</li> <li>この変更にともない、デザインテーマのCSSを修正していただく必要があります。（→ <a href="#archive">修正例を見る</a>）</li> </ul> </div> <div class="section"> <h4 id="ページャに記事タイトルを表示2014年2月28日">ページャに記事タイトルを表示（<a href="http://staff.hatenablog.com/entry/2014/02/28/184730">2014年2月28日</a>）</h4> <ul> <li>記事パーマリンクの「次の記事」「前の記事」といったページャに、それぞれの記事タイトルを表示するよう変更しました。</li> <li>この変更にともない、デザインテーマのCSSの修正が必要になる場合があります。（→ <a href="#pager">修正例を見る</a>）</li> </ul> </div> <div class="section"> <h4 id="記事上にHTMLを記述できる機能2014年2月5日">記事上にHTMLを記述できる機能（<a href="http://staff.hatenablog.com/entry/2014/02/05/162610">2014年2月5日</a>）</h4> <ul> <li>記事ページのタイトルと本文の間（記事上）にも、ユーザーが自由にHTMLを書ける場所を設置したため、「HTMLを自由記述できる箇所」の記述に追加しました。</li> </ul> </div> <div class="section"> <h4 id="続きを読む記法-2013年3月27日">続きを読む記法 (<a href="http://staff.hatenablog.com/entry/2013/03/27/144443">2013年3月27日</a>)</h4> <ul> <li>トップページに記事を途中まで表示できる「続きを読む」記法を追加しました。</li> <li>CSSで装飾するには、「続きを読む」<code>a</code>タグの<code>entry-see-more</code>というクラスを利用してください。</li> </ul> </div> </div> </div> <footer class="entry-footer"> <div class="entry-tags-wrapper"> <div class="entry-tags"> </div> </div> <p class="entry-footer-section track-inview-by-gtm" data-gtm-track-json="{"area": "finish_reading"}"> <span class="author vcard"><span class="fn" data-load-nickname="1" data-user-name="hatenablog">hatenablog</span></span> <span class="entry-footer-time"><a href="https://help.hatenablog.com/entry/theme/custom-theme"><time data-relative="" datetime="2013-02-20T09:31:53Z" title="2013-02-20T09:31:53Z" class="updated">2013-02-20 18:31</time></a></span> </p> <div class="social-buttons"> </div> <div class="customized-footer"> <div class="entry-footer-html"><div class="js-gtm-related-entries"></div></div> </div> </footer> </div> </article> <!-- rakuten_ad_target_end --> <!-- google_ad_section_end --> <div class="pager pager-permalink permalink"> <span class="pager-prev"> <a href="https://help.hatenablog.com/entry/customdomain" rel="prev"> <span class="pager-arrow">« </span> はてなブログを独自ドメインで利用する </a> </span> <span class="pager-next"> <a href="https://help.hatenablog.com/entry/theme/sample-entry" rel="next"> サンプルエントリー <span class="pager-arrow"> »</span> </a> </span> </div> </div> </div> <aside id="box1"> <div id="box1-inner"> </div> </aside> </div><!-- #wrapper --> <aside id="box2"> <div id="box2-inner"> <div class="hatena-module hatena-module-html"> <div class="hatena-module-title">基本操作</div> <div class="hatena-module-body"> <ul class="hatena-urllist"> <li><a href="/entry/register">はてなブログを始める</a></li> <li><a href="/entry/config">ブログを設定する</a></li> <li><a href="/entry/design">デザインを変更する</a></li> <li><a href="/entry/writing">記事を書く</a></li> <li><a href="/entry/reading">ブログを読む</a> </li></ul> </div> </div> <div class="hatena-module hatena-module-html"> <div class="hatena-module-title">使いこなす</div> <div class="hatena-module-body"> <ul class="hatena-urllist"> <li><a href="/entry/pro">はてなブログPro（有料プラン）</a></li> <li><a href="/entry/blog-group">ブログ グループ</a></li> <li><a href="/entry/theme/custom-theme">テーマ制作の手引き</a></li> <li><a href="/entry/app/android">Androidアプリ</a></li> <li><a href="/entry/app/iphone">iPhoneアプリ</a></li> <li><a href="/entry/guideline">ガイドライン</a></li> </ul> </div> </div> <div class="hatena-module hatena-module-entries-access-ranking" data-count="10" data-source="access" data-enable_customize_format="0" data-display_entry_image_size_width="100" data-display_entry_image_size_height="100" data-display_entry_category="0" data-display_entry_image="0" data-display_entry_image_size_width="100" data-display_entry_image_size_height="100" data-display_entry_body_length="0" data-display_entry_date="0" data-display_entry_title_length="20" data-restrict_entry_title_length="0" data-display_bookmark_count="0"> <div class="hatena-module-title"> よく読まれているヘルプ </div> <div class="hatena-module-body"> </div> </div> <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://staff.hatenablog.com/">はてなブログ開発ブログ（機能変更・お知らせ）</a> </li> <li> <a href="/entry/guideline">ガイドライン</a> </li> <li> <a href="http://htn.to/blogfaq">FAQとお問い合わせ</a> </li> </ul> </div> </div> </div> </aside> </div> </div> <div id="bottom-editarea"> <footer class="footer"> <address> Powered by <a href="http://hatenablog.com/">Hatena Blog</a> </address> </footer> </div> </div> </div> <div class="quote-box"> <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=""> <img src="https://cdn.blog.st-hatena.com/images/admin/quote/quote-x-icon.svg?version=add51ddc2d3c0599e98ea1239ac012" title="引用して投稿する"> </a> </div> </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 async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script 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/jquery.min.js?v=1.12.4&version=add51ddc2d3c0599e98ea1239ac012"></script> <script src="https://cdn.blog.st-hatena.com/js/texts-ja.js?version=add51ddc2d3c0599e98ea1239ac012"></script> <script id="vendors-js" data-env="production" src="https://cdn.blog.st-hatena.com/js/vendors.js?version=add51ddc2d3c0599e98ea1239ac012" crossorigin="anonymous"></script> <script id="hatenablog-js" data-env="production" src="https://cdn.blog.st-hatena.com/js/hatenablog.js?version=add51ddc2d3c0599e98ea1239ac012" crossorigin="anonymous" data-page-id="entry"></script> <script>Hatena.Diary.GlobalHeader.init()</script> </body></html>