つなろっく

イロトリドリな毎日

はてなブログのテーマ「Brooklyn」を「ZENO-TEAL」っぽくデザインをカスタマイズ

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

おすっ!つな(@tu_na_69)です(*‘∀‘)

はてなブログで人気のふたつのテーマ「Brooklyn」と「ZENO-TEAL」のいいところを組み合わせたカスタマイズをしてみました。

 

今回のカスタマイズのポイントは次の3つです。

  • サイトを軽くして表示速度を速くしたい
  • シンプルなテーマをカスタマイズ
  • デザインを変えずにテーマをチェンジ

 それでは、さっそくカスタマイズしてみましょう。

Brooklynに変更した理由

「ZENO-TEAL」ははてなブログの中でもデザイン性の高さで人気のテーマです。

トップページがおしゃれなカード型レイアウトでとても気に入っていたのですが、なんとなくサイトの重さが気になりました。

ところで、あなたのサイトのトップページはどれくらい見られていますか?

トップページをおしゃれにしたい!と考える人は多いですが、あまり見られていないのであれば、サイトの表示速度を速くする方を重視したほうがいいかもしれません。

「つなろっく」はトップページの閲覧率は1.81%(約2%)でした。

今回のカスタマイでは、トップページのカード型レイアウトにこだわらず、より軽いテーマに乗り換えて、できるだけこれまでに近いデザインにカスタマイズしてみました。

 

「Broklyn」の設定をする

①テーマ「Brooklyn」をインストールして、テーマを変更します。

「ダッシュボード」→「デザイン」→「デザインテーマ」で「Brooklyn」をインストールして適応します。

②ナビゲーションバーを設置します。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「ヘッダ」で「タイトル下」にコードを貼り付けてください。

こちらの記事で詳しくまとめています。色変更のカスタマイズもこちらの記事にまとめています。

 

カスタマイズをしよう

このサイトで行ったカスタマイズのメモです。カスタマイズの前には必ずバックアップを取ってください。コードのコピペは自己責任でお願いします。

テーマカラーを設定する

まず最初に、サイト全体のテーマカラーを決めて、まとめて設定します。

「ZENO-TEAL」では、メインカラーを中心に3つの色を使ったデザインにまとめています。カラーテーマの変更をまとめた記事を参考に、cssでカラーを設定しました。

カスタマイズ5:全体のテーマカラーを変更する - ZENO-TEAL

メインカラー(#23a393)は、タイトル背景、見出しの色など。

薄い色(#fe9191)は、ナビゲーションバーの色に設定しています。

背景画像を設定する

 好きな背景画像を準備します。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「背景画像」を開きます。

「ファイルをアップロード」をクリックして、画像を選択します。これでOKです。

この場合、背景色が透過されてしまうので、メインやサイドバーの背景を白に設定します。

/*メイン画面のカスタマイズ*/
#main{
background:#fff !important;
}

タイトルフォントを設定

サイトを軽くするために、タイトルには画像を使用していません。代わりに、Googleフォントの日本語フォントを使っています。

サイドバーのカスタマイズ

サイドバーの背景が透過されているのを白に変更します。タイトルをカスタマイズしました。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」にコードを貼り付けます。

/*サイドバー白背景*/
#box2-inner {
background-color:#fff; padding:5px;
}
/*サイドバーのカスタマイズ*/
.hatena-module-title
{ position: relative; text-align: center; background-color: #23a393; color: #fff; font-weight: bold; margin-bottom: 15px; padding: 6px; border: 0px; font-size: 120%; } .hatena-module-title a { color: #fff; }

見出しのカスタマイズ

見出しのカスタマイズをするために、先にBrooklynの見出し設定を無効化します。無効化を行わないと、デザインが重なって表示されてしまいます。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」に下記のコードを貼り付けます。

/* 見出し無効化 */
.hatena-module-title:before {
    border-style: none;
    display: none;
}
.hatena-module-title:after {
    border-style: none;
    display: none;
}

このコードの後に好きな見出しのコードを貼り付けてください。

はてなブログの見出しをコピペでおしゃれにカスタマイズ - つなろっく

 

もくじのカスタマイズ

もくじのカスタマイズはこちらのサイトを参考にさせていただきました。とても見やすくてすっきりとしたデザインです。

サイトスピードの検証

気になるサイトスピードを検証してみましょう。

PageSpeed Insights

今回は画像を準備しませんでした。

【テーマ変更前】→【テーマ変更後】

【モバイル】21→21

【パソコン】32→43

あまり変わっていないような気もしますが(;^ω^)

個人的には、サイトを開いた時に表示されるまでのぐるぐるの時間が短くなったように感じます。

まとめ

テーマ変更をしても、できるだけデザインをそのままにできないかなぁという思いつきからはじまった挑戦。カラーコードをそろえるだけでも、だいぶそれっぽくなりました。

はてなブログは重いと言われがち(らしい)ので、できるだけ軽くてシンプルなテーマを選んで、おしゃれで個性的なデザインにカスタマイズできたら、理想的かもしれませんね。

あとは、実際軽くなったのかどうか、アクセス数の伸びなど、経過を観察してみたいと思います。またご報告しますね。 

記事を紹介してくれたサイト

この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。

【はてなブログ】当ブログに適用したカスタマイズのまとめ【Brooklyn】 - ジョー・ヒタギの止リ木 | 「ものづくり」や「ものなおし」をするブログ