つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~サイドバーデザイン変更

1. サイドバーデザインの変更

 今回は本ブログのサイドバーのデザインを変更した。変更点としては、

  1. サイドバーにリファレンスを追加
  2. サイドバーのタイトルデザインを変更(書体も変更)

の2点となる。

2. サイドバーにリファレンスを追加

 Aruduino、HTML/CSSTeXに関してよく参照するサイトのリンクをリファレンスとしてアクセスできるようにした。まずデザイン設定->カスタマイズ->サイドバーからモジュールを追加からHTMLを選択する。単にリンク-編集からサイトを追加してもよいが、分野ごとにリンクを整理したかったのでHTMLを利用する。(リンクを単に並べるだけであれば、リンクの編集からサイトを追加した方が楽)HTMLモジュールはHTMLコードなど(ほかにはてな記法Markdownが選択できる)で記述することができる。記述したHTMLコードを下に示す。

<div class="side_link1">
<p><i class="fas fa-angle-double-right"></i>&nbsp;Arduino関連</p>
<ul>
<li><a href="http://www.musashinodenpa.com/arduino/ref/">Arduino日本語リファレンス</a></li>
<li><a href="https://www.arduino.cc/reference/en/">Arduino公式(英語)</a></li>
</ul>

<p><i class="fas fa-angle-double-right"></i>&nbsp;HTML/CSS関連</p>
<ul>
<li><a href="http://www.netyasun.com/home/color.html">HTMLカラーコード一覧</a></li>
<li><a href="https://www.webcreatorbox.com/webinfo/color-name">WebカラーRGB値一覧</a></li>
<li><a href="https://weblan3.com/html/special-character">HTML特殊文字一覧表</a></li>
<li><a href="http://www.htmq.com/">HTML/CSSリファレンス</a></li>
<li><a href="https://saruwakakun.com/html-css/reference">CSSデザイン集</a></li>
</ul>

<p><i class="fas fa-angle-double-right"></i>&nbsp;TeX関連</p>
<ul>
<li><a href="http://www.latex-cmd.com/">LaTexコマンド集</a></li>
<li><a href="https://medemanabu.net/latex/latex-commands-list/">LaTeX入門</a></li>
<li><a href="http://www.ic.daito.ac.jp/~mizutani/tex/special_characters.html">LaTeX特殊文字</a></li>
</ul>


FontAwesomeを利用できるように、あらかじめデザインCSSに記述している状態で(設定方法は下記参照)

atatat.hatenablog.com

アイコンを入れるためには、<i class="fas fa-angle-double-right">として、さらにスペース調整のためスペース用のHTML特殊文字&bsp;でアイコンと文字に余白をいれた。 リンクはArduino関連、HTML/CSS関連、TeX関連の下にリスト形式で並べた。

最後にサイドバーの表示順を変えるため、一番下に追加されたHTMLをドラッグして上に移動させてリンクと入れ替える。

2. サイドバーのデザイン変更

 追加したリファレンス(HTMLモジュール)も含めてデザインを変更するために下記のコードをデザインCSSに追記した。

/*サイドバー設定*/

.hatena-module-title{
  padding: 0.4em 0.5em;
  background: rgba(144, 238, 144, 0.1);
  border: solid 2px #8FBC8F;
  border-radius:8px;
  box-shadow: 0px 3px 5px rgba(85, 107, 47, 0.5);
  font-weight:bold;
  text-align:center;
  font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "MS ゴシック", sans-serif;
  }

/*----プロフィール----*/
.hatena-module-profile .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: '\f2bb';/* アイコンフォント */
  position: relative;
  left : 0.1em;

/*----検索----*/
.hatena-module-search-box .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: '\f002';
  position: relative;
  left : 0.1em; 
}

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

/*----最新記事----*/
.hatena-module-recent-entries .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: '\f303';
  position: relative;
  left : 0.1em; 
}
.hatena-module-recent-entries a{
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "MS ゴシック", sans-serif;
}

/*----注目記事----*/
.hatena-module-entries-access-ranking .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: '\f201';
  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", "MS ゴシック", sans-serif;
}
/*----カテゴリー----*/

.hatena-module-category .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: '\f022';
  position: relative;
  left : 0.1em; 
}
.hatena-module-category a{
font-family:"メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "MS ゴシック", 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: "Font Awesome 5 Free";
  content: '\f09e';
  position: relative;
  left : 0.1em; 
}
.hatena-module-links a{
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "MS ゴシック", sans-serif;
}

.side_link1 p{
color:darkslateblue;
font-weight:bold;
font-size:120%;
margin:0;
}
.side_link1 li a{
color:#003300;
}
.side_link1 ul  {
color:#003300;
}

モジュールタイトルのデザイン
 モジュールのタイトル(プロフィール、検索、最新記事・・・)のデザインを変更するにはセレクタ.hatena-module-titleで指定する。バックグラウンドを透過色にするため、カラーコードやカラー名ではなくbackground:rgba();を用いる。最後の引数が透明度をあらわし、1が塗りつぶし、0が透明で0~1の値を指定する。書体はブログ本体とは別に指定する必要があり、本体の書体と同じものをfont-familyで指定する。

モジュールタイトルにアイコン挿入
 サイドバーのタイトルを記述しているのHTMLコードが明示されていないので、HTMLコード中にFontAwesomeのアイコンを記述する<i class="~"> </i>を書き込むことができない。そこでFontAwesomeのアイコンを入れるためには、CSSの疑似要素:beforeを使って追加する。プロフィール内のタイトルを選択するには.hatena-module-profile .hatena-module-title:beforeとする。font-family: "Font Awesome 5 Free";content:アイコンの文字コード;とするとタイトルの前にアイコンが挿入される。アイコンの文字コードについてはFontAwesomeサイトFont Awesome内の各アイコンのページに記載されている。

最後にリファレンスの書式設定をするには、あらかじめサイドバーのhtmlコード中class名side_link1を設定しておいたので、セレクタ.side_link1を用いてスタイルを記述すればよい。