Style 21世紀×Deaf×INFP

自由なき人生など、惨めなものだ - Andrew Hamilton

はてなブログテンプレート【Brooklyn】のカスタマイズ集

f:id:yRy:20160427185955j:plain

 

「Brooklyn」作成者である シロマティ 氏に最大の敬意と感謝を込めて
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE

 

 

はてなブログの人気テンプレート「Brooklyn」の特徴は下記3点

  • レスポンシブデザイン
  • ユーザビリティを追求したシンプルデザイン
  • カスタマイズ性の高さ

本記事では、「Brooklyn」のカスタマイズ方法を紹介していく。

参考サイト1:はてなブログの超便利なデザインテーマ「Brooklyn」を作りました -NO TITLE
参考サイト2:「Brooklyn」質問用ページ - NO TITLE

 

色変更方法
WEB色見本 原色大辞典を参考に「#??????;」の?部分を変更
※無色は「color: transparent;」と入力。「#」は必要ない。

 

最初にやるべきこと

「Brooklyn」テンプレートをスマホ表示画面に適用しよう。レスポンシブデザイン(デバイスごとの画面幅に対応し、自動でページデザインを組み替えるような設計)の最大の強みは、スマホでもエレガントな画面表示ができるところにある。

方法:「ダッシュボード>デザイン>スマートフォン>詳細設定」にある
    レスポンシブデザイン項目にチェックを入れる

f:id:yRy:20160427175243p:plain

 

ブログタイトルの下にあるメニューバーのカスタマイズ(はてなProのみ)

(カスタマイズ内容)
PCで表示したとき、グローバルナビをタイトル下に固定(画面スクロールに反応しない)
スマホで表示したとき、グローバルナビ(ボタン展開式)を常に画面上部に表示(画面スクロールに反応)

下記コードを「デザイン>カスタマイズ>ヘッダ>タイトル下」に貼り付け

<div id="trigger-point">
</div>
<div id="global-menu">
    <div id="mobile-head">
        <div id="nav-toggle">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <ul class="global-menu-list">
         <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
         <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
         <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
         <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
         <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
</a></li>
    </ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function (){
    // 変数に代入
    var $nav = $('#global-menu');
    var $content = $('#content');
    var $offsetTop = $('#trigger-point').offset().top;

    // 固定メニューの設定
    function fixedNav() {
        if($(window).scrollTop() > $offsetTop){
            $nav.addClass('fixed');
        } else {
            $nav.removeClass('fixed');
        }
    };

    // Toggle メニューの設定
    $('#nav-toggle').click(function (){
        $nav.toggleClass('open');
    });
    $('#content').click(function (){
        if($nav.hasClass('open')){
            $nav.removeClass('open');
        }
    })
});
</script>

 

グローバルナビ(ブログタイトルの下にあるメニューバー)の色変更

下記コードを「デザイン>カスタマイズ>デザインCSS」に貼り付け

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

 

ブログタイトル(ヘッダ)の色変更

下記コードを「デザイン>カスタマイズ>デザインCSS」に貼り付け

/*ヘッダの文字色変更*/
#container #blog-title {
 background-color: #fff; /*ヘッダの両サイドの背景色変更*/
 border-bottom: 1px solid #fff; /*ヘッダ下部(&ナビメニュー上部)のラインカラー変更*/
 }
 #blog-title #title a {
 color: #111; /*ブログタイトルの文字色変更*/
 }
 #blog-title #blog-description {
 color: #111; /*ブログタイトルの下部に表示される説明文の文字色変更*/
 }

 

本文とサイドバーの間にあるラインの色変更

下記コードを「デザイン>カスタマイズ>デザインCSS」に貼り付け

/*本文とサイドバーの間にあるラインの色変更*/
#main {
 border-right: 1px solid #f0f0f0;
 }

 

記事タイトルと記事本文の間にあるラインの色変更

下記コードを「デザイン>カスタマイズ>デザインCSS」に貼り付け

/*記事タイトルと記事本文の間にあるラインの色変更*/
 .entry-header {
 border-bottom: 1px solid #ddd;
 }

 

サイドバータイトルの文字・囲い・背景の色変更

下記コードを「デザイン>カスタマイズ>デザインCSS」に貼り付け

.hatena-module-title {
   color: #111; /*サイドバーのタイトルの文字色変更1*/
   border: 1px solid #111; /*サイドバーのタイトル囲いの色変更1*/
}
.hatena-module-title:before{
   border-top-color: #111; /*サイドバーのタイトル囲いの色変更2*/
}
.hatena-module-title after{
   border-top-color: #fff; /*サイドバーのタイトル囲いの色変更3*/
}
.hatena-module-title a {
   color: #111;  /*サイドバーのタイトル(リンク有)の文字色変更2*/
}

 

記事タイトルの左上にある投稿年月日の色変更

下記コードを「デザイン>カスタマイズ>デザインCSS」に貼り付け

/*(記事タイトルの左上にある)投稿年月日の色変更*/
.date a {
  color: #f0f0f0; /*投稿年月日の文字色変更*/
  background-color: #111; /*投稿年月日の背景色変更*/
}

 

フッダー(サイト最下部)の色変更

下記コードを「デザイン>カスタマイズ>デザインCSS」に貼り付け

/*フッダー(サイト最下部)の色変更*/
#footer {
 background-color: #fff;
}

 

はてなブログ グローバルヘッダのカスタマイズ

はてなブログ グローバルヘッダの色変更

下記コードを「デザイン>カスタマイズ>デザインCSS」に貼り付け

/* グローバルヘッダのカスタマイズ */
#globalheader-container {
    color: #333; /* #の部分を好きな色にする */
    background: #fff; /* #の部分を好きな色にする */
}

はてなブログ グローバルヘッダの非表示

下記コードを「デザイン>カスタマイズ>デザインCSS」に貼り付け

/*グローバルヘッダの非表示*/
#globalheader-container {
    display: none;
}

 

その他、「Brooklyn」CSSのカスタマイズ方法

1)下記URLをクリックし、BrooklynのCSSを呼び出す。
http://hatenablog.com/theme/6653586347155924442.css

2)CSSの中から、変更したい箇所のタグを引っ張りだし、しかるべき変更を加えたあとに、「デザイン>カスタマイズ>デザインCSS」に張り付ける。

CSSのルールについては下記サイトが分かりやすい

www.ituore.com

 

SNSボタン、見出し等のカスタマイズ

下記記事の当該項目を参考

www.style-yry.com