はてなブログのテーマをBrooklynに変えました

f:id:pea-nut:20180130100748p:plain

おすっ！つな（@tu_na_69）です(*´▽｀*)

はてなブログの人気テーマ「brooklyn」のカスタマイズ記録です。

テーマBrooklynをインストール
グローバルナビを設置する
グローバルナビのカスタマイズ
SNSのシェアボタンをカスタマイズ
記事を紹介してくれたサイト

ベニシアさんの公式テーマがとても気に入っていたのですが・・・

pea-nut.hatenablog.com

スマホでサイトを開いてみたら、PCと同じ表示なのですよ(;´･ω･)

あれ？スマホ用の表示じゃないの？

それから、Twitterで更新のお知らせをしたかったのですが、SNSボタンがないので、それも設置しなくちゃいけない(◎_◎;)

レスポンシブ非対応、SNSボタンがない、などいくつか残念な点もあり、テーマ変更に踏み切りました。

そうして見つけたのが、シンプルでカスタマイズしやすそうなテーマ「Blooklyn」

f:id:pea-nut:20180128171454p:plain

コードを加えるだけで、SNSボタンもナビゲーションバーも簡単に設置できます。

テーマBrooklynをインストール

ダッシュボードの「デザイン」→「デザインテーマ」の一番下にある「テーマストアでテーマを探す」をクリックします。

「人気のテーマ」のところに、ちゃっかりといらっしゃいました( *´艸｀)

さすがです。

「プレビューしてインストール」をクリックすると「適用するブログを選択」が出てきます。

f:id:pea-nut:20180128172030p:plain

ブログを選んで、インストールします。

グローバルナビを設置する

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

w ww.notitle-weblog.com

グローバルナビのカスタマイズをします。

①「NO TITLE」さんのページから、コードをコピーします。

②ダッシュボードから「デザイン」→「カスタマイズ」→「ヘッダ」をクリックします。

「タイトル下」にコピーしたコードを貼り付けます。

③表示したいカテゴリーのURLとタイトルを入力します。

f:id:pea-nut:20180129173050p:plain

「ここにリンク先のアドレス」の部分にカテゴリのURLを。

「ここにメニューの名前」の部分にカテゴリ名を入力します。

項目は５つまでがいいようです。

もうひとつカテゴリを表示させたくて、コピペで増やしてみたのですが、デザインが崩れます。

厳選して5つ選んでね。

グローバルナビのカスタマイズ

グローバルナビの色を変更することもできます。

「デザイン」→「カスタマイズ」→「カスタムCSS」にCSSを貼り付けます。

「カラーコード」に好きな色を設定してください。

/*ナビゲーションバーの色変更*/
#global-menu {
 background-color: #カラーコード;/*ナビバーの両サイド色*/
 border-bottom: 2px solid #カラーコード;/*ナビバー下線色*/
 }
 .global-menu-list li a {
 color: #fff; /*ナビメニューの文字色*/
 background-color: #カラーコード; /*ナビバーの背景色*/
 }
 #mobile-head {
 background-color: #カラーコード;  /*モバイルナビバーの背景色*/
 }