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":2666,"date":"2019-02-05","entry_id":"98012380858506252","first_category":"\u30c7\u30b6\u30a4\u30f3\u30ab\u30b9\u30bf\u30de\u30a4\u30ba","hour":"15","title":"\u30d6\u30ed\u30b0\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u5909\u66f4\u3059\u308b\uff08\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\uff09","uri":"https://help.hatenablog.com/entry/design/customize"},"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/design/customize"> <meta itemprop="name" content="ブログのデザインを変更する（カスタマイズ） - はてなブログ ヘルプ"> <meta itemprop="image" content="https://cdn.image.st-hatena.com/image/scale/6d160a4980508f5777bfc0c4bcb44645ce8f48b4/backend=imagemagick;height=1300;version=1;width=1300/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fdefault_entry_og_image%2F62150696%2F15142248443714"> <meta property="og:title" content="ブログのデザインを変更する（カスタマイズ） - はてなブログ ヘルプ"> <meta property="og:type" content="article"> <meta property="og:url" content="https://help.hatenablog.com/entry/design/customize"> <meta property="og:image" content="https://cdn.image.st-hatena.com/image/scale/6d160a4980508f5777bfc0c4bcb44645ce8f48b4/backend=imagemagick;height=1300;version=1;width=1300/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fdefault_entry_og_image%2F62150696%2F15142248443714"> <meta property="og:image:alt" content="ブログのデザインを変更する（カスタマイズ） - はてなブログ ヘルプ"> <meta property="og:description" content="このページでは、はてなブログのデザインの「カスタマイズ」設定について解説します。"> <meta property="og:site_name" content="はてなブログ ヘルプ"> <meta property="article:published_time" content="1549346780"> <meta property="article:tag" content="デザインカスタマイズ"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://cdn.image.st-hatena.com/image/scale/6d160a4980508f5777bfc0c4bcb44645ce8f48b4/backend=imagemagick;height=1300;version=1;width=1300/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fdefault_entry_og_image%2F62150696%2F15142248443714"> <meta name="twitter:title" content="ブログのデザインを変更する（カスタマイズ） - はてなブログ ヘルプ"> <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%2Fhelp.hatenablog.com%2Fentry%2Fdesign%2Fcustomize"> <meta name="twitter:site" content="@hatenablog"> <meta name="description" content="このページでは、はてなブログのデザインの「カスタマイズ」設定について解説します。"> <meta name="keywords" content="はてな,ブログ,ヘルプ"> <script id="embed-gtm-data-layer-loader" data-data-layer-page-specific="{"hatenablog":{"blogs_permalink":{"is_blog_sleeping":"false","is_author_pro":"true","entry_afc_issued":"false","has_related_entries_with_elasticsearch":"false","blog_afc_issued":"false"}}}"> (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%2Fdesign%2Fcustomize&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%2Fdesign%2Fcustomize&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:08+09:00","datePublished":"2019-02-05T15:06:20+09:00","headline":"ブログのデザインを変更する（カスタマイズ）","image":["https://cdn.user.blog.st-hatena.com/default_entry_og_image/62150696/15142248443714"]}</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-2800 words-200 mode-hatena entry-odd" id="entry-98012380858506252" data-keyword-campaign="" data-uuid="98012380858506252" 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/2019/02/05" rel="nofollow"> <time datetime="2019-02-05T06:06:20Z" title="2019-02-05T06:06:20Z"> <span class="date-year">2019</span><span class="hyphen">-</span><span class="date-month">02</span><span class="hyphen">-</span><span class="date-day">05</span> </time> </a> </div> <h1 class="entry-title"> <a href="https://help.hatenablog.com/entry/design/customize" 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><style>.entry-content .hatena-fotolife {border:1px solid #dfe5e7}</style></p><p>「<b>カスタマイズ</b>」ページでは、ブログの背景など細かい部分を個別に編集できます。「カスタマイズ」ページへは、<b><a href="https://blog.hatena.ne.jp/my/config/design/detail">デザイン設定</a>画面</b>の左上、真ん中のアイコン（スパナアイコン）を押せば、移動できます。<br> <span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145133.png" width="499" height="148" loading="lazy" title="" class="hatena-fotolife" style="width:300px" itemprop="image"></span></p><p>全体のデザインを変更したい場合は、ヘルプ「<a href="http://help.hatenablog.com/entry/design">ブログのデザインを変更する</a>」を、スマートフォンで表示されるデザインを設定したい場合は、ヘルプ「<a href="http://help.hatenablog.com/entry/design/smartphone">ブログのデザインを変更する（スマートフォン）</a>」を参照してください。</p> <ul class="table-of-contents"> <li><a href="#カスタマイズ設定の操作">カスタマイズ設定の操作</a><ul> <li><a href="#ブログの背景">ブログの背景</a><ul> <li><a href="#背景画像">背景画像</a></li> <li><a href="#背景色">背景色</a></li> </ul> </li> <li><a href="#ヘッダ">ヘッダ</a></li> <li><a href="#記事">記事</a></li> <li><a href="#サイドバー">サイドバー</a></li> <li><a href="#フッタ">フッタ</a></li> <li><a href="#デザインCSS">デザインCSS</a></li> </ul> </li> <li><a href="#注意事項">注意事項</a></li> <li><a href="#関連記事">関連記事</a><ul> <li><a href="#さまざまなサイドバーモジュール">さまざまなサイドバー・モジュール</a></li> </ul> </li> <li><a href="#関連記事はてなブログ開発ブログ">関連記事（はてなブログ開発ブログ）</a></li> </ul> <div class="section"> <h3 id="カスタマイズ設定の操作">カスタマイズ設定の操作</h3> <p>設定項目ごとに操作方法を説明します。</p> <div class="callout-info"> 変更した内容は「変更を保存する」ボタンを押すまで反映されません。</div> <div class="section"> <h4 id="ブログの背景">ブログの背景</h4> <p>「<b>背景画像</b>」と「<b>背景色</b>」タブを編集することで、背景を好みのスタイルに変更できます。</p> <div class="section"> <h5 id="背景画像">背景画像</h5> <ul> <li>ブログの背景画像を切り替えます。 <ul> <li>好みの画像をクリックすれば、背景画像が変わります。</li> </ul></li> </ul><p><span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145137.png" width="493" height="400" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"></span></p> <ul> <li>オリジナルの画像をアップロードすることもできます。 <ul> <li>画像をアップロードする場合は「<b>ファイルを選択</b>」ボタンを押して、自分の端末から画像ファイルを選択してください。</li> <li>「<b>現在の画像</b>」としてアップロードした画像が表示されたら画像の投稿は完了です。</li> <li>続いて、<b>背景画像の表示設定</b>を選択してください。<span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145151.png" width="470" height="258" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"></span> <ul> <li>「<b>表示</b>」では、画像を配置する位置を選択してください。</li> <li>「<b>繰り返し</b>」では、画像の繰り返し設定を選べます。</li> <li>「<b>スクロール</b>」では、背景画像のスクロールの可否が選べます。</li> </ul></li> </ul></li> </ul> </div> <div class="section"> <h5 id="背景色">背景色</h5> <ul> <li>ブログの背景色を選択できます。 <ul> <li>好みの背景色をクリックすれば、背景色が変わります。</li> </ul></li> </ul><p><span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145146.png" width="490" height="189" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"></span><br> </p> </div> </div> <div class="section"> <h4 id="ヘッダ">ヘッダ</h4> <p>「<b>ヘッダ画像</b>」と「<b>ブログタイトル下</b>」を編集できます。<br> <span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145140.png" width="1024" height="632" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>「ヘッダ画像」では、ヘッダに表示する画像をアップロードできます。 <ul> <li>画像をアップロードする場合は「<b>ファイルを選択</b>」ボタンを押して、自分の端末から画像ファイルを選択してください。 <ul> <li>画像の推奨サイズは、「<a href="https://help.hatenablog.com/entry/design/header-image">ヘッダ画像の推奨サイズ</a>」をご覧ください。</li> </ul></li> <li>画像の表示位置や、ブログタイトルのテキストを重ねて表示するかどうかを設定可能です。 <ul> <li>ブログ名を含むロゴを画像として使用するには、「<b>画像だけ表示</b>」を選択します。</li> </ul></li> </ul></li> </ul><p><span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145217.png" width="310" height="146" loading="lazy" title="" class="hatena-fotolife" style="width:270px" itemprop="image"></span></p> <ul> <li>「ブログタイトル下」では、ヘッダのタイトル下にHTMLコードを自由に配置できます。 <ul> <li>詳細は「<a href="http://help.hatenablog.com/entry/blogparts">ブログパーツやソーシャルプラグインを配置する</a>」を参照してください。</li> </ul></li> </ul> </div> <div class="section"> <h4 id="記事">記事</h4> <p>ブログ内にある記事ページ（一つの記事だけが表示されるページ）を編集できます。<br> <span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145208.png" width="916" height="959" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>「<b>記事ページをプレビュー</b>」をオンにすると、右画面が記事を1つだけ表示するページに変わり、変更点がわかりやすくなります。 <ul> <li><span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145156.png" width="532" height="186" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"></span></li> </ul></li> <li>ソーシャルパーツ(記事をSNSなどにシェアするボタン)を表示できます。</li> <li>記事上下にHTMLを自由に記述できます。 <ul> <li>ソーシャルパーツや記事上下について、詳細は「<a href="https://help.hatenablog.com/entry/design/entry">記事ごとにブログパーツやソーシャルプラグインを配置する</a>」を参照してください。</li> </ul></li> <li>関連する記事を表示したい場合は「<b>関連記事を記事下に表示する</b>」を選択してください。 <ul> <li><span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145220.png" width="542" height="212" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"></span></li> </ul></li> <li>パンくずリストを設定する場合は、「<b>記事ページにパンくずリストを表示する</b>」を選択してください。</li> <li>最終更新日を表示することができます。詳細は「<a href="https://help.hatenablog.com/entry/entry/last-updated">記事に最終更新日を表示する</a>」を参照してください。 <ul> <li><span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20230801/20230801144129.png" width="368" height="259" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"></span></li> </ul></li> </ul> </div> <div class="section"> <h4 id="サイドバー">サイドバー</h4> <p>サイドバーを編集できます。サイドバーの位置はデザインテーマごとに異なります。 <br> 下の画像で利用しているデザインテーマでは、ブログ下部にサイドバーが設置されています。<br> <span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145203.png" width="878" height="472" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>「<b>検索</b>」や「<b>最近記事</b>」などのモジュールを配置できます。 <ul> <li>詳細は「<a href="http://help.hatenablog.com/entry/sidebarmodules">サイドバーにモジュールを設置する</a>」を参照してください。</li> </ul></li> <li>サイドバーの「HTML」モジュールでは、HTMLコードを自由に配置できます。 <ul> <li>詳細は、「<a href="http://help.hatenablog.com/entry/sidebarmodule/blogparts">サイドバーにブログパーツやプラグインを配置する</a>」を参照してください。</li> </ul></li> </ul> </div> <div class="section"> <h4 id="フッタ">フッタ</h4> <p>ブログのフッタを編集できます。<br> <span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145214.png" width="542" height="97" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>ブログ全体の下部にHTMLコードを自由に配置できます。 <ul> <li>詳細は「<a href="http://help.hatenablog.com/entry/blogparts">ブログパーツやソーシャルプラグインを配置する</a>」を参照してください。</li> </ul></li> </ul> </div> <div class="section"> <h4 id="デザインCSS">デザインCSS</h4> <p><span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20190205/20190205145159.png" width="602" height="590" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"></span><br> </p> <ul> <li>デザインをカスタマイズするCSSを記述できます。 <ul> <li>詳細は「<a href="http://help.hatenablog.com/entry/design/design-css">デザインCSSを記述する</a>」を参照してください。</li> </ul></li> <li>独自に作成したデザインテーマも設定できます。 <ul> <li>独自のデザインテーマを作成する場合は「<a href="http://help.hatenablog.com/entry/theme/custom-theme">はてなブログテーマ制作の手引き</a>」を参照してください。</li> </ul></li> </ul> </div> </div> <div class="section"> <h3 id="注意事項">注意事項</h3> <ul> <li>「ブログタイトル下」などHTMLを自由に記述できる場所にはWeb広告を設置することもできますが、<a href="/entry/commercial-guidelines">はてなブログ個人営利利用ガイドライン</a>をお守りいただいた上でご利用ください。</li> </ul> </div> <div class="section"> <h3 id="関連記事">関連記事</h3> <ul> <li><a href="http://help.hatenablog.com/entry/blogparts">ブログパーツやソーシャルプラグインを配置する</a></li> <li><a href="http://help.hatenablog.com/entry/sidebarmodules">サイドバーにモジュールを設置する</a></li> <li><a href="http://help.hatenablog.com/entry/sidebarmodule/blogparts">サイドバーにブログパーツやプラグインを配置する</a></li> <li><a href="/entry/design/entry">記事ごとにブログパーツやソーシャルプラグインを配置する</a></li> <li><a href="/entry/theme/install_theme">デザインテーマをインストールする</a></li> </ul> <div class="section"> <h4 id="さまざまなサイドバーモジュール">さまざまなサイドバー・モジュール</h4> <ul> <li><a href="/entry/sidebarmodule/profile">サイドバーに「プロフィール」モジュールを表示する</a></li> <li><a href="/entry/sidebarmodule/recententry">サイドバーに「最新記事」を表示する</a></li> <li><a href="/entry/sidebarmodule/hotentry">サイドバーに「注目記事」モジュールを表示する</a></li> <li><a href="/entry/sidebarmodule/category">サイドバーに「カテゴリー」モジュールを設置する</a></li> <li><a href="/entry/sidebarmodule/blogparts">サイドバーにブログパーツやプラグインを配置する</a></li> <li><a href="http://help.hatenablog.com/entry/sidebarmodules/advanced">サイドバーに表示する記事一覧モジュールの高度なカスタマイズ</a></li> </ul> </div> </div> <div class="section"> <h3 id="関連記事はてなブログ開発ブログ">関連記事（はてなブログ開発ブログ）</h3> <ul> <li>2018-09-25<a href="http://staff.hatenablog.com/entry/2018/09/25/162000">記事ページの「パンくずリスト」表示をPC、スマートフォンでそれぞれで表示・非表示を選べるようにしました</a></li> <li>2018-03-22<a href="http://staff.hatenablog.com/entry/2018/03/22/170000">サイドバーに表示するカテゴリーの数を設定できるようにしました</a></li> <li>2017-06-13<a href="http://staff.hatenablog.com/entry/2017/06/13/164000">記事下に「関連記事」を表示します</a></li> <li>2017-04-10<a href="http://staff.hatenablog.com/entry/2017/04/10/113000">サイドバーの記事一覧モジュールで、変数を用いた高度なカスタマイズをできるようにしました</a></li> <li>2014-06-26 <a href="http://staff.hatenablog.com/entry/2014/06/26/165905"><img src="https://cdn-ak.favicon.st-hatena.com/?url=http%3A%2F%2Fstaff.hatenablog.com%2Fentry%2F2014%2F06%2F26%2F165905" alt="" class="http-favicon"></a><a href="http://staff.hatenablog.com/entry/2014/06/26/165905">デザイン設定に、27種類の新しい背景画像を追加しました</a></li> <li>2012-08-08 <a href="http://staff.hatenablog.com/entry/2012/08/08/141335"><img src="https://cdn-ak.favicon.st-hatena.com/?url=http%3A%2F%2Fstaff.hatenablog.com%2Fentry%2F2012%2F08%2F08%2F141335" alt="" class="http-favicon"></a><a href="http://staff.hatenablog.com/entry/2012/08/08/141335">背景画像の繰り返しの設定など、デザイン・カスタマイズ機能を強化しました</a></li> <li>2012-08-01 <a href="http://staff.hatenablog.com/entry/2012/08/01/150208"><img src="https://cdn-ak.favicon.st-hatena.com/?url=http%3A%2F%2Fstaff.hatenablog.com%2Fentry%2F2012%2F08%2F01%2F150208" alt="" class="http-favicon"></a><a href="http://staff.hatenablog.com/entry/2012/08/01/150208">ブログの背景画像をアップロードできるようにしました</a></li> <li>2012-07-04 <a href="http://staff.hatenablog.com/entry/2012/07/04/144813"><img src="https://cdn-ak.favicon.st-hatena.com/?url=http%3A%2F%2Fstaff.hatenablog.com%2Fentry%2F2012%2F07%2F04%2F144813" alt="" class="http-favicon"></a><a href="http://staff.hatenablog.com/entry/2012/07/04/144813">ブログのタイトル部分に画像を設定できるようにしました</a></li> <li>2012-03-16 <a href="http://staff.hatenablog.com/entry/2012/03/16/125126"><img src="https://cdn-ak.favicon.st-hatena.com/?url=http%3A%2F%2Fstaff.hatenablog.com%2Fentry%2F2012%2F03%2F16%2F125126" alt="" class="http-favicon"></a><a href="http://staff.hatenablog.com/entry/2012/03/16/125126">4つの新しいデザインテーマと、9つの新しい背景画像を追加しました</a></li> </ul> </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/design/customize"><time data-relative="" datetime="2019-02-05T06:06:20Z" title="2019-02-05T06:06:20Z" class="updated">2019-02-05 15:06</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/external/google_adsense_installation" rel="prev"> <span class="pager-arrow">« </span> Googleアドセンスの設置をする </a> </span> <span class="pager-next"> <a href="https://help.hatenablog.com/entry/external/google_adsense" rel="next"> Googleアドセンスの申請をする <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>