はてなブログカスタマイズ(CSS)Tips集

このブログのレイアウトを自分でカスタマイズをしています。この投稿でその内容を公開しますが、基本的には自分のための備忘録です。

全体的な知識

カスタマイズのコードを貼るところ

ダッシュボード＞デザイン＞カスタマイズ（レンチマーク）→デザインCSS　です。

色見本

原色大辞典でカラーコードを確認しています。
www.colordic.org

はてなブログにコードを書く方法

Markdown方式でコードを書く（私は使っていませんが「はてな記述」でも可能） コードをバッククォート×3(Shift+@)で挟む

Font Awsomeの使用

管理画面>設定>詳細設定>headに要素を追加

カスタマイズ内容

ブログ本文

body{
background:#f0f8ff;
font-family: "メイリオ";
}

#title a,
#blog-title #blog-description {
color: #000000;
font-size: 2em;
font-family: "メイリオ”;
}

#blog-title {
padding-top: 50px;
padding-bottom: 50px;
height: initial;
text-align: center;
}

.entry-content {
    font-size:17px;
}

アンダーラインを蛍光ペン風にする

article u{
    text-decoration: none;
    background: linear-gradient(transparent 50%, #fff1cf 50%);
}

目次デザインの変更

こちらのサイトの中段にあるデザインをコピペ www.fuji-blo.com

見出し

見出しはこちらを参考に少しだけいじっています。 saruwakakun.com

h2 {
  padding: 0.5em;/*文字周りの余白*/
  font-size: 20px;
}

h3 {
  position: relative;
  color: white;
  background: #93c9ff;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}

h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

h4 {
  border-bottom: solid 3px #dcdcdc;
  position: relative;
}

h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #93c9ff;
  bottom: -3px;
  width: 20%;
}

h5 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

h5:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #93c9ff; /*アイコン色*/
  font-weight: 900;
}

サイドバー

サイドバーは基本的には以下のサイトのCSSをコピペ。
redo5151.hatenablog.com

コピペだけだと反映されなかったので、「font-weight: bold;」を追加し、 contentの値の頭に「\f」を追加したらうまく動きました。

例：「content: "\f2bb";」(赤字部分)

追従するサイドバー

目次は、以下のサイトを参考にしました。 twilyze.hatenablog.jp

トップページでの目次の表示と、目次を押すとトップに飛ぶリンクが不要かなと思いまして、以下のように変更を加えています。

{
  class : 'page-index',
  title : 'このページの記事一覧',
  listPage : true,
  display : true　→　false
},
{
  class : 'page-archive',
  title : 'このページの記事一覧',
  listPage : true,
  display : true　→　false
},
const TOC_TITLE_TOP   = true → false

ソースコードを一括選択

こちらのサイトのCSSをコピペ 7cc.hatenadiary.jp