はてなブログの設定とカスタマイズ内容を公開します（2019.7.4更新）

おはようございます。こんにちは。こんばんは。

借金エンジニアです。

はてなブログのカスタマイズを色々行ってきましたが、何をどうカスタマイズしたか覚えていないので、設定全てを公開したいと思います。ほとんど全てがどこからかコピペした設定のはずですので、ご自由にお使いください。

変更したら、この記事も更新するつもりですが、もし同じ設定にしたのに、上手くいかない場合はお問い合わせください。

テーマ
設定
デザイン（カスタマイズ）
変更履歴
おわりに

テーマ

テーマはどれを使用しているか、ばっちり覚えています。

codomisuさんが公開されている「Minimalism」を使用しています。はてなブログのテーマストアで公開されていますが、人気1位になっていますね。

テーマストア - はてなブログ

「Minimalism」のデモサイト minimalism-theme.hatenablog.com

シンプルで、すごくキレイなので、カスタマイズしなくても、かっこいいブログになります。カスタマイズしないほうが良い、かも。。。

設定

はてなブログの管理画面のメニューにある「設定」の内容です。

基本設定

参考にする項目なさそうですが、まずは基本設定です。

基本設定

about編集ページは下のようになっています。

about編集ページ

詳細設定

次は詳細設定です。（画質悪くて、見えませんね。。。あとで修正します）

詳細設定

独自ドメインにしたり、「headに要素を追加」に色々追加した記憶があります。
最近、HTTPS化も有効にしました。
「headに要素を追加」は次のようにしています。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-XXXXXXXXXXXXXXXX",
    enable_page_level_ads: true
  });
</script>

<style type="text/css">
/* 強調表示を蛍光ペン風に */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
/* bタグは太字 */
article b{
    font-weight:bold !important;
}
</style>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- Webフォント Source Code Pro -->
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

「google_ad_client:」はAdsenseのIDみたいなものだったはずなので、ご自身のIDを入れてください。

蛍光ペン風はこんな感じです。

bタグはこんな感じです。　これはデフォルトかな？？？

公開設定

設定の最後は公開設定です。

公開設定

デザイン（カスタマイズ）

設定の次は管理画面のメニューにある「デザイン」の中の「カスタマイズ」の内容です。
背景画像、背景色は初期設定のままなので、割愛します。

ヘッダ

まずは「ヘッダ」です。

ヘッダ

「タイトル下」は次のようになっています。

<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="https://www.shakkinengineer.com/"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/archive/category/%E5%80%9F%E9%87%91"><i class="fa fa-jpy" aria-hidden="true"></i> 借金</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/archive/category/%E3%83%80%E3%82%A4%E3%82%A8%E3%83%83%E3%83%88"><i class="fa fa-balance-scale" aria-hidden="true"></i> ダイエット</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/archive/category/R%E8%A8%80%E8%AA%9E"><i class="fa fa-graduation-cap" aria-hidden="true"></i> R言語</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/entry/2017/06/01/000000"><i class="fa fa-envelope-o" aria-hidden="true"></i> お問い合わせ</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/entry/2017/06/01/000000_1"><i class="fa fa-user-secret" aria-hidden="true"></i> プライバシーポリシー</a></div>
</div>
</nav>

<!-- ソースコード -->
<style type="text/css">
  .entry-content pre,.entry-content code{
    font-family: "Source Code Pro", sans-serif;
    font-size: 80%;
    background-color: #333;
    color: #eee;
  }
  /*ソースコード色*/
.synSpecial { color: #dc322f }
.synType { color: #b58900 }
.synComment { color: #657b83}
.synPreProc { color: #cb4b16 }
.synIdentifier { color: #268bd2 }
.synConstant { color: #2aa198 }
.synStatement { color: #859900 }
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
// 目次 表示/非表示ボタン
$(function(){
var $Contents = $(".table-of-contents")
$($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>');
$(".show-area").click(function(){
var $this = $(this);
if($Contents.css('display') == 'none'){
$Contents.slideDown(400),
$this.text("[非表示]");
}else{
$Contents.slideUp(400),
$this.text("[表示]")
};
});
});
</script>

ここではメニュー（HOME、借金、・・・のとこ）の設定、ソースコード貼り付けた時の色の設定、目次の表示／非表示ボタンが設定されているみたいですね。
メニューのURLやアイコンは各自設定ください。

記事

続いて「記事」です。

ソーシャルパーツは

ソーシャルパーツ

これのことですね。

「記事上」は次のようになっています。

<div class="shrbtn">
  <!-- HatenaBookmark -->
  <a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn">
    <span class="htvcenter" style="line-height: 1.6;">
      <i class="blogicon-bookmark" style="font-size:22px"></i>
    </span>
  </a>
  <!-- twitter -->
  <a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-twitter"></i>
  </a>
  <!-- facebook -->
  <a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-facebook"></i>
  </a>
  <a href="https://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-get-pocket"></i>
  </a>
  <!-- feedly -->
  <a href="https://feedly.com/i/subscription/feed/http://ブログURL/feed" target="_blank" class="share_btn">
    <i class="fa fa-rss"></i>
  </a>
</div> 

<div align="center"><br>
スポンサードリンク<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 借金エンジニア336×280 記事上部 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br>
</div>

「記事上」では、SNSのボタン、Adsenseの設定をしているようです。
Adsenseの広告を掲載する場合、「スポンサードリンク」などを広告であることを明示する必要がありますので、お忘れないように。

「記事下」は次のようになっています。

<div class="shrbtn">
  <!-- HatenaBookmark -->
  <a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn">
    <span class="htvcenter" style="line-height: 1.6;">
      <i class="blogicon-bookmark" style="font-size:22px"></i>
    </span>
  </a>
  <!-- twitter -->
  <a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-twitter"></i>
  </a>
  <!-- facebook -->
  <a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-facebook"></i>
  </a>
  <a href="https://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-get-pocket"></i>
  </a>
  <!-- feedly -->
  <a href="https://feedly.com/i/subscription/feed/http://ブログURL/feed" target="_blank" class="share_btn">
    <i class="fa fa-rss"></i>
  </a>
</div> 

<div align="center"><br>
スポンサードリンク<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 借金エンジニア336×280 記事下１ -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br>
</div>

<script>//<![CDATA[
window.Shisuh = (window.Shisuh) ? window.Shisuh : {};Shisuh.topUrl='https://www.shakkinengineer.com';Shisuh.type='Hatebu';Shisuh.headerText='もしよろしければ、こちらの記事もお読みいただけると喜びます！';Shisuh.alg='Related';Shisuh.showBottom='1';Shisuh.insertAfterScript='1';Shisuh.showInsert='1';Shisuh.originalTemplateTypeWide='Panel';Shisuh.originalTemplateTypeNarrow='Panel';
//]]></script><script id="ssRelatedPageSdk" type="text/javascript" charset="utf-8" src="https://www.shisuh.com/djs/relatedPageFeed/"></script>

「記事下」は「記事上」と同じSNSのボタンとAdsense、あと「記事上」には無い、合わせて読んで欲しい他の記事へのリンクを掲載しています。
合わせて読んで欲しい他の記事は「Milliard」というサービス（プラグイン？）を使用しています。

corp.shisuh.com

パンくずリストは

パンくずリスト

これですね。

サイドバー

続きまして、「サイドバー」の設定です。

サイドバー設定20190610

表示がどうなるかは、この記事にもサイドバーが表示されていますので、そちらを確認してください。
それでは、それぞれの設定を見ていきましょう。

About

「About」はプロフィール」モジュールのタイトルを「About」にしたものです。

About設定

スポンサードリンク

「スポンサードリンク」は「HTTP」モジュールを使用しています。「HTTP」モジュールは「記事上」などのようにHTTPのコードを書き込んで、自由にカスタマイズができるモジュールです。

「スポンサードリンク」では次のように設定しています。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 借金エンジニアサイド -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Adsenseの設定ですね。
「記事上」「記事下」と同じように広告を表示しています。

注目記事

アクセス数上位の記事が掲載されます。

注目記事20190610

Search

「Search」はそのままですが「検索」モジュールです。
設定はタイトルだけなので割愛します。

History

「History」は「月別アーカイブ」モジュールです。
設定はタイトルと表示形式（リスト形式とカレンダー形式）だけなので、これも割愛します。
本ブログは「リスト形式」にしています。

カテゴリー

これはそのままで「カテゴリー」モジュールです。
設定内容は割愛します。

Latest

これもそのままで、「最新記事」モジュールです。
「高度なカスタマイズ」もできるようですが、していませんので、割愛します。

（タイトル無し）

サイドバーのカテゴリーをタグクラウド風にするための設定になります。＜HTML＞モジュールを選び、タイトルは何も記入せずに、HTML記入欄に下記を記入します。

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
// タグクラウドもどき
$(function() {
  var categories = $(".hatena-module-category ul li a");
  $.each(
    categories,
    function(index, domEle) {
      var ele = $(domEle);
      var texts = $.trim(ele.text());
      // リンクテキストから記事件数を取得
      var count1 = texts.match(/\([^\(\s +]+\)/);
      var count2 = count1[0].match(/\d+/);
      // 大きさ指定 Start
      if(count2 >= 10) ele.css("font-size", "250%");
      else if(count2 >= 5) ele.css("font-size", "200%");
      else if(count2 >= 3) ele.css("font-size", "150%");
      else if(count2 >= 2) ele.css("font-size", "120%");
      else ele.css("font-size", "90%");
      // 大きさ指定 End
      // リンクテキストから記事件数を除去
      ele.text($.trim(texts.replace(/\([^\(\s +]+\)/, '')));
      // ツールチップに記事件数含めて表示する（title要素）
      ele.attr("title", texts);
    }
  );
});
</script>

フッター

続きまして、「フッター」です。
「フッター」はHTMLを直接記入します。
次のようになっています。

<footer id="footer">
    <div id="footer-menu">
        <div id="footer-blog-title-content">
      <a href="https://www.shakkinengineer.com/">借金エンジニアのささやき</a>
    </div>
      <nav>
        <div class="footer-links">
          <ul>
            　<li>
                 <a href="https://www.shakkinengineer.com/entry/2017/06/01/000000">お問い合わせ</a>
             </li>
             <li>
                 <a href="https://www.shakkinengineer.com/entry/2017/06/01/000000_1">プライバシーポリシー</a>
             </li>
          </ul>
       　　</div>
    　　　</nav>
    　　　<p class="copyright">© 2018 借金エンジニアのささやき All rights reserved.</p>
    </div>
</footer>

<div id="page-top">    
 <a id="move-page-top"><i class="blogicon-chevron-up fa-3x"></i></a>
</div>

<script>

  $(window).scroll(function(){
    var now = $(window).scrollTop();
    if(now > 500){
      $("#page-top").fadeIn("slow");
    }else{
      $("#page-top").fadeOut("slow");
    }
  });
  $("#move-page-top").click(function(){
    $("html,body").animate({scrollTop:0},"slow");
  });
</script>

その名の通りフッターの設定ですが、TOPへ戻るボタンもここに設定しています。

｛｝デザインCSS

最後に「デザインCSS」です。
表示・デザインや動きに関する設定はまとめてここに設定されています。
「デザインCSS」の設定は次のようになっています。

/* <system section="theme" selected="8599973812270629022"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812270629022.css");
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */
@media screen and (max-width: 640px){
  #blog-title #title {
      font-size: 21px !important;
  }
}

h3 {
background: #FF8C00;/*背景色*/
color: #FFFFFF;
padding: 0.5em;/*文字まわり（上下左右）の余白*/
}

/*h4見出し*/
h4 {
position: relative;
padding-left: 25px;
}

h4:before {
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 15px #FFA500;
}
h4:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px #FFA500;
}


/*h5見出し*/
h5 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}

h5:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #FFA500; /*アイコン色*/
}


/*h6見出し*/
h6{
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}

h6:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ POINT';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}

/*フォント*/
@import url(https://fonts.googleapis.com/css?family=Quicksand);
p,h1,h2,h3,h4,h5,h6,body,.entry-title{
    font-family:'Quicksand', sans-serif;
}

.table-of-contents{
    display:none
}

.show-area{
  cursor: pointer;
  color: #47a1e5
}

/* フッター */
#bottom-editarea {
    width: 100%;
    margin: 0 auto;
    background: #7f8c8d;
    padding: 0;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#footer {
    text-align: center;
    color: #fff;
    background: #fff;
    width: 100%;
    margin: 0;
    padding: 2em 40px 1em 40px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
    text-align: center;
    font-size: 80%;
}
#footer-blog-title-content a {
    font-size: 25px;
    font-weight: 100;
    color: orange;
}
.footer-links ul {
    list-style: none;
    padding: 0;
}
.footer-links ul li {
    display: inline-block;
    padding: 0 6px;
    font-size: 14.5px;
    box-sizing: border-box;
}
.copyright {
    font-size: 10px;
    color: orange;
}

/* ページトップへ戻るボタン */
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
}

#move-page-top{
  color:rgba(0,0,0,0.6);
  text-decoration:none;
  display:block;
  cursor:pointer;
}

/* ページトップへ戻るボタン：ホバー時 */
#move-page-top:hover{
  color:rgba(0,0,0,0.8);
}

/* 引用文のデザイン*/

.entry-content blockquote {
    position: relative;
    padding: 5px 10px 5px 32px;
    box-sizing: border-box;
    font-style: italic;
    background: #ffebcd;
    border-bottom: solid 3px #ffbe5d;
}

.entry-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: -15px;
    width: 40px;
    height: 30px;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    color: #FFF;
    font-size: 18px;
    line-height: 30px;
    background: #ffbe5d;
    font-weight: 900;
}

.entry-content blockquote:after{
    position: absolute;
    content: '';
    top: 40px;
    left: -15px;
    border: none;
    border-bottom: solid 8px transparent;
    border-right: solid 15px #daaa64;
}

.entry-content blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

.entry-content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/* フォントサイズを16pxに変更 */
.entry-content p {font-size: 16px;}

@media screen and (max-width: 480px){.entry-content p {font-size: 16px;}}

/* サイドバーのカテゴリーの表示をタグクラウド風に変更 */
.hatena-module-category .hatena-module-body ul li {
  display: inline-block;
  margin: 0 0.3em 0 0;
  padding: 0em;
  border-bottom: 0px;
  transition: 0.2s;
}
.hatena-module-category .hatena-module-body ul li:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  z-index: 20;
}

/* hover時に画像を浮かばせる */
.entry-content img {
    max-width: 100%; box-shadow: 0 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.entry-content img:hover {
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    -webkit-transition: all 0.3s; transition: all 0.3s;
}


/* シンタックスハイライト設定 */
pre.code{
    line-height:1.7;
    margin: 0 0 1.5em 0;
    padding: 1.6em 1em 1em;
    background: #333;
    color: #eee;
    position: relative;
    border-radius: 0;
}
pre.code::before{
    line-height:1.2;
    content: attr(data-lang);
    position: absolute;
    top: 0;
    left: 0;
    background: #666;
    padding: 0 0.8em;
}
pre.lang-html::before{
    background: #00796b;
    color: #e0f2f1;
}
pre.lang-css::before{
    background: #ffa000;
    color: #fff8e1;
}
.entry-content pre.code{
    font-size:16px;
    background-color: #073642;
    color: #93a1a1;
}
.synSpecial { color: #dc322f }
.synType { color: #b58900 }
.synComment { color: #657b83}
.synPreProc { color: #cb4b16 }
.synIdentifier { color: #268bd2 }
.synConstant { color: #2aa198 }
.synStatement { color: #859900 }

/* 2018-06-02 */
 /*
 * 読者になるボタン
 */

/*共通の読者ボタンの設定*/
.hatena-follow-button {
  font-size:15px;                /*文字の大きさ*/
  border: 0px !important;        /*枠線なし*/
  width: 100px;                  /*ボタンの横幅*/
  height: 30px;                  /*ボタンの縦幅*/
  text-align: center;            /*文字を左右の中心に*/
  vertical-align: middle;        /*文字を上下の中心に*/
  padding: 4px 10px !important;  /*上下に4px 左右に10pxの隙間*/
}
/*読者の人 通常時*/
.hatena-follow-button.subscribing {
  box-shadow: 0 2px 4px rgba(0,0,0,.4);   /*影をつける*/
  background-color:white;                 /*ボタンの色*/
  border: 1.2px solid #a9a9a9 !important; /*薄く枠線を描いてあります*/
}
/*読者の人 マウスを重ねたとき*/
.hatena-follow-button.subscribing.hover {
  width:100px;                  /*調整のためいれてます*/
  top: 2px;                     /*ボタンを下げる*/
  box-shadow: none;             /*影をなくす*/
}
/*読者じゃない人 通常時*/
.hatena-follow-button.unsubscribing {
  color:white !important;                /*文字の色*/
  background: #3F4146;                   /*ボタンの色*/
  box-shadow: 0 2px 4px rgba(0,0,0,.4);  /*影をつける*/
}
/*読者じゃない人 マウスを重ねたとき*/
.hatena-follow-button.unsubscribing.hover{
  background: :#F57A8F;         /*ボタンの色*/
  color : white !important;     /*文字の色*/
  margin-top: 2px;              /*ボタンを下げる*/
  box-shadow: none;             /*影をなくす*/
}
.hatena-follow-button-box .subscription-count-box {
    margin: 0 0 0 6px!important;
    top:-2px;
}
/*読者人数の部分*/
.hatena-follow-button-box .subscription-count {
  height: 26px;
  line-height: 26px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding:1px 10px 1px 10px; 
}

一番上の「@import」は何かテーマを適用すると自動で入ります。
右にあるURLにアクセスすると、使用しているテーマがどんな設定になっているか分かるので、CSSの勉強になりますね。

あとは、見出しのデザインだったり、フッターやTOPへ戻るボタンのデザインなんかが設定されています。

変更履歴

2019.7.4

コードの表示を変更（変更箇所：｛｝デザインCSS）

読者になるボタンを変更（変更箇所：｛｝デザインCSS）

読者になるボタンを記事の中などに入れたい場合、入れたい場所に下記をコピペしてください。

<div class="hatena-module hatena-module-profile">
  <!-- 読者になるボタン-->
  <div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box reader-button-inner">
    <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>