<commit_before>---
title: "はてブをカスタマイズ がっつり編"
permalink: /hatebu/customize/
---
デザインなど簡単なものは[CSS編](/hatebu/customize-css/)に。
{: .notice}

## [JQuery](https://jquery.com/)

`設定`→`詳細設定`→`検索エンジン最適化`→`headに要素を追加`に追加。
<span><script src="https://gist.github.com/laureltreetop/59d30a038a01d98a7fe6bc1c7bcc2a91.js"></script></span>
最新は[Google Hosted Libraries](https://developers.google.com/speed/libraries/#jquery)で確認。

## [Font Awesome](http://fontawesome.io/)

はてなブログ標準でもいろんなアイコンフォントが使えますが、後述のシェアボタンなどのようにFont Awesome前提のカスタマイズも多い。
{: .notice--info}

[Get Started](http://fontawesome.io/get-started/)からさくっと登録して埋め込みコードを手に入れるのが楽[^fontawesome] 。

[^fontawesome]: [Fonts](/create-pages/fonts/)（当サイト記事）も参考にどうぞ。

`設定`→`詳細設定`→`検索エンジン最適化`→`headに要素を追加`に追加。  
<script src="https://gist.github.com/laureltreetop/e8c228e14ccb0ee000be506947bf969e.js"></script>

## トップに戻る

上記のJQueryとFont Awesomeを追加し、`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`ヘッダ`に追加。
<script src="https://gist.github.com/laureltreetop/c32c117a913668c6ef625aee525d7f8d.js"></script>

`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`デザインCSS`に追加。デザインはお好みで。
<script src="https://gist.github.com/laureltreetop/3201e4dfb093ef0cfecb1fe65d4d2c94.js"></script>

あとはスクリプトを`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`フッタ`に追加で完了。
<script src="https://gist.github.com/laureltreetop/a2ad0f5f1adc4baa4364b03d09b98f59.js"></script>

## シェアボタン

レスポンシブ仕様で追加していきます。    
まずは先述のJQueryとFont Awesomeを追加。  

次に`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`フッタ`に追加。  
<script src="https://gist.github.com/laureltreetop/6cc3c83b1f1268fc29ebc98b90a74f6e.js"></script>

`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`デザインCSS`に追加。
<script src="https://gist.github.com/laureltreetop/895a30fcfff69189140de5d5f3be4792.js"></script>

最後に`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`記事`→`記事上`または`記事下`に追加。  
各ソーシャルパーツは全部チェックを外しちゃってください。
<script src="https://gist.github.com/laureltreetop/2c3c2b5852c139bb65b8251ab2daabb1.js"></script>

元ネタにはないシェアボタンも追加してあります。
[![HateBu Share](/assets/images/hatebu-share-icons.png)](/assets/images/hatebu-share-icons.png)

参考
+ [【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2](http://www.yukihy.com/entry/vol2-hatenablog-share-btn-custom)
+ [サイトの高速化に！Twitter、Facebook、Google＋、はてブのシェア数をJavaScriptで非同期に取得する方法まとめ](https://nelog.jp/sns-buttons-on-ajax)
+ [【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む（完成）](http://www.imuza.com/entry/2016/09/05/134417)

## 更新日付も表示
<commit_msg>add about share button with codepen<commit_after>---
title: "はてブをカスタマイズ がっつり編"
permalink: /hatebu/customize/
---
デザインなど簡単なものは[CSS編](/hatebu/customize-css/)に。
{: .notice}

## [JQuery](https://jquery.com/)

`設定`→`詳細設定`→`検索エンジン最適化`→`headに要素を追加`に追加。
<span><script src="https://gist.github.com/laureltreetop/59d30a038a01d98a7fe6bc1c7bcc2a91.js"></script></span>
最新は[Google Hosted Libraries](https://developers.google.com/speed/libraries/#jquery)で確認。

## [Font Awesome](http://fontawesome.io/)

はてなブログ標準でもいろんなアイコンフォントが使えますが、後述のシェアボタンなどのようにFont Awesome前提のカスタマイズも多い。
{: .notice--info}

[Get Started](http://fontawesome.io/get-started/)からさくっと登録して埋め込みコードを手に入れるのが楽[^fontawesome] 。

[^fontawesome]: [Fonts](/create-pages/fonts/)（当サイト記事）も参考にどうぞ。

`設定`→`詳細設定`→`検索エンジン最適化`→`headに要素を追加`に追加。  
<script src="https://gist.github.com/laureltreetop/e8c228e14ccb0ee000be506947bf969e.js"></script>

## トップに戻る

上記のJQueryとFont Awesomeを追加し、`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`ヘッダ`に追加。
<script src="https://gist.github.com/laureltreetop/c32c117a913668c6ef625aee525d7f8d.js"></script>

`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`デザインCSS`に追加。デザインはお好みで。
<script src="https://gist.github.com/laureltreetop/3201e4dfb093ef0cfecb1fe65d4d2c94.js"></script>

あとはスクリプトを`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`フッタ`に追加で完了。
<script src="https://gist.github.com/laureltreetop/a2ad0f5f1adc4baa4364b03d09b98f59.js"></script>

## シェアボタン

レスポンシブ仕様で追加していきます。    
まずは先述のJQueryとFont Awesomeを追加。  

次に`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`フッタ`に追加。  
<script src="https://gist.github.com/laureltreetop/6cc3c83b1f1268fc29ebc98b90a74f6e.js"></script>

`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`デザインCSS`に追加。
<script src="https://gist.github.com/laureltreetop/895a30fcfff69189140de5d5f3be4792.js"></script>

最後に`デザイン`→<i class="fa fa-wrench" aria-hidden="true"></i>→`記事`→`記事上`または`記事下`に追加。  
各ソーシャルパーツは全部チェックを外しちゃってください。
<script src="https://gist.github.com/laureltreetop/2c3c2b5852c139bb65b8251ab2daabb1.js"></script>

元ネタにはないシェアボタンも追加してあります。
[![HateBu Share](/assets/images/hatebu-share-icons.png)](/assets/images/hatebu-share-icons.png)

[CodePen](https://codepen.io/)バージョンも載せとく。  
FontAwesomeは[Bootstrap](https://www.bootstrapcdn.com/fontawesome/)より。追加の仕方も@importにしてあります。  
はてブとEvernoteのアイコンは、はてブ用アイコンなので表示されてません。
<p data-height="336" data-theme-id="0" data-slug-hash="ZawGMW" data-default-tab="result" data-user="laurel-treetop" data-embed-version="2" data-pen-title="Share button for Hatebu" class="codepen">See the Pen <a href="https://codepen.io/laurel-treetop/pen/ZawGMW/">Share button for Hatebu</a> by Laurel (<a href="https://codepen.io/laurel-treetop">@laurel-treetop</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

参考
+ [【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2](http://www.yukihy.com/entry/vol2-hatenablog-share-btn-custom)
+ [サイトの高速化に！Twitter、Facebook、Google＋、はてブのシェア数をJavaScriptで非同期に取得する方法まとめ](https://nelog.jp/sns-buttons-on-ajax)
+ [【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む（完成）](http://www.imuza.com/entry/2016/09/05/134417)

## 更新日付も表示

{'fraction_non_alphanumeric': 0.19138082673702728, 'fraction_numerical': 0.05787159190853122, 'mean_word_length': 7.5119760479041915, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 73, 'https://': 28, 'lorem ipsum': 0, 'www.': 5, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7563717', 'n_tokens_mistral': 3354, 'n_tokens_neox': 3227, 'n_words': 195}