気楽に生きよう!

うつ病、野球、エンタメ 色々喋るよ

はてなブログスマホ画面に複合メニューバーをつけるカスタマイズを拡張してみた

f:id:nuruta:20170312013233j:plain

はじめに

ゆきひーさんのカスタマイズを基にしてます。

メニューバー導入したよ

殆ど誰にも見られてないカスタマイズ記事、はっじまるよ~♪
メインブログの方に、ゆきひーさんのメニューバーを導入しました。
www.yukihy.com
自分なりにカスタマイズしましたので、その辺りの事を纏めておきます。

一応コピペだけで導入できるようにしてますが、やや複雑です。
もしやってみようという方がいらっしゃったら、お手数ですが、慎重にお願いします。

レスポンシブデザイン専用です

このカスタマイズは、レスポンシブデザインテーマ専用になります。
レスポンシブデザインって何ぞやという方は、お手元のスマホからご自身のブログへアクセスしてみて下さい。
パソコンで閲覧してる場合は、ブラウザの横幅をスマホと同じような大きさまで狭めて下さい。

どうでしょうか。

スマホとパソコンでデザインが同じならば、レスポンシブデザインです。
デザインが変わって、見た目が変わったならば、基本的に対象外となります。ごめんなさい。
(知識があれば簡単に導入できますが、今回は説明を省かせて頂きます。)

導入事例

導入事例です。
記事ページにのみメニューバーを出るようにしています。
スマホで下記ブログ(外部です。僕のメインブログになります)にアクセスして、適当に記事ページを見て下さい。
nuruta.hatenablog.com

f:id:nuruta:20180601004514j:plainf:id:nuruta:20180601004533j:plain

バックアップ【要対応】

必ず事前にバックアップを取って置いて下さい。
【デザイン】⇒【カスタマイズ】と進んで、【記事】をクリック。
【記事下】をクリックして、その中のコードを全部コピー。
メモ帳やサクラパッドなどに貼りつけて、名前を付けて保存して下さい。
「記事下コードカスタマイズ前」とか分かり易い名前を付けてね。


続いて、【デザインCSS】をクリック。
同様にコードを全てコピー。
新しくメモ帳を立ち上げて、貼りつけ。
名前を付けて保存して下さいませ。


「記事下コード」と「CSS」、2つのバックアップを取ったら準備終了です。

【必須作業】事前準備

4つ新規でメモ帳を立ち上げて下さい。
それぞれに以下のように名前を付けます。

  1. メニューコード
  2. トグルコード
  3. scriptコード
  4. CSSコード

出来ましたか?
続いて、それぞれのメモ帳の先頭に以下のコードを貼りつけます。
(以下、断りが無い限り文末にどんどんコードを付け足していく形になります。文頭にコピペしないで下さいませ)

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<div class="btn-area">
トグルコード

メモ帳「トグルコード」に以下をコピペ。

<!--固定メニューバー-->
<div id="menu">
<div class="toggle-contents">
cssコード

メモ帳「cssコード」に以下をコピペ。

/*********************************************************/
/*   スマホメニュー                                      */
/*********************************************************/
#menu{
   display:none;
}
@media only screen and (max-width: 480px) {
#menu{
    display:inline;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 20;
}
.toggle-content{
    display: none;
    position: fixed;
    bottom: 50px;
    color:#000; /*トグルメニューの文字色*/
    background: #d3d3d3; /*トグルメニューの背景色*/
    width: 100%;
}
.toggle-content .toggle-btn2{
  font-size: 1.4em;
  width:100%;
  display:block;
  text-align: center;
  color: #000; /*閉じるボタンの文字色*/
  background: #a9a9a9; /*閉じるボタンの文字色*/
}
scriptコード

お馴染みjqueryの呼び出しコードです。
1度でも書かれている場合は、不要な部分となります。
というか、2つ以上あると処理速度が遅くなるだけですので、1つを残して他は削除したほうが良いですよ。
(勿論verによっては動かなくなるコードもあるので、1つずつ慎重に削除する必要がありますけど)

もし、jqueryの呼び出しコードが無ければメモ帳「scriptコード」に以下をコピペ。

<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

メニュー数を決めよう

では、続いてメニューの個数を決めて頂きます。
ゆきひーさんの記事でも4つ又は5つの個数で組まれていて、僕の方でもそれで対応します。
といっても、いきなりでは決められないでしょうから、今回僕が提供するメニューを先に公開します。
こんな感じです。

  1. ホームボタン(ゆきひーさんオリジナル)
  2. 上へ戻るボタン(ゆきひーさんオリジナル)
  3. カテゴリ(ゆきひーさんオリジナル)
  4. 人気記事アクセス順(ゆきひーさんオリジナル)
  5. 人気記事はてブ人気順(ゆきひーさんオリジナル)
  6. 人気記事はてブ新着順
  7. 関連記事
  8. 検索ボックス
  9. 目次
  10. 読者登録ボタン
  11. はてブボタン

(思いついたら増やすかもしれません)

この中から選んでください。
絞りきれない場合は、「訪問者目線」で考えてみてね。
自分が見せたいものという観点も大事ですが、読者があったら便利なモノという目線も大事です。


選べましたら、CSSコードをコピペします。
4個バージョンと5個バージョンがあります。
どちらか片方だけを貼りつけます。
間違わないで下さいね。

【4個の場合】cssコード

メモ帳「cssコード」に以下をコピペ。

.btn-area a,
.btn-area span{
    display: block;
    float: left;
    width: 25%;
    height: 50px;
    line-height: 25px;
    text-align: center;
    font-size: 70%;
    background: #696969;/*メニュー部分の背景色*/
    color: #fff;/*メニュー部分の文字色*/
}
【5個の場合】cssコード

メモ帳「cssコード」に以下をコピペ。

.btn-area a,
.btn-area span{
    display: block;
    float: left;
    width: 20%;
    height: 50px;
    line-height: 25px;
    text-align: center;
    font-size: 70%;
    background: #696969;/*メニュー部分の背景色*/
    color: #fff;/*メニュー部分の文字色*/
}

パーツを選ぼう!!

では、ここからは好きなパーツを選んでいってください。
必ず個数を守るようにしてくださいね。
貼りつける毎に左から順番に表示されます。
どの順番で表示させたいかイメージしてから、その順番で貼りつけるようにして下さいね。

ホームボタン【任意作業】

ブログトップページに画面遷移させます。

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<a class="home-btn " href="【ここにトップページURL】"><i class="blogicon-home lg"></i><br>HOME</a>

貼りつけたら、コード内の
【ここにトップページURL】
に、ご自身のブログのトップページURLを置き換えてくださいね。

cssコード

メモ帳「cssコード」に以下をコピペ。

.btn-area .home-btn{
   text-decoration:none;
}

上へ戻るボタン【任意作業】

記事ページの先頭に戻ります。

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<span class="back-btn"><i class="blogicon-chevron-up lg"></i><br>Top</span>

カテゴリ【任意作業】

サブメニューにカテゴリを表示します。

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<span class="toggle-btn"><i class="blogicon-list lg"></i><br>カテゴリ</span>
トグルコード

メモ帳「トグルコード」に以下をコピペ。

<div class="toggle-content">
<div class="toggle-btn2"><i class="blogicon-close lg"></i> CLOSE</div>
<ul class="category-list">
<li><a href='【カテゴリ1 url】'>カテゴリ1</a></li>
<li><a href='【カテゴリ2 url】'>カテゴリ2</a></li>
<li><a href='【カテゴリ3 url】'>カテゴリ3</a></li>
<li><a href='【カテゴリ4 url】'>カテゴリ4</a></li>
<li><a href='【カテゴリ5 url】'>カテゴリ5</a></li>
<li><a href='【カテゴリ6 url】'>カテゴリ6</a></li>
</ul>
</div><!--toggle-content-->

「カテゴリ〇」の部分にカテゴリ名を、その左横の「【カテゴリ〇 url】」に対応するカテゴリのURLを置換して下さい。
数は、適当に増減してね。

cssコード

メモ帳「cssコード」に以下をコピペ。
【必須部分】

.category-list{
    list-style-type: none;
    margin: 0;
    width: 100%;
    padding-left: 0;
}
.category-list li{
    border-top: 1px solid #333;/*カテゴリのリスト間の線の色*/
}

以下、どちらか片方を選んでください。

【選択】1列の場合
1列表記の場合はこちらを追加。

.category-list a{
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #444;/*カテゴリの背景色*/
    color: #f0f0f0;/*カテゴリの文字色*/
    font-size: 80%;
}

【選択】2列の場合
2列表記の場合はこちらを追加。

.category-list a{
    display: block;
    float: left;
    width: calc(50% - 2px);
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #444;/*カテゴリの背景色*/
    color: #f0f0f0;/*カテゴリの文字色*/
    font-size: 80%;
    border: 1px solid #333;/*カテゴリリスト間の線の色*/
}

人気記事アクセス順【任意作業】

サイドバーの注目記事「アクセス数順」と同じものになります。

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<span class="toggle-btn"><i class="blogicon-good lg"></i><br>人気記事</span>
トグルコード

メモ帳「トグルコード」に以下をコピペ。

<div class="toggle-content">
<div class="toggle-btn2"><i class="blogicon-close lg"></i> CLOSE</div>
<div class="hatena-module hatena-module-entries-access-ranking"
     data-count="5"
     data-display_entry_category="0"
     data-display_entry_image="1"
     data-display_entry_image_size_width="50"
     data-display_entry_image_size_height="50"
     data-display_entry_body_length="0"
     data-display_entry_date="0"
     data-display_bookmark_count="0"
     data-source="access"
>
<div class="hatena-module-body"></div>
</div>
</div><!--toggle-content-->

日付、はてブ数、カテゴリ、記事概要を非表示、画像サイズ50×50pxです。
変更する場合は、以下を参考にして下さい。

・data-display_entry_category : カテゴリ
・data-display_entry_image : 画像
・data-display_entry_body_length : 概要
・data-display_entry_date : 日付
・data-display_bookmark_count : ブックマーク数
 「0」で非表示します。
 「1」で表示します。
・data-count : 表示記事数
・data-display_entry_image_size_width : 画像横幅(px)
・data-display_entry_image_size_height : 画像縦幅(px)

人気記事はてブ人気順【任意作業】

サイドバーの注目記事「はてブ人気順」と同じものになります。

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<span class="toggle-btn"><i class="blogicon-bookmark lg"></i><br>はてブ順</span>
トグルコード

メモ帳「トグルコード」に以下をコピペ。

<div class="toggle-content">
<div class="toggle-btn2"><i class="blogicon-close lg"></i> CLOSE</div>
<div class="hatena-module hatena-module-entries-access-ranking"
     data-count="5"
     data-display_entry_category="0"
     data-display_entry_image="1"
     data-display_entry_image_size_width="50"
     data-display_entry_image_size_height="50"
     data-display_entry_body_length="0"
     data-display_entry_date="0"
     data-display_bookmark_count="1"
     data-source="total_bookmark"
>
  <div class="hatena-module-body"></div>
</div>
</div><!--toggle-content-->

日付、はてブ数、カテゴリ、記事概要を非表示、画像サイズ50×50pxです。
変更する場合は、以下を参考にして下さい。

・data-display_entry_category : カテゴリ
・data-display_entry_image : 画像
・data-display_entry_body_length : 概要
・data-display_entry_date : 日付
・data-display_bookmark_count : ブックマーク数
 「0」で非表示します。
 「1」で表示します。
・data-display_entry_image_size_width : 画像横幅(px)
・data-display_entry_image_size_height : 画像縦幅(px)

人気記事はてブ新着順【任意作業】

サイドバーの注目記事「はてブ新着順」と同じものになります。

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<span class="toggle-btn"><i class="blogicon-bookmark lg"></i><br>新着はてブ</span>
トグルコード

メモ帳「トグルコード」に以下をコピペ。

<div class="toggle-content">
<div class="toggle-btn2"><i class="blogicon-close lg"></i> CLOSE</div>
<div class="hatena-module hatena-module-entries-access-ranking"
     data-count="5"
     data-display_entry_category="0"
     data-display_entry_image="1"
     data-display_entry_image_size_width="50"
     data-display_entry_image_size_height="50"
     data-display_entry_body_length="0"
     data-display_entry_date="0"
     data-display_bookmark_count="1"
     data-source="recent-bookmark"
>
  <div class="hatena-module-body"></div>
</div>
</div><!--toggle-content-->

日付、はてブ数、カテゴリ、記事概要を非表示、画像サイズ50×50pxです。
変更する場合は、以下を参考にして下さい。

・data-display_entry_category : カテゴリ
・data-display_entry_image : 画像
・data-display_entry_body_length : 概要
・data-display_entry_date : 日付
・data-display_bookmark_count : ブックマーク数
 「0」で非表示します。
 「1」で表示します。
・data-display_entry_image_size_width : 画像横幅(px)
・data-display_entry_image_size_height : 画像縦幅(px)

関連記事【任意作業】

サイドバーの関連記事と同じものになります。
これだけ手順が異なります。
www.aritai.net
「晴れ時々晴天なり」さんの記事の方法です。

最初にやること

【デザイン】⇒【カスタマイズ】と進んで、【サイドバー】をクリック。
【+モジュールを追加】から「関連記事」を選んで適用します。

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<span class="toggle-btn"><i class="blogicon-pages lg"></i><br>関連記事</span>
トグルコード

メモ帳「トグルコード」に以下をコピペ。

<div class="toggle-content">
<div class="toggle-btn2"><i class="blogicon-close lg"></i> CLOSE</div>
<div id="relateArticle"></div>
</div><!--toggle-content-->
scriptコード

メモ帳「scriptコード」に以下をコピペ。

<script>
var timer = setInterval(function() {
    if (typeof jQuery != 'undefined') {
        $("#relateArticle").html($(".hatena-module-related-entries").html());
        clearInterval(timer);
    }
}, 1000)
</script>
cssコード

メモ帳「cssコード」に以下をコピペ。

.hatena-module-related-entries,
#relateArticle .hatena-module-title{
    display: none;
}
#relateArticle .related-entries-item {
    padding: 8px 0;
    border-bottom: 1px solid #dddddd;
    line-height: 1.5;
}
#relateArticle .urllist-item.related-entries-item {
    all: initial;
    padding: 5px;
    margin: 0px;
    min-height: 29px;
}
#relateArticle .urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
    color: #00f;
    text-decoration: none;
    font-weight: bold;
    font-size: 80% !important;
}
#relateArticle .urllist-entry-body.related-entries-entry-body {
    font-size: 80% !important;
    padding:20px !important;
}

ごめんなさい。
このCSS不完全です。

僕のブログだと、記事下に入れている公式の関連記事のCSSが当てられてしまい、滅茶苦茶になってました。
いつか…いつか直します。
(修正案ありましたら、教えて下さると助かります。)

検索ボックス【任意作業】

検索ボックスを追加します。

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<span class="toggle-btn"><i class="blogicon-search lg"></i><br>検索</span>
トグルコード

メモ帳「トグルコード」に以下をコピペ。

<div class="toggle-content">
<div class="toggle-btn2"><i class="blogicon-close lg"></i> CLOSE</div>
<div class="hatena-module-search-box">
<div class="hatena-module-body">
<form class="search-form" role="search" action="【ブログトップURL】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><!--toggle-content-->

一か所書き換える場所があります。
「【ブログトップURL】」部分にご自身のブログのURLを入れてください。

僕のメインブログの場合は、下のようになります。
ご参考までに。
https://nuruta.hatenablog.com/search

cssコード

メモ帳「cssコード」に以下をコピペ。

.toggle-content .hatena-module-search-box {
   height:40vh;
   width:100%;
   display: table;
}
.toggle-content .hatena-module-search-box .hatena-module-body{
   display: table-cell;
   vertical-align: middle;
}
.toggle-content .hatena-module-search-box .search-form {
  border: 2px solid #00f;
  background: #fff;
}

目次【任意作業】

記事の目次を作り、表示します。
大見出しのみ抜き出し、小見出しについては省略されます。
ご自身で書き換える個所が多いので、慎重に行ってください。
尚、下記サイトを参考(というか丸パクリ)させてもらいました。
はてなブログで自動的に目次を作成するjs - Qiita

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<span class="toggle-btn"><i class="blogicon-list lg"></i><br>目次</span>
トグルコード

メモ帳「トグルコード」に以下をコピペ。

<div class="toggle-content">
<div class="toggle-btn2"><i class="blogicon-close lg"></i> CLOSE</div>
<div id="ilist"></div>
</div><!--toggle-content-->
scriptコード

メモ帳「scriptコード」に以下をコピペ。

<script>
$(document).ready(function(){
        var hc = $('.entry-content h3').length;
        var hedarry = [];
        $('.entry-content h3').each(function(i){
          var text = $(this).text();
          hedarry.push(text);
          $(this).attr('id', 'headline' + i);
        });
        var insert = $('<ul>').addClass('list');
        var newLi = "";
        for(var j = 0; j < hedarry.length; j++) {
            newLi += '<li><i class="blogicon-heart"></i><a href="#headline'+j+'">'+hedarry[j]+'</a></li>';
            insert.append(newLi);
        }
        var divinsert = $('<div>').addClass('index-list');
        divinsert.append(newLi);
     $('#ilist').after(divinsert);
});
</script>

場合によっては修正が必要の為、次の部分を確認します。

(1)大見出し
このコードでは、大見出しh3(はてな記法で「*」1つ)を抜き出しています。
ご自身のブログで、h3を使っている場合は、修正の必要はありません。

h3を使っておらず、小見出しh4(はてな記法で「*」2つ)やjavascriptでh2を見出しに使っている場合は2か所修正する必要があります。


(1-1)コード3行目

var hc = $('.entry-content h3').length;

(1-2)コード5行目

$('.entry-content h3').each(function(i){

以上2か所の「h3」部分をご自身が大見出しとして使っている見出し要素に変更します。


(2)リストアイコン
このカスタマイズでは、標準のリストアイコンを消して、ハートマークを表示させています。
「ハートとか有り得ない、ヤダ」って方は、変更して下さい。
ここでは、はてなブログ文字アイコンを使った例を示します。
はてなの文字アイコンについては、FOXISMさんの記事が便利です。
www.foxism.jp

上記記事から、お好みのアイコンを選択。
13行目の

newLi += '<li><i class="blogicon-heart"></i><a href="#headline'+j+'">'+hedarry[j]+'</a></li>';

「blogicon-heart」の部分を書き換えます。
FontAwesomeを導入してる場合は、そちらも使えます。

cssコード

メモ帳「cssコード」に以下をコピペ。

.index-list{
   background-color: #d3d3d3; /*目次部分背景色 */
   padding:20px;
   list-style: none;
   max-height:50vh;
   overflow:auto;
}
.index-list a{
   color: #00f; /* 大見出し文字色 */
   text-decoration: none;
   padding: 5px;
   margin: 0px;
   display:inline-block;
   width:calc( 100% - 30px );
}
/* アイコン部分 */
.blogicon-heart{
   width:20px;
   display:inline-block;
   color:#ffaf58; /* アイコン色 */
}

script部分で、ブログアイコンを変えた場合、CSSコードの

/* アイコン部分 */
.blogicon-heart{

を変更しないといけません。

scriptコードの

newLi += '<li><i class="【アイコンクラス名】"></i><a href="#headline'+j+'">'+hedarry[j]+'</a></li>';

部分をチェック。
class名("で囲まれている個所)をコピーして、CSSコードを書き換えます。


例えば、を使いたい場合。
scriptコードは以下のようになります。

newLi += '<li><i class="blogicon-chevron-right"></i><a href="#headline'+j+'">'+hedarry[j]+'</a></li>';

class名が「blogicon-chevron-right」ですので、cssは次のようにします。

/* アイコン部分 */
.blogicon-chevron-right{

読者登録ボタン【任意作業】

読者登録ボタンを付けます。

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<a class="dokusha" href="https://blog.hatena.ne.jp/【はてなID】/【プロトコルを抜いたトップURL】/subscribe" onclick="window.open('https://blog.hatena.ne.jp/【はてなID】/【プロトコルを抜いたトップURL】/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i><br>読者登録</a>

一部書き換えます。

僕の場合を書いておきます。
ご参考までに。

はてなID nuruta
プロトコルを抜いたトップURL nuruta.hatenablog.com

表の通りなので、コードは以下になります。

<a class="dokusha" href="https://blog.hatena.ne.jp/nuruta/nuruta.hatenablog.com/subscribe" onclick="window.open('https://blog.hatena.ne.jp/nuruta/nuruta.hatenablog.com/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i><br>読者登録</a>
cssコード

メモ帳「cssコード」に以下をコピペ。

.btn-area .dokusha {
	text-decoration:none;
}

はてブボタン カウント数付き【任意作業】

「はてブボタン」を付けます。
ご自身が使用してるSNSシェアボタンをそのまんま組み込んだ方がスマートに出来ます。
ここでは、ゆきひーさんが配布されているものを組み込みます。
www.yukihy.com

メニューコード

メモ帳「メニューコード」に以下をコピペ。

<span class="share-3d-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</span>
cssコード

メモ帳「cssコード」に以下をコピペ。

.btn-area .share-3d-inner a {
    position: relative;
    display: inline-block;
	width:100%;
    height: 40px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
}
.btn-area .small-text{
	width:100%;
    text-align: center;
}
scriptコード

メモ帳「scriptコード」に以下をコピペ。

<script>
function get_social_count_hatebu(url, selcter) {
  jQuery.ajax({
    url:'//b.hatena.ne.jp/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selcter ).text( res || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
jQuery(function(){
  get_social_count_hatebu('{Permalink}', '.btn-area .hatebu-count');
});
</script>
【上級者用】scriptコード

既に「はてぶカウント付きのシェアボタンを使ってるぜ!!」って方で、javascriptを多少なり理解されている方は、上のコードを貼らずに関数呼び出し部分だけを追加すれば動きます。

どのような関数であれ、恐らく引数に「実行結果を表示させたいクラス名(もしくはID)」を使ってるはずです。
そこに「.btn-area .hatebu-count」を渡すようにすれば動きます。

人気記事cssコード【要確認】

●「人気記事アクセス順」
●「人気記事はてブ人気順」
●「人気記事はてブ新着順」
と同一のコードとなります。
これらを使用する場合は、コピペ必須です。

※上記3つのアイテムをどれも使用してない場合は、貼りつける必要はありません

メモ帳「cssコード」に以下をコピペ。

.toggle-content .hatena-module{
    margin-bottom:0px !important;
}
.toggle-content .hatena-module-body{
    font-size: 80% !important;
    padding:20px !important;
}
.toggle-content .hatena-module-body a{
    color: #00f;
    font-weight: bold;
    font-size: 100% !important;
}
.toggle-content .hatena-module-body li{
    border-bottom:1px solid #fff;
}
.toggle-content .hatena-module-body .urllist-image{
    width: 50px;
    height: 50px;
}
.toggle-content .urllist-item{
    padding: 5px;
    margin: 0px;
    min-height: 29px;
}
.toggle-content .urllist-item::before{
    display: none;
}

scriptコード【必須作業】

メモ帳「scriptコード」に以下をコピペ。

<script>
$(function(){
    var contentArea = $(".toggle-content");
   /******* (1)に必要な部分 ここから *******/
    $(".toggle-btn").click(function(){
        var index = $(this).index()-1;
        var clickedArea = $(contentArea).eq(index);
        if($(clickedArea).css('display') !='none'){
            $(contentArea).slideUp();
        }else{
            $(contentArea).slideUp();
            $(clickedArea).slideDown();
        };
    });
    $(".toggle-btn2").click(function(){
            $(contentArea).hide();
    });
   /******* (1)に必要な部分 ここまで *******/
   /******* (2)に必要な部分 ここから *******/
    $(".back-btn").click(function(){
        $("html,body").animate({scrollTop:0},"fast");
    });
   /******* (2)に必要な部分 ここまで *******/
});
</script>

コピペ終わったら、次の作業を行って下さい。
但し、「scriptの事なんてわからないや~」って場合は、次のセクションまで飛んでもらって問題ありません。

(1)に必要な部分

以下のアイテムを1つでも使ってる場合は、(1)の部分が必要です。

  1. カテゴリ
  2. 人気記事アクセス数順
  3. 人気記事はてブ人気順
  4. 人気記事はてブ新着順
  5. 関連記事
  6. 検索ボックス
  7. 目次

逆に1つも使ってない場合は、(1)の部分は不要です。
「/******* (1)に必要な部分 ここから *******/」
「/******* (1)に必要な部分 ここまで *******/」
の間を削除削除。

(2)に必要な部分

以下のアイテムを使ってる場合は、(2)の部分が必要です。

  1. 上へ戻るボタン

使ってない場合は、(2)の部分は不要です。
「/******* (2)に必要な部分 ここから *******/」
「/******* (2)に必要な部分 ここまで *******/」
の間を削除削除。

締め作業【必須作業】

以上、全てのアイテムを貼り終わったら、以下の作業をします。
3つのメモ帳にコピーしてきたコードに「終わり」のコードをコピーします。
これがないと正常に動作しませんので必ず行ってね。

メニューコード締め作業【必須作業】

メモ帳「メニューコード」に以下をコピペ。

</div><!--btn-area-->
<div style="clear: both;"></div>
</div>
トグルコード締め作業【必須作業】

メモ帳「トグルコード」に以下をコピペ。

</div><!--toggle-contents-->
cssコード締め作業【必須作業】

メモ帳「cssコード」に以下をコピペ。

}

デザイン設定へコピペ!!

いよいよ最後の作業です。

記事下へコピーする

管理画面から【デザイン】⇒【カスタマイズ】と進んで、【記事】をクリック。
【記事下】をクリックして、その中のコードの末尾に以下の順でメモ帳の内容を全て貼りつけます。

  1. メモ帳「scriptコード」の内容
  2. メモ帳「トグルコード」の内容
  3. メモ帳「メニューコード」の内容
デザインCSSへコピーする

【デザインCSS】をクリック。
末尾にメモ帳「cssコード」の内容をコピペ。

高度なカスタマイズ案

僕は試してませんが、1つのボタンの中に複数のアイテムを載せることも可能です。
「人気記事」ボタンを押したら、アクセス順、はてブ順、関連記事までいっぺんにポップアップする…とか。
「フォロー」ボタン押したら、SNSフォローボタンがずらっと並んだポップアップメニューが出る…とか。
ググっていて、実際に実装してる方がいました。
でも、それなりの工夫を施さないと重くなると思うんですよね。(特に前者。)

興味ある方はレッツ挑戦。

終わりに

つ、つかれた…。
10時間くらいかかってしまった…。
苦労した分、読まれて欲しいな。
100PVくらい。
贅沢かな…。