ブログデザイン備忘録 ~読者になるボタン変更他

今回はサイドバーのデザインを追加で変更した。変更点は読者になるボタンのデザインを少しだけ変更したことと、サイドバーのアイコンをFontAwesomeからはてなWebアイコンに変更した。

1. 読者になるボタンを変更
2. サイドバーのタイトルアイコン変更
3. その他

1. 読者になるボタンを変更

　読者になるボタンのデザインを変更するにはデザインCSSでセレクタ .hatena-follow-buttonでスタイルを指定する。今回はあまり大きな変更はせず、フォントサイズが小さいので少し大きくしたのとボタンの輪郭、影をつけた。

/* 読者になるボタン */
.hatena-follow-button {
    font-size:150%;
    border: solid 2px #8FBC8F;
    box-shadow: 0px 5px 8px rgba(85, 107, 47, 0.5);
}

大幅にデザインを変更することも可能だが、backgroundやcolorなどで優先順位を上げる!importantをつけないと変更できないものがいくつかあった。これらを使用する場合はデザインCSSの最後の方にコードを記述した方がよいだろう。またセレクタ.hatena-follow-buttonは共通の設定で、例えば読者になった場合の表示などは.hatena-follow-button.subscribingになる。 (詳しくは「読者になるボタン」をカスタマイズ！光って動くよ【はてなブログ】 - いろいろないきものの話を参照）

2. サイドバーのタイトルアイコン変更

　前回のサイドバーデザイン変更でタイトルにFontAwesomeのアイコンを入れていたが、はてなのWebアイコンで1部代用した。

atatat.hatenablog.com

はてなのWebアイコンはデフォルトでロード時に読み込まれているのでFontAwesomeを用いるよりもページの読み込みが早くなる可能性がある。特にサイドバーの上部のタイトルのアイコンは、FontAwesomeを用いるより表示が早いように感じる。ページ下のアイコン：リファレンスや>>、トップに戻るはFontAwesomeのデザインがよいのでそのままにしているが、読み込みが遅いとしてもスクロールする必要があるので目立ちにくい。

はてなWebアイコンの指定方法は、font-family:blogicon;としてcontent:'\アイコンのコード;とすればよい。コードとアイコンの対応ははてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい！にまとまっている。あと前回にページ下に表示される関連記事にも（忘れていた）アイコンを入れた。関連記事のセレクタは.hatena-module-related-entries

/*サイドバー設定*/

/*----関連記事----*/
.hatena-module-related-entries .hatena-module-title:before {
  font-family: "blogicon";
  content: '\f014';/* アイコンフォント */
  position: relative;
  left : 0.1em;
}  

/*----プロフィール----*/
.hatena-module-profile .hatena-module-title:before {
  font-family: "blogicon";
  content: '\f00b';/* アイコンフォント */
  position: relative;
  left : 0.1em;
}
/*---検索----*/
.hatena-module-search-box .hatena-module-title:before {
  font-family: "blogicon";
  content: '\f01a';
  position: relative;
  left : 0.1em; 
}

/*----最新記事----*/
.hatena-module-recent-entries .hatena-module-title:before {
  font-family: "blogicon";
  content: '\f013';
  position: relative;
  left : 0.1em; 
}

.hatena-module-recent-entries a{
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}

/*----月別アーカイブ----*/
.hatena-module-archive .hatena-module-title:before {
  font-family: "blogicon";
  content: '\f022';
  position: relative;
  left : 0.1em; 
}

/*----注目記事----*/
.hatena-module-entries-access-ranking .hatena-module-title:before {
  font-family: "blogicon";
  content: '\f01b';
  position: relative;
  left : -0.1em; 
}
.hatena-module-entries-access-ranking a{
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}
/*----カテゴリー----*/

.hatena-module-category .hatena-module-title:before {
  font-family: "blogicon";
  content: '\f003';
  position: relative;
  left : 0.1em; 
}
.hatena-module-category a{
font-family:"メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}

/*----HTML----*/
.hatena-module-html .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: '\f19d';
  position: relative;
  left : -0.1em; 
}

/*----リンク----*/
.hatena-module-links .hatena-module-title:before {
  font-family: "blogicon";
  content: '\f04e';
  position: relative;
  left : 0.1em; 
}

.hatena-module-links a{
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}

3. その他

ブログの記事タイトルの書体だけ、本文のメイリオと異なっていたので統一するため以下のように設定した。

.entry-title a{
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}