効率165センチメートル

ちいさな体で効率的に生きていく

【コピペ】はてなブログのサイドバーをおしゃれに見やすく【カスタマイズ】

f:id:k07_20:20191005182644j:plain

はてなブログをご利用の皆さん。サイドバーってカスタマイズしてますか?

 

記事中や、見出し、グローバルメニューはよくみかけますが、

サイドバーをいじっていない方、結構多め。

 

ということで、今日ははてなブログのサイドバーをカスタマイズしていきます。

 カスタマイズ準備

カスタマイズ前にいろんな情報を確認しておきます。

使用しているテーマ

当ブログでは、テーマ【UnderShirt】を使用しています。

blog.hatena.ne.jp

※UnderShirtでなければうまく反映されないかもしれません。

カスタマイズ結果

今回行うカスタマイズで以下のようになります。

 

before

f:id:k07_20:20191005180629p:plain

after

f:id:k07_20:20191005180632p:plain

 

サイドバーカスタマイズ内容

カスタマイズ内容は以下の通り。

 

  • 文字を中央寄せへ
  • フォントが太さを細めに変更して、軽やかに
  • 細くした分存在感が無くなるので、文字のサイズは少し大きめに

 

カスタマイズ場所

カスタマイズ場所は以下の通り。

 

ダッシュボードーデザインースパナマークーデザインCSS

 

 ダッシュボード→デザイン

f:id:k07_20:20191019092610p:plain

 カスタマイズ(スパナマーク)

f:id:k07_20:20191005180656p:plain

 

デザインCSS

f:id:k07_20:20191019092600p:plain

 

上の赤枠内にコードをコピペしてください

【コピペOK】カスタマイズコード

さて。

 

それでは実際にカスタマイズを行います。

 

コピペコード

以下のコードをデザインCSSに貼り付けてください。

 

.hatena-module-title{
 text-align:center;
 color: #000;
 font-size:25px;
 font-weight:300;
}

 

はい、プレビューを確認してください。

おそらくできているはずです。

コード解説

一応、コードの解説もしておきます。

 

はてなブログのサイドバーのclassは「.hatena-module-title」となっていますので、

「.hatena-module-title」の{}の中にコードを書いていってます。

 

文字列を中央へ
.text-align:center

 

これでサイドバーの文字列を中央寄せにしています。

 

UnderShirtではデフォルトで左詰めになっています。

文字色を黒に
.color:#000;

 

これで、文字列の色を指定しています。

 

ここでは黒になっていますが、「#000」の部分を変えて好きな色に変更してみてください。

 

色は下記に細かく乗っているので秀逸です。

 

www.colordic.org

文字サイズを大きく
font-size:25px;

 

ここでは、読んだまま、フォントサイズを指定しています。

 

「25px」を指定しています

 

もっと大きいサイズがいい方はpx数を大きく
もっと小さいサイズがいい方はpx数を小さくしてください。

 

1pxずつ調整することをお勧めします。

文字の太さを指定
font-weight:300;

 

ここでは文字の太さを指定しています。

 

もっと大きいサイズがいい方は数値を大きく
もっと小さいサイズがいい方は数値を小さくしてください。
 
100くらいずつ調整することをお勧めします。

サイドバーもしっかりカスタマイズ

以上が、サイドバーのカスタマイズです。

 

ぶっちゃけ結構楽でしたね。

 

少し手を加えるだけでガラッと雰囲気も変わります。

 

見落としがちなサイドバーもしっかりカスタマイズしましょう。

その他のカスタマイズ

その他にもカスタマイズ記事ありますので、よかったら参考にしてください。

 はてなスター機能を残したまま非表示にする

www.165-cm.com

記事一覧のカスタマイズ

 記事一覧を大きなカード型へ

www.165-cm.com

 

記事を枠線で囲む

www.165-cm.com

 

 選択した記事を透けさせるカスタマイズ

www.165-cm.com

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

サイドバーを見やすくする

www.165-cm.com