bloggerのデザインを変えてみる #2

 初心者でもカッコいいタイトルが欲しい！

前回記事では基本的な変更を行いました．詳細はこちら．

ブログタイトルデザインを変えよう

という訳で

/* Header

----------------------------------------------- */

に以下を追加します．

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  left : 20px;
  width: 90%;
  text-shadow: 0 0 $(title.shadow.spread) #000000;
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #344955;
}

.Header h1:before {
  position: absolute;
  top : -14px;
  left : -14px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #F9AA33;
}

.Header h1 a {
  color: $(header.text.color);
}

ブログタイトルのデザインを変更できます．

ウィジェットのデザインを変えよう

/* Widgets

----------------------------------------------- */

に以下を追加

.sidebar .widget h2 {
  text-shadow: 0 0 $(title.shadow.spread) #000000;
  background: #CFD8DC;/*背景色*/
  border-left: solid 5px #F9AA33;/*左線（実線 太さ 色）*/
}

記事のタイトルのデザインを変えよう

/* Posts

----------------------------------------------- */

に以下を追加

h1.post-title, h4.post-comment {
  font: $(post.title.font);
  color: $(post.title.text.color);
  background: #344955;
  border-bottom: solid 5px #F9AA33;/*左線（実線 太さ 色）*/
  margin: -10px -15px 1px;
  padding: 0.5em;
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(shadow.spread) -5px rgba(0, 0, 0, .2);
}

投稿時間のデザインを変えよう

/* Posts

----------------------------------------------- */

に以下を追加

.main-inner .widget h1.date-header {
  margin: 0 -15px 1px;
  padding: 0 0 $(date.padding.bottom) 0;

  font: $(date.font);
  color: $(date.text.color);

  border-top: $(date.border.size) solid $(date.border.color);
  border-bottom: 1px solid $(widget.border.bevel.color);

  -moz-border-radius-topleft: $(date.header.border.radius.top);
  -moz-border-radius-topright: $(date.header.border.radius.top);
  -webkit-border-top-left-radius: $(date.header.border.radius.top);
  -webkit-border-top-right-radius: $(date.header.border.radius.top);
  border-top-left-radius: $(date.header.border.radius.top);
  border-top-right-radius: $(date.header.border.radius.top);

  position: $(date.position);
  bottom: 100%;
  $(date.side): $(date.header.position);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
  /*background: $(date.background);*/
  background: #232F34;
}

.main-inner .widget h1.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 15px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}