はてなブログテンプレート【Brooklyn】のカスタマイズ集 | 質問の答えを募集中です! はてなブログテンプレート【Brooklyn】のカスタマイズ集 | 質問の答えを募集中です!

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

アフィリエイト

f:id:yRy:20160427185955j:plain

 

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

 

 

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

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

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

色変更方法
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」に張り付ける。



 ⬇人気の記事!⬇

タイトルとURLをコピーしました