INODEVLOG

WEBアプリ開発・事業開発・ビジネスモデル・読書の情報などをお届けしています。

はてなブログのデザインをCSS/JSで本格カスタマイズした話

先日から自分もはてなブログProを使い始めました!どうも、井上です。

独自ドメインはやっぱりいいなぁと思うのですが、過去のFBシェア数とかが消えているのはちょっと切ないです…。

さて、皆さんご存知の通り、はてなブログではCSSやJavaScriptを使える為、

自分で調整することが出来れば本格的なカスタマイズが可能になります。

今回は「はてなブログProデビューした記念」にPC向けデザインを更新しましたので、

当ブログで行ったカスタマイズ内容とその狙いも合わせて紹介していきます!

はてなブロガーさんは、目次から興味がある部分だけでも参考にして、よりカッコいいブログにして頂けましたら幸いです。

この記事の注意点

この記事はそこそこCSSとJavaScriptが読める・書ける人向けの記事です。

ソースコードは載せていますが、文法などの細かい解説まで載せていません。

仕様変更があった場合でも自分で対応出来る方の利用を推奨いたします。

また、自分の設定をそのまま載せているので、よしなに変更して自己責任での御利用をお願い致します!

ブログタイトルのフォントを変更する

やったこと

タイトル文字を少しイノベーティブな雰囲気(?)に変えたかったので変更してみました。

f:id:inodev:20161101072539j:plain:w400

画像では分かりづらいですが、少し影をつけて立体に見えるようにもなっています。

参考サイト

GoogleのWEB Fontを読み込み、CSSの記述のみ行ってfont-familyを変更します。

GoogleFontsはGoogleが提供しているWEBフォントを使えるサービスです。

日本語は少ないですが、ブラウザから読み込めるのでどの環境でも使えます。

f:id:inodev:20161101073053j:plain:w400

Google Fonts

実装方法

「はてなブログダッシュボード>設定>詳細設定タブ>headに要素を追加」に下記を追加します。

※ここに貼り付ける内容等はGoogleFontsで選んで下さい。

<link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">

「はてなブログダッシュボード>デザイン>カスタマイズ>デザインCSS」に下記を追加します。

/********** Title **********/
#title {
    font-family: 'Electrolize', sans-serif; /* Google Fonts */
    text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000;  
}

font-familyでGoogleFontsから選んできたフォントを適用させ、text-shadowで影を付けてみました。

メニューバーを追加してアニメーションを付ける

カスタマイズ戦略

グローバルメニューはそのサイトの顔、性質を表せる場所なのでメニューが無いともったいないです。

また、そもそも自分はWEBの技術系のTips記事もやっていきたいと思っているので、

ブログ自体が他の人とちょっと違う部分を持って目を引く仕掛けを入れておきたいと言うのがあります。

そこで、押したい技術系を含んだカテゴリをアニメーションを入れて紹介していきます。

やったこと

ヘッダー部分にメインとなるカテゴリのリンクでメニューバーを作成しました。

また、メニューへマウスを持っていったら簡単なアニメが実行されるようにしました。

20161101074606

メニューの実装の参考サイト

次のサイトを参考にメニューを作成していきます。

maroom.hateblo.jp

また、AwesomeFontでメニューのアイコンも実装していきます。

AwesomeFontはフォントのようなアイコンを使えるサービスです。

f:id:inodev:20161102021815p:plain:w400

Font Awesome, the iconic font and CSS toolkit

静的なメニューの実装方法

「はてなブログダッシュボード>設定>詳細設定タブ>headに要素を追加」

上記に次の内容を追加してAwesomeFontを使えるようにします。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

「はてなブログダッシュボード>デザイン>カスタマイズ>ヘッダ>タイトル下」

上記に次のHTMLでのメニューリストを追加します。

aタグのclass="animation"は後ほどアニメの動きをつけるためにつけておきます。

※利用する際は自分のURL/タイトル/文言等に変更して下さい。

<div id="menubar">
    <ul>
        <li><a href="http://www.inodev.jp/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0" title="Programing" class="animation"><i class="fa fa-laptop" aria-hidden="true"></i> プログラミング</a></li>
        <li><a href="http://www.inodev.jp/archive/category/%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0" title="Marketing" class="animation"><i class="fa fa-bar-chart" aria-hidden="true"></i> マーケティング</a></li>
        <li><a href="http://www.inodev.jp/archive/category/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" title="Design" class="animation"><i class="fa fa-snowflake-o" aria-hidden="true"></i> デザイン</a></li>
        <li><a href="http://www.inodev.jp/archive/category/%E4%BE%BF%E5%88%A9%E3%83%84%E3%83%BC%E3%83%AB" title="Tool" class="animation"><i class="fa fa-cogs" aria-hidden="true"></i> 便利ツール</a></li>
        <li><a href="http://www.inodev.jp/archive/category/%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1%E6%9C%AC" title="Book" class="animation"><i class="fa fa-book" aria-hidden="true"></i> オススメ本</a></li>
    </ul>
</div>

「はてなブログダッシュボード>デザイン>カスタマイズ>デザインCSS」

上記に次のCSSを書いてメニューのリストを成形します。

/********** Menu bar **********/
#menubar{
    width:100%;
}
#menubar ul{
    display:table;
    width:100%;
    margin: 0 0 20px 0; 
    padding: 0;
    background-color: #333; 
}
#menubar li{
    display: table-cell;
    width:20%; /* メニューが5つなので1つで20% */
    padding:0;
    background-color: #fff; 
}
#menubar li a{
    display: block;
    margin:0 auto;
    padding:5px;
    border: solid 1px #333;
    text-decoration: none;
    color: #333;
    text-align: center;
    font-size: 12px;
}
#menubar li a:hover{
    background-color: #eee;
}

これで一旦メニューは出たので次にアニメーションを付けてみたいと思います。

アニメーションを作成する参考サイト

animate.cssCSSのみでアニメーションを付けることが出来ます。

HTMLの要素にclass指定するだけで良いのですが、それだけだと表示された瞬間にアニメが動いて、それ以降は動いてくれません。

そこで、JavaScriptでイベントを検知して、アニメーションさせるclassを付与したり除去したりして何度でも該当トリガーで動くようにします。

▼ Animate.cssの動きが見れるサイトで好きな動きを見つけて下さい。

https://daneden.github.io/animate.css/

▼ ここに*1CDNのCSSファイルがあるのでこちらを利用します。

https://cdnjs.com/libraries/animate.css/

▼ Animate.cssの動きはこちらを見て下さい。

Animate.cssで手軽にアニメーションを実装 - Qiita

アニメーションの実装方法

animate.cssで「繰り返し可能なアニメーション」を作成するために、JavaScriptでHTMLのclassの追加・削除をいます

「はてなブログダッシュボード>設定>詳細設定タブ>headに要素を追加」

上記の場所に次のソースコードを追加します。

なお、今回はjelloというclassに対応するアニメーションを動作をさせています。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>
$(document).ready(function(){
    $('.animation').mouseover(function(e){
        e.preventDefault();
        $(this).removeClass().addClass('jello' + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $(this).removeClass('jello' + ' animated');
        });
    });
});
</script>

はてなの目次機能のカスタマイズを行う

やったこと

はてなブログでは[:contents]という記述を記事内に埋め込むと目次(各見出しへのリンク)を生成してくれる機能があります。

基本的に特に長い記事にはコレを付けたほうが良いのですが、デフォルトでダサいのでサイトに馴染ませるようにしました。

またスムーズスクロールのやり方も書いていただいていたので、そちらも目次にだけ適用させる形で追記しました。

f:id:inodev:20161102023930j:plain:w400

参考サイト

下記サイトを参考に目次をカスタマイズします。

www.yukihy.com

また、FontAwesomeでワンポイント入れたいので書きを参考にFontAwesomeのFontfamilyで該当Unicodeを使用します。

fa-file-text-o: Font Awesome Icons

fontawesomeのアイコンをcssの:before/:afterで挿入する - Qiita

目次のカスタマイズ方法

「はてなブログダッシュボード=>デザイン=>カスタマイズ=>デザインCSS」に下記を追加します。

/********** Contents list **********/
.table-of-contents {
  padding: 20px 10px 20px 40px;
  border-radius: 5px;
  background: #fff;
}
.table-of-contents li,
.table-of-contents ul {
  list-style-type: decimal;
  margin-left: 0;
}
/*見づらい見づらいのでTOPレベルのみ表示*/
.table-of-contents ul{
  display: none;
}
.table-of-contents li a {
  text-decoration: none;
}
.table-of-contents:before {
  content: "\f0f6  目次";
  font-family: FontAwesome;
  font-size: 150%;
}

「はてなブログダッシュボード>デザイン>カスタマイズ>記事>記事下」の一番下に次を追加します。

<script>
// 目次用スムーズスクロール
$(function(){
   $('.table-of-contents a').click(function() {
      var myHref= $(this).attr("href");
      var Target = $(myHref).offset().top - 10;
      $('body,html').animate({scrollTop: Target}, "slow", 'swing');
      return false;
   });
});
</script>

SNSシェアボタン&フォローボタンのカスタマイズを行う

カスタム戦略

読者に何かをして欲しい場合は、特にブログの下部の読者に行動を促すところでちゃんと導線を作るのは重要です。

別段コンテンツをお持ちでない方は、これではてなブログの「読者になるボタン」等の設置をされると良いかと思います。

やったこと

シェア系・フォロー系のボタンを下記参考サイトの物を利用させていただいて設置しました。

f:id:inodev:20161102024651j:plain:w400

参考サイト

基本的にここに載せているものはほぼそのままこちらの記事を参考にさせていただきました!

www.ituore.com

georges.hatenablog.jp

また、Twitterの公式で使えなくなったTwitterのシェア数も取得可能です。

Twitterのシェア数が見たい場合は、こちらも参考にcount.jsoonを利用して下さい。

nelog.jp

※下記実装もcount.jsoonを利用しないとTwitterで利用できません。

シェアボタン実装方法

「はてなブログダッシュボード>デザイン>カスタマイズ>記事>記事下」に下記を追加します。

<!--SNSシェアボタン-->
<div class="share-buttons">
<div class="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> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Share</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title}%20%7c%20{BlogTitle} {URLEncodedPermalink}&related=InoIno_iesa" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i> <span class="twitter-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Tweet</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="share-text">Pocket</span></a>
</div>
</div>

<!-- 後でここに購読処理を追加する -->

<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
  entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp',
  }).then(
    function(result){ $(selcter).text(result || 0); },
    function(){ $(selcter).text('0'); }
  );
}
//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
  entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp'
  }).then(
    function(result){
        if(result.share && result.share.share_count) {
            $(selcter).text(result.share.share_count);
        } else {
            $(selcter).text('0');
        }
    },
    function(){ $(selcter).text('0'); }
  );
}
//Twitterのツイート数取得関数(URLのツイート数を指定したCSSセレクタに表示)
function getTwitterCount(url, selector) {
  jQuery.ajax({
    url:'http://jsoon.digitiminimi.com/twitter/count.json',
    dataType:'jsonp',
    timeout: 10000, //10sec
    data:{
      url:url
  },
  success:function(res){
    jQuery( selector ).html( res.count || 0 );
  },
  error:function(){
    jQuery( selector ).html('error');
  }
  });
}

$(function(){
  getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
  getFacebookCount('{Permalink}', '.facebook-count');
  getTwitterCount('{Permalink}', '.twitter-count');
});
</script>

「はてなブログダッシュボード=>デザイン=>カスタマイズ=>デザインCSS」に下記を追加します。

/********** share-botton **********/
.share-buttons{
    width: 90%;
    margin: 0 auto 10px auto;
    text-align: center;
}

.share-buttons .inner a {
    position: relative;
    width: 20%;
    display: inline-block;
    height: 42px;
    line-height: 22px;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    padding:4px;
}

.share-buttons .inner .share-text{
    font-size: 15px;
}

.share-buttons .inner .hatena-bookmark-button{
    color:#008fde;
    border:1px solid #008fde;
    background: #fff;
}
.share-buttons .inner .hatena-bookmark-button:hover{
    color:#fff;
    background: #008fde;
}
.share-buttons .inner .hatena-bookmark-button:active{
    background: #5478A5;
}
.share-buttons .inner .facebook-button{
    color:#305097;
    border:1px solid #305097;
    background: #fff;
}
.share-buttons .inner .facebook-button:hover{
    color:#fff;
    background: #305097;
}
.share-buttons .inner .facebook-button:active{
    background: #213254;
}
.share-buttons .inner .twitter-button{
    color:#55acee;
    border:1px solid #55acee;
    background: #fff;
}
.share-buttons .inner .twitter-button:hover{
    color:#fff;
    background: #55acee;
}
.share-buttons .inner .twitter-button:active{
    background: #0285b7;
}
.share-buttons .inner .pocket-button{
    color:#d3505a;
    border:1px solid #d3505a;
    background: #fff;
}
.share-buttons .inner .pocket-button:hover{
    color:#fff;
    background: #d3505a;
}
.share-buttons .inner .pocket-button:active{
    background: #b5392c;
}

フォローボタン実装方法

「はてなブログダッシュボード>デザイン>カスタマイズ>記事>記事下」に下記を追加します。

挿入はJavaScriptの処理の手前がベターでしょう。

<div class="follow-btn">
<ul>
<!--読者ボタン-->
<li class="btn1">
<a href="https://blog.hatena.ne.jp/inodev/inodev.hatenablog.com/subscribe"  target="_blank"><span class="btn1-icon"><br /></span>読者になる</a></li>
<!--Twitterボタン-->
<li class="btn2">
<a href="https://twitter.com/intent/follow?screen_name=InoIno_iesa" target="_blank"><span class="btn2-icon"><br /></span>フォローする</a></li>
</ul>
</div>

「はてなブログダッシュボード=>デザイン=>カスタマイズ=>デザインCSS」に下記を追加します。

/*********フォローボタン**********/
.follow-btn{
 width: 100%;
 margin: 25px auto 15px auto;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;
 width: 50%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
.follow-btn li span{
 line-height:2.5;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.btn1{
 background: #5F5E5E;/*読者ボタンの背景色*/
}
.btn1:hover{
 background: #3F3E3E;
}
.btn2{
 background: #6FB6C3;/*Twitterの背景色*/
}
.btn2:hover{
 background: #3FA6B3;
}
.btn1-icon:before{
 content: "\f000";/*はてなアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";/*Twitterアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.follow-btn a {
 width:100%;
 height:100%;
 font-size: 13px;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
 color: #fff;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

人気記事の順位表示をカスタマイズする

カスタム戦略

ブログは基本的には*2ページ回遊率が高いほうが良いです。

そこで、特にクリックされやすいと思われる人気記事ランキングに順位付けしてアピールすることで、

注目されている記事も見てもらいやすいように仕込んでおきます。

やったこと

人気記事に分かりやすく順位をつけていきます。

f:id:inodev:20161102000343j:plain:w400

参考サイト

お友達のこちらの記事を参考にさせていただきました。

hapisupu.com

ここにあるCSSのcounter真似したのですがはてなブログではうまく動かなくて(?)ちょっとゴリ押しで書いてます。

もう少しキレイに書けそうですが取り敢えずコレで使っています。

ランキングを付ける実装

まだFontAwesomeをヘッダに入れていない場合は、

「はてなブログダッシュボード=>設定=>詳細設定タブ=>headに要素を追加」に下記を追加します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

「はてなブログダッシュボード=>デザイン=>カスタマイズ=>デザインCSS」に下記を追加します。

/********** sidebar ranking decorate **********/
li.entries-access-ranking-item {
    position: relative;
    list-style-type: none;
    padding-top: 6px;
    padding-left: 5px;
}
li.entries-access-ranking-item:before {
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    font-size: 14px;
    font-weight: 900px;
    font-family: FontAwesome;
    line-height: 1;
    padding: 3px 8px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
ul.entries-access-ranking li:nth-child(1):before {
    content: "\f091  1位";
    font-family: FontAwesome;
    background: rgba(220, 215, 90, 0.9);
}
ul.entries-access-ranking li:nth-child(2):before {
    content:"\f091  2位";
    background: rgba(200, 200, 200, 0.9);
}
ul.entries-access-ranking li:nth-child(3):before {
    content:"\f091  3位";
    background: rgba(215, 185, 75, 0.9);
}
ul.entries-access-ranking li:nth-child(4):before {
    content:"4位";
    background: rgba(230, 230, 255, 0.9);
}
ul.entries-access-ranking li:nth-child(5):before {
    content:"5位";
    background: rgba(230, 230, 255, 0.9);
}

AwesomeFontのfont-familyで、Unicodeの\f091としてトロフィーを表しています。

本文もちゃんと強調するようにカスタマイズする

カスタム戦略

ブログは基本的に強い強調と普通の強調など、2~3種類の強調の種類があると読みやすいと思っています。

そもそも、デフォルトで太字強調を行うタグとして、『本来の強調』を意味するstrongタグと、単純に『太字』にするbタグという2種類があります。

この2つにそれぞれの強調CSSを指定して、その意味合いに即した形で出来るだけ使い分けていきます。

strongタグで強調している単語がちまたではSEOにも若干効果があると言われていますので、

このブログではstrongタグを赤文字にして、SEO的に意味のある強調したい短い文章に利用していきます。

逆に、bタグはSEO的には意味はないけれど、読者には強調したい文章などに使うようにしようと思います。

ちなみにMarkdownの書き方では**ほげ**というのはstrongタグになります。

やったこと

赤色の文字と、黄色の下線を使えるように簡単にCSSでカスタマイズしました。

f:id:inodev:20161102002152j:plain:w400

参考サイト

下記にstrongbタグの違いが説明されています。

www.homepage-tukurikata.com

strong タグを使用するとそのキーワードが論理的にも強調されますので、グーグルやヤフーなどの検索エンジンでヒットしやすくなる傾向があります。 その一方、strong タグを多用しすぎるとペナルティーを受けてしまい、ページがインデックスされなかったり、検索順位が下がるといったケースもあります。

下線の実装方法は下記のサイトを参考に行います。

www.gadget-mission.com

実装方法

「はてなブログダッシュボード=>デザイン=>カスタマイズ=>デザインCSS」に下記を追加します。

.entry-content b {
    background: linear-gradient(transparent 60%, #96E6E6 40%);
}
.entry-content strong {
    color: #cc0000;
}

※追記:ソースコードが幅を取るので下記も追加してソースコードの文字を一回り小さくしました。

pre.code {
  font-size: 0.8em;
  border-radius: 3px;
  padding : 7px 5px 7px 15px;
}

最後に

カスタマイズはいかがでしたでしょうか?

正直JavaScript等は使用しすぎると読み込み速度が落ちるので、そこは調整の上テストしてストレスを感じないか各自でチェックしてみて下さい。

少しでも読者さんに喜んで頂ける読みやすいブログを一緒に書いていきましょう!

あ、そういえば先日の記事で、このブログの読者が5名から21名まで増えました

超ありがとうございます!!!スゴイ励みになります!

これからも頑張って行こうと思いますのでよろしくお願いいたします(^_^

*1:CDN:Content Delivery Network 画像やCSS/JSなどのコンテンツを配信しやすいように用意したりしているやつのこと。はてなブログではライブラリ等を配置出来ないので、既にどこかに置いてもらっているやつを読み込みに行かせる。

*2:ページ回遊率:他のページも見てくれる確率のこと。これが高いと最終的なゴール(アフィリブログの場合は購入等)にたどり着いてもらえる確率が上がるとか、より色々知ってもらえるから信頼度上がるとか、雑に言えばなんか色々うれしいことが多い。