「Brooklyn」作成者である シロマティ 氏に最大の敬意と感謝を込めて
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました – NO TITLE
はてなブログの人気テンプレート「Brooklyn」の特徴は下記3点
- レスポンシブデザイン
- ユーザビリティを追求したシンプルデザイン
- カスタマイズ性の高さ
本記事では、「Brooklyn」のカスタマイズ方法を紹介していく。
色変更方法
WEB色見本 原色大辞典を参考に「#??????;」の?部分を変更
※無色は「color: transparent;」と入力。「#」は必要ない。
最初にやるべきこと
「Brooklyn」テンプレートをスマホ表示画面に適用しよう。レスポンシブデザイン(デバイスごとの画面幅に対応し、自動でページデザインを組み替えるような設計)の最大の強みは、スマホでもエレガントな画面表示ができるところにある。
方法:「ダッシュボード>デザイン>スマートフォン>詳細設定」にある
レスポンシブデザイン項目にチェックを入れる
ブログタイトルの下にあるメニューバーのカスタマイズ(はてな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」に張り付ける。