りつのひとりごと

りつのひとりごと

ひとりでゆるーくやってます

MENU

Brooklyn備忘録

りつは最近テーマをBrooklynに戻しました。

若干いじっているので、忘れないように書いとこうかと。

ブログ上部のメニュー

Brooklynは固定されているんですよね。

固定だけ外しちゃいました! あれ、ダメなのかなぁ……?

まあ、とりあえず目をつむって……(汗)


また、下にボーダーも引かれていたので消してみました!

#globalheader-container {
  position: static;
  border-bottom: none;
}


ブログタイトルをセンタリングする

#blog-title {
  text-align: center;
}
#blog-description {
  margin: 5px auto;
}


記事ページ

記事タイトル下の線

border-style: dashed; でもいいのにわざわざ長いコードにしてあってちょっとびっくり。

もともと斜めストライプにしようとしていたからかな。

photoshoper.net

日付にアイコンを表示させる
  .date a:before {
  font-family: "blogicon";
  content: "\f043";
}


カテゴリーにアイコンを表示させる

上と同じようなやり方。
 

記事内の書式を整える(?)

pタグで囲ったときの余白が大っ嫌いなので消してしまいました。

読みにくいかなぁ。

あと記事下の棒線も消しちゃいました。たぶんいつか戻すと思う。

.entry-content {
  font-size: 95%;
  line-height: 2em;
  padding-top: 15px;
  padding-bottom: 10px;
  border-bottom: none;
}
.entry-content p {
  margin: 0;
}

 
 

見出しのリセット

シロマティさんの記事にも書かれているのですが、

/* 見出しのリセット */
.entry-content h2,
.entry-content h2:before,
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after,
.entry-content h4,
.entry-content h5{
  background: none;
  border: none;
  border-radius: 0;
}

これで全部の見出しリセットできる!

地味に『:before』とかが多いから気を付けないとです。ちゃんとリセットしたいならば。
 
 
 

サイドバー

サイドバーのタイトル

Brooklynは吹き出しがついていてかわいいですよね。

でも色を変えるのがちょっと難しかったです。
 
シロマティさん曰く、

サイドバーはの吹き出しは
.hatena-module-title::before {
  border-top-color: #111;
}
の上に
.hatena-module-title::after {
  border-top-color: #fff;
}
を重ねて、枠になるようにしています。

全体の枠は、
.hatena-module-title {
  border-color: #111;
}
のカラーコードを変更すればOKです。

とのことですが、りつは背景の色を変えたかったので少し悩みました。あんまりうまくいかんくて(笑)
 
そんで結局できたのは、

.hatena-module-title {
  color: #fff;
  border-color: #1487bd;
  border-radius: 20px;
  letter-spacing: 3px;
  background-color: #1487bd;
}
.hatena-module-title a{
  color: #fff;
}
.hatena-module-title:before{
  border-top-color: #1487bd;
}
.hatena-module-title:after {
  border-top-color: #1487bd;
}

です。

吹き出しの角を丸くして、文字と文字の間隔もちょっと広げさせてみました。

#1487bdが今のデザインで多投しているカラーコードです。
 

カレンダーのデザイン

りつは月別アーカイブをリストじゃなくてカレンダーデザインにしているんです。

理由はカレンダーのほうが好きだから!笑

でもデフォルトじゃ見えにくいのでちょっといじっています。

コードはほかの方のを見て書いたので、ここに書きにくい……笑
 
記憶がさだかではないが、なにかの記事に書いた覚えがある。参照!(投げやり)

フッター

フッターにうちのブログの名前が出るのが恥ずかしいので無理やり消しました(^q^)

#footer address {
  display: none;
}



書いていないところももちろん多いけど、だいたいこんな感じでした。

前のデザインじゃ、スマホ版サイドバーが若干デザイン崩れていたので、ちゃんとテーマ設定したことで直りました。

よかったよかった。


前Brooklyn使っていた時期があったのになぜSpireaにしたかというと、実はBrooklynが全然カスタマイズできなかったからなんです。

あ、私が無能だからっていう意味だよ。

でも改めて戻ってくると、前使っていた時よりやりやすい。


……もしかしたら、明日にはSpireaになっているかもしれないけどね……。笑


冗談です。いやでももしかしたらあるかもな。いや、冗談冗談。


ではそろそろ終わりたいと思います。