はてなブログのデザインカスタマイズ方法を紹介します！【コピペでできる！】

この記事では、はてなブログのブログ作成方法からブログのデザインカスタマイズ方法まで紹介します！

カスタマイズは、この記事のコードをコピペして貼り付けるだけでできちゃうので参考にして見てください。

ちなみに、以下のブログで実際に行ったカスタマイズ方法を紹介していきます！

www.charlottehibi.com

ブログ作成
テーマの導入
- グローバルメニューのカスタマイズ
ヘッダ画像の余白を消す
スマホ版はてなブログのカスタマイズ（Proのみ）
- 複合メニューバーの導入
スマホデザインのカスタマイズ
まとめ

ブログ作成

f:id:UrushiUshiru:20180415230654j:plain

はてなブログのブログ作成のページ「https://blog.hatena.ne.jp/register」にアクセスして、URL、公開の範囲を設定して作成します。

f:id:UrushiUshiru:20180415230914j:plain

作成しましたが、これでは殺風景なのでカスタマイズします！

テーマの導入

はてなブログのテーマストア「http://blog.hatena.ne.jp/-/store/theme/」にアクセスします。

f:id:UrushiUshiru:20180415231247j:plain

今回は「Brooklyn」という、このブログでも使用しているテーマを適用します。

同じテーマにした方が管理しやすいからね！

「プレビューしてインストール」のボタンを押すと適用されます。

「テーマの説明」通りに設定しないとグローバルメニューが表示されないので、ちゃんと説明を読んで設定して行って下さい。

グローバルメニューのカスタマイズ

/*グローバルメニュー*/
 #global-menu {
 background-color: #444444; /*ナビメニューの両サイド背景の色変更*/
 border-bottom: 2px solid #444444;　/*ナビメニュー下部のラインカラー変更*/
 }
 .global-menu-list li a {
 color: #fff; /*ナビメニューの文字色変更*/
 background-color: #444444; /*ナビメニューの背景色変更*/
 }
 #mobile-head {
 background-color: #444444; /*スマホ版 ナビメニューの背景色変更*/
 }
 #blog-title {
  border-bottom: 1px solid #444444;　/*ナビメニュー上部のラインカラー変更*/
 }

1. グローバルメニューのカラーを変更するのには、上記のコードの「#XXXXXX」という数値（カラーコード）を弄ってを変更します。

カラーコードについては以下のサイトから好きな色のコードを取得してください。

html-color-codes.info

f:id:UrushiUshiru:20180416005536j:plain

2.はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

f:id:UrushiUshiru:20180416005700j:plain

先程貼り付けたCSSコードでグローバルメニューの色が変わります。

サブブログに設定してるのは濃いグレーなのであまり変化は無いですが・・・。

ヘッダ画像の余白を消す

f:id:UrushiUshiru:20180416005700j:plain

はてなブログの管理画面から「デザイン」⇒「スパナマーク」⇒「背景画像」から設定していくと余白が酷い状態になります・・・。せっかく描いたのに・・・。

そうならない方法をこの章では紹介します。

  /*ヘッダ画像の参照*/
#blog-title {
    color: #ffffff;
    background: url('画像のURL') center 18%;
    background-size: cover;
}

 /*ヘッダ画像の位置*/
#title{
    font-size: 0px;/* タイトル文字大きさ */
    height:350px;/* 画像の高さ */
}

そうならないように、上記のCSSコードを使用します。

f:id:UrushiUshiru:20180416011428j:plain

1.上記コード11行目の「height:〇〇〇px」の値を変更するとヘッダ画像の表示される高さを変えられますので、適用したい画像によって値を変更してください。

f:id:UrushiUshiru:20180416005536j:plain

2.はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

f:id:UrushiUshiru:20180416124501j:plain

これで一通り、テーマの導入カスタマイズが完了しました。

スマホ版はてなブログのカスタマイズ（Proのみ）

f:id:UrushiUshiru:20180416125529j:plain

スマホでサブブログを確認してみると、ヘッダ画像しか設定してないので殺風景・・・。

f:id:UrushiUshiru:20180416125758j:plain

レスポンシブデザインにすると、PC版ブログのヘッダ画像が適用されて微妙・・・。

スマホ版に対応するようにヘッダ画像作成してないしね！！

そんな時に、複合メニューバーを導入します。

f:id:UrushiUshiru:20180416130446j:plain

複合メニューバーと言うのは、スマホでブログにアクセスしたときに真下に表示されるメニューバーのことです。

複合メニューバーの導入

以下のサイトを参考にして複合メニューバーを設置します。

その中の5つのボタンの場合のコードを修正して設置します。

www.yukihy.com

<!--固定メニューバー-->
<div id="menu">
<div class="toggle-contents">
<div class="toggle-content">
<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-->
<div class="toggle-content">
<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-->
<div class="toggle-content">
<ul class="category-list">
    <li><a href="https://www.itjigoku.com/entry/work">お仕事のご依頼について</a></li>
    <li><a href="https://www.charlottehibi.com/entry/about">ブログについて</a></li>
    <li><a href="https://www.charlottehibi.com/archive/category/%E3%82%B0%E3%83%AB%E3%83%A1">グルメ</a></li>
   <li><a href="https://www.charlottehibi.com/archive/category/%E3%82%B0%E3%83%AB%E3%83%A1-%E3%82%A4%E3%83%B3%E3%83%89%E6%96%99%E7%90%86">インド料理</a></li>
   <li><a href="https://www.charlottehibi.com/archive/category/%E3%82%B0%E3%83%AB%E3%83%A1-%E3%83%91%E3%82%AD%E3%82%B9%E3%82%BF%E3%83%B3%E6%96%99%E7%90%86">パキスタン料理</a></li>
   <li><a href="https://www.charlottehibi.com/archive/category/%E3%82%B0%E3%83%AB%E3%83%A1-%E3%83%8D%E3%83%91%E3%83%BC%E3%83%AB%E6%96%99%E7%90%86">ネパール料理</a></li>
   <li><a href="https://www.charlottehibi.com/archive/category/%E3%82%B0%E3%83%AB%E3%83%A1-%E3%82%BF%E3%82%A4%E6%96%99%E7%90%86">タイ料理</a></li>
   <li><a href="https://www.charlottehibi.com/archive/category/%E3%82%B0%E3%83%AB%E3%83%A1-%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3">ラーメン</a></li>

    <li><a href="https://www.charlottehibi.com/archive/category/%E5%AE%9F%E9%A3%9F%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC">実食レビュー</a></li>
    <li><a href="https://www.pixiv.net/member.php?id=31467414">pixiv</a></li>
    <li><a href="https://www.itjigoku.com/">元IT土方の供述</a></li>
    <li><a href="https://www.charlottehibi.com/contact">お問い合わせ</a></li>
</ul>
</div><!--toggle-content-->
</div><!--toggle-contents-->

<div class="btn-area">
<a class="home-btn" href="https://charlottehibi.hatenadiary.jp/"><i class="blogicon-home lg"></i><br>HOME</a>
<span class="toggle-btn"><i class="blogicon-good lg"></i><br>人気記事</span>
<span class="toggle-btn"><i class="blogicon-bookmark lg"></i><br>はてブ順</span>
<span class="toggle-btn"><i class="blogicon-list lg"></i><br>カテゴリ</span>
<span class="back-btn"><i class="blogicon-chevron-up lg"></i><br>Top</span>
</div><!--btn-area-->
<div style="clear: both;"></div>
</div>
 
<style type="text/css">
#menu{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 10;
}
.toggle-content{
    display: none;
    position: fixed;
    bottom: 50px;
    background: white;
    width: 100%;
}
.toggle-content .hatena-module{
    padding: 15px 10px 10px 10px;
}
.toggle-content .hatena-module-body{
    font-size: 80%;
}
.toggle-content .hatena-module-body a{
    color: #444;
    font-weight: bold;
}
.toggle-content .hatena-module-body .urllist-image{
    width: 50px;
    height: 50px;
}
.toggle-content .urllist-item{
    padding: 0;
    margin: 0;
    min-height: 29px;
}
.toggle-content .urllist-item::before{
    display: none;
}
.category-list{
    list-style-type: none;
    margin: 0;
    width: 100%;
    padding-left: 0;
}
.category-list a{
    display: block;
    float: left;
    width: calc(50% - 2px);
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #444444;/*カテゴリの背景色*/
    color: #f0f0f0;/*カテゴリの文字色*/
    font-size: 80%;
    border: 1px solid #333;/*カテゴリリスト間の線の色*/
}
.btn-area a,
.btn-area span{
    display: block;
    float: left;
    width: 20%;
    height: 50px;
    line-height: 25px;
    text-align: center;
    font-size: 70%;
    background: #444444;/*メニュー部分の背景色*/
    color: #ffffff;/*メニュー部分の文字色*/
}
</style>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var contentArea = $(".toggle-content");
    $(".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();
        };
    });
    $(".back-btn").click(function(){
        $("html,body").animate({scrollTop:0},"fast");
    });
});
</script>

1.上記の複合メニューバーコードの38行目～50行目の「<li><a href="URL"></a>カテゴリー</li>」をご自身のブログのカテゴリー毎のURLに書き換えてください。

2.上記の複合メニューコードの56行目の「"https://charlottehibi.hatenadiary.jp/"」をご自身のブログのURLに書き換えてください。

f:id:UrushiUshiru:20180416164116j:plain

3.上記のコードの116行目でカテゴリーの背景色を、117行目でカテゴリーの文字色を変更します。変更するのは「#〇〇〇〇〇〇」という6桁の数字で、以下のサイトを参考に好きな色に値を変更してください。

html-color-codes.info

f:id:UrushiUshiru:20180416164200j:plain

4.上記のコードの下の方の130行目で複合メニューバーのメニュー部分の背景色を、131行目でその部分の文字色を変更します。変更するのは「#〇〇〇〇〇〇」という6桁の数字です。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

5.上記コードの下の方（135行目）にあるJavaScriptファイルを参照しているコードのhttpの部分をhttpsに変更します。

「src="http://code.jquery.com/jquery-1.9.1.min.js"」

　　　　⇓変更

「src="https://code.jquery.com/jquery-1.9.1.min.js"」

新しく作成したブログだと、はてなブログの仕様が変わり「http://～」から始まる参照先が読み取れなくなったのか、複合メニューが動作しませんでした。

「https://～」から始まるアドレスに参照できなかったら詰んでたでござる・・・。

f:id:UrushiUshiru:20180416171142j:plain

6.はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に変更した複合メニューバーのコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

f:id:UrushiUshiru:20180416171959j:plain

7.これで複合メニューバーの設置は完了です。

はてなブログのフッターに『コピーライト』や『お問い合せリンク』を導入する方法を公開しますの！

スマホデザインのカスタマイズ

以下のサイトを参考にカスタマイズしていきます。

以下のサイト通りにカスタマイズすれば問題無いのですが、カラー等変更した場所をピックアップして紹介します。

www.ituore.com

記事タイトル・日付の色

f:id:UrushiUshiru:20180416203327j:plain

「日付」と「記事タイトル」は上記の画像で指し示した部分です。

<style type="text/css">
/*記事タイトル・日付の色*/
.list-entry-article .date, .date {
    color:#008080; /* 日付の色 */
}
.list-entry-article .entry-title, .entry-title a {
    color:#4444444; /* 記事タイトルの色 */
}
</style>

上記コードで記事一覧の「日付（4行目）」と「記事タイトル（7行目）」の「#〇〇〇〇〇〇」という6桁の数字を自分が指定したい色の値に変更します。

更新時刻の色

f:id:UrushiUshiru:20180416203905j:plain

「更新日付」は上記の画像で指し示した部分です。

<style type="text/css">
/*更新時刻の色*/
.list-entry-article .entry-footer {
    background:#CC3399; /* 背景色 */
    color:#EEEEEE; /* 文字色 */
}
</style>

上記コードで記事一覧の「更新時刻」の色を変更します。ちなみに「#〇〇〇〇〇〇」という6桁の数字を自分が指定したい色の値に変更することができます。

カテゴリーの色

f:id:UrushiUshiru:20180416204117j:plain

「カテゴリー」は上記の画像で指し示した部分です。

<style type="text/css">
/*カテゴリの色*/
.categories a {
    color:#fffff	; /* 文字色 */
    background:#0099CC; /* 背景色 */
}
</style>

上記コードで記事内の「カテゴリー」の色を変更します。ちなみに「#〇〇〇〇〇〇」という6桁の数字を自分が指定したい色の値に変更することができます。

f:id:UrushiUshiru:20180416205347j:plain

以上でスマホ版ブログのデザインカスタマイズは完了です。

オリジナルの画像で上に戻るボタンを設置する方法

まとめ

サブブログ「シャルの甘美なる日々」はこんな感じでカスタマイズしています。

参考になるか分かりませんが、カスタマイズしてみてはいかがでしょうか？

次は、会話吹き出しの設置と見出しのカスタマイズについて記事にしようと思います。

この記事書くの面倒くさかったでござるよ・・・

最後まで読んでいただきありがとうございました！