はてなブログにカスタムcssをあてる

備忘のために、cssデザインの変更方法と変更内容をメモします

1. 変更方法

  • はてなブログにログインし、ダッシュボードからデザインを選択

  • カスタマイズボタンをクリック

  • 左下の{}デザインcssをクリック

  • 枠内にcssを貼り付けて保存する

2. css

/* <system section="theme" selected="report"> */
/* テーマをreportにして、本文の横幅を出来るだけ大きくとる*/
/* このテーマはレスポンシブデザイン非対応*/
/* [https://blog.hatena.ne.jp/-/store/theme/12921228815712830663:title] */


@import "/css/theme/report/report.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

/* for report */

/* フォント */
body {
    font-family: 'Helvetica Neue', 'Helvetica', 'Univers', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
}

.entry-title a {
    font-size: 160%;
}

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

.entry-content h1 {
  padding: 6px 10px;
  border-left: 8px solid #b8d200;
  border-bottom: 1px solid #b8d200;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}
.entry-content h2 {
  padding: 6px 10px;
  line-height: 1.5;
  background-color: #f5f5f5;
}
/* ソースコード表示 */
.entry-content pre{
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #efefef;
}
.entry-content pre.code {
  font-size: 90%;
}

/* 引用表示 */
.entry blockquote {
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: 3px solid #b3bfc7;
  padding: 2px 0 2px .7em;
  color: #626e77;
}

/* 画像表示 */
img{
display: inline-block;
box-sizing: border-box;
border: solid 1px #333;
}

@media screen and (min-width:1200px) {
    
#container{
    width: 95%;
}

#content {
  padding-left: 70px;
}

#content-inner {
  zoom: 1;
}
#content-inner:after {
  content: '';
  display: block;
  clear: both;
}
#wrapper {
  float: left;
  width: 100%;
   /*(サイドバーの幅 + 記事とサイドバーの間隔 ) × (-1) */
  margin-right: -220px; 
}
#wrapper #main {
  margin-left: 0px;
   /*サイドバーの幅 + 記事とサイドバーの間隔  */
  margin-right: 220px; 
}
#box2 {
  float: right;
   /*サイドバーの幅 */
  width: 180px; 
}
/* キーワード下線を消す */
a.keyword {
    border: transparent 0px;
}

ソースコード

kei-kmj.github.io/hatena_custom.css at main · kei-kmj/kei-kmj.github.io · GitHub

外部cssを読み込むことも出来るようなので、次はGithubと連携させてみたいと思います