はてなブログをカスタマイズ（第1回） - ニートが学ぶプログラミング

こんにちは、鬱太郎です。今日でブログ開設してから10日が過ぎました。10日ではてなブログをいろいろカスタマイズしてきましたので、まとめてみようと思います。

テーマを変更しました
目次のCSSを変更しました
- 参考記事
- 目次のスタイルの変更方法
記事の始めと終わりに読者になるボタンを追加しました
記事の終わりにTwitterのフォローボタンを追加しました
サイドバーを整理しました
サイドバーにTwitterのタイムラインを表示しました
- 参考記事
- Twitterタイムラインの表示方法
サイドバーに追尾式の目次を設置しました
終わりに

テーマを変更しました

目次のCSSを変更しました

参考記事

mshitech.hatenablog.com

ありがとうございます！

目次のスタイルの変更方法

はてなブログの「デザイン」->「カスタマイズ」->「デザインCSS」の欄に下記を追加

/* 目次に「目次」を追加 */
.table-of-contents:before{
 content: "目次";
 font-size: 120%;
 font-weight: bold; /* 文字の太さ */
}
/* 目次のカスタマイズ */
.entry-content .table-of-contents {
 background: #f8f8f8 ; /* 目次の背景色 */
 border-radius:5px; /* 目次の枠の角の丸さを調節 */
}

※上記コードは参考記事にあるえむしてっくさんのものです。著作権はえむしてっくさんに帰属します。

記事の始めと終わりに読者になるボタンを追加しました

「デザイン」->「カスタマイズ」->「記事」に記事の始めと終わりにHTMLを追加できます。しかし、ホームページに表示される記事には追加されません。ですので、記事作成の時に逐次入力する必要があります。proに登録してホームページから記事をクリックしないと中身が見れないようにすればいいのですが。

記事の先頭と末尾に以下を追加（コード例）

<iframe src="https://blog.hatena.ne.jp/neet-utsu-taro/neet-utsu-taro.hatenablog.jp/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

このコードは各自の「設定」->「詳細設定」の下の方にあります。

記事の終わりにTwitterのフォローボタンを追加しました

以下のサイトからフォローするをチェックし、HTMLコードをコピーして記事の末尾に貼り付けます。

Twitterボタン | About

（コード例）

<a href="https://twitter.com/neet_utsu_taro" class="twitter-follow-button" data-show-count="false">Follow @neet_utsu_taro</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

サイドバーを整理しました

「デザイン」->「カスタマイズ」からサイドバーを選び項目を追加、並び替えができます。

サイドバーにTwitterのタイムラインを表示しました

参考記事

souken-blog.com

ありがとうございます！

Twitterタイムラインの表示方法

以下のリンクからTwitterのユーザー名（例: @neet_utsu_taro）を入力し、「Embedded Timeline」を選択し、HTMLコードをコピーします。

Twitter Publish

HTMLコードをコピーしたら、はてなブログの「デザイン」->「カスタマイズ」->「サイドバー」->「モジュールを追加」->「HTML」を順に選んで貼り付けましょう。

貼り付けたHTMLコードそのままですと、ものすごい縦長のタイムラインが作られるので、高さ制限を追加しましょう。ここでは700pxとしてますがお好みの高さに変更できます。

height="700px"

を「class=“twitter-timeline"」と「href=”…“」の間に追加しましょう。追加した結果は次のようになります。

<a class="twitter-timeline" height="700px" href="https://twitter.com/neet_utsu_taro">Tweets by neet_utsu_taro</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

サイドバーに追尾式の目次を設置しました

参考記事

twilyze.hatenablog.jp

ありがとうございます！

サイドバーに追尾式の目次を設置する方法

参考記事のリンク先にあるHTML、JSコードを「デザイン」->「カスタマイズ」->「サイドバー」->「モジュールを追加」->「HTML」に貼り付けましょう。

CSSコードは「デザイン」->「カスタマイズ」->「デザインCSS」に貼り付けましょう。

コードの変更

~~上記コードのままですと次のような不具合があります。~~¹

「はてなブログをはじめよう！」？

これははてなブログに元からある見出しなのでしょう。

~~はてなブログ本体はh1~h3の見出しを使い、ユーザが記事に使う見出しはh4~h6のようです。~~私の勘違いです。申し訳ありません
コードがh3~h5の見出しを目次にするようになっている。（正しいです）

ですので、コードを変更しましょう。ユーザーが使う見出しh4~h6を目次にするようにします。 私はMarkdown表記で記事を作っていたため、h3~h5を使うのが正常ということに気づけませんでした。なので以下の方法では直接的な解法とはなりません

1.見出しh4~h6を読み込むようにする

31行目

var SECTION_QUERY = 'h3,h4,h5';

を

var SECTION_QUERY = 'h4,h5,h6';

にします。

2.段落作成にh6を追加する

64行目からのifelse文

// 段落作成
if (self.nodeName.toLowerCase() == 'h4') {
    level = 1;
} else if (self.nodeName.toLowerCase() == 'h5') {
    level = 2;
}

にh6の段落を追加

// 段落作成
if (self.nodeName.toLowerCase() == 'h4') {
    level = 1;
} else if (self.nodeName.toLowerCase() == 'h5') {
    level = 2;
} else if (self.nodeName.toLowerCase() == 'h6') {
    level = 3;
}