でたぁっ 感動と失敗の備忘録

データ解析を担当することになったサラリーマンの備忘録

ブログデザインを変えてみた

 いい年になってはてブを始めたのはいいが、書き方などまだまだ分からないことだらけ。
コードなどを残しておきたいと思っていたのでデフォルトのデザインだと横幅がちと狭いぞ~。そこでグーグル先生にお尋ねし、はてブの先輩方を参考にしながらスタイルをカスタマイズすることにした。
 デザイン → カスタマイズ → 画面下の {}デザインCSS で変えればよいとのことだ。10数年前に在籍していたシステム開発部門で覚えといたスタイルシートが役に立った。(でも最近はさらに進化しているようであるが。。。) また、最近のブラウザ(私はCrhomeを使っている)は便利になったものだ。ページ表示後に要素なるものを見れる! これで変更箇所も結構早く見つけることが出来た。で、完成したのがこのスタイルです。
 cssはこんな感じにしました。ついでにスーパーpre記法というのも分かった。皆さんコードを書くときにはこれ使っていたのですね。

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

/* <system section="background" selected="fff"> */
body{background:#fff;}
/* </system> */

#container {
  width: 1000px;
 }
#content {
  padding-left:10px;
  padding-right:5px;
}
/*記事*/
#main {
  width: 680px;
 }
#wrapper {
  width: 680px;
float: left;
}
/*サイドバー*/
#box2 {
  width: 280px;
}

/*ブログタイトル*/
#title {
  display: inline-block;
  font-size: 40px;
}
#blog-title {
  padding: 40px 0 40px 0;
}
/*ブログの説明*/
#blog-description {
  display: block;
  -webkit-margin-before: 0.83em;
  -webkit-margin-start: 5px;
  -webkit-margin-end: 0px;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-size: 18px;
  font-weight: bold;
*/
}

/*ブログ日付*/
.date {
  font-size: 15px;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: 2px solid #ff1493;
  margin-bottom: 10px;
}

/*タイトル*/
.entry-title {
  margin-bottom: 10px;
  line-height: 1.3;
}
.entry-title a {
  font-size: 24px;
  color: #222;
  text-decoration: none;
}

/*カテゴリータグ*/
.entry-header .categories a {
  font-size: 14px;
  padding: 2px 5px;
  text-decoration: none;
  background-color: #efefef;
  border-radius: 3px;
}


/*プロファイル*/
.hatena-module-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

/*ハイパーリンク*/
.entry-content a:visited {
  color: #0000cd;
}