ブログのデザイン。

はてなブログCSS

ブログの第一印象を左右するデザインテンプレートですが、
僕は公式テーマのEvergreenのCSSをいじって利用してます。
備忘録としてそのCSSを載せておきます。こちらですね。

/* 記事の文字*/
article {
color: #353339;
}

/*背景の色 */
body{background:#3A414C;}

/*ブログ名の下のギザギザ */
#blog-title {
  margin: 0 0 70px;
  padding: 90px 0 58px;
  text-align: center;
  background: url('ここにはてなフォトライフにアップロードした緑のギザギザしたやつのURLを載せてます。') no-repeat;
  background-position: center bottom;
}

/* 記事と記事の鎖線*/
.entry {
  position: relative;
  margin-bottom: 100px;
  padding: 0 0 112px;
  background: url('ここにはてなフォトライフにアップロードした一点鎖線のURLを載せてます。') no-repeat;
  background-position: center bottom;
}

/*日付のスラッシュ*/
.date .date-year:after  {content: "/";}
.date .date-month:after {content: "/";}
.date .hyphen           {display: none;}

/* 記事　行間設定 */
div.entry-content p {
line-height: 1.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

こんな感じですね。
ソースなんですが、色んな所見てきてどこがどこだか分からなくなりました。ごめんなさい…。
ググって出てきたところです…。
後日それが分かれば追記していきます。

記事の文字

読んで字の如くですね。
記事の文字色をいじってるCSSなんですが、articleであってるのかな。

背景の色

元々のデザインだと真っ白なんですが、青っぽい？灰色にしました。

記事と記事の鎖線

これはデフォルトだと＊＊＊ってなってるところですね。
…正直、ダサくないですか。だから変えました。

日付のスラッシュ

これは各記事を投稿した日の日時が表示されるところのものなんですが、
デフォルトだと20XX-（月）-（日）みたいに、ハイフン表示になるんですよね。
それを20XX/ （月）/（日）となるようにしました。

記事　行間設定

これはどの公式テーマでもそうなんでしょうけど、
行間がけっこう広いんですよね、はてなブログ。
それの間隔を狭めたものですね。

今後やりたい事。

ですかね。浮かぶだけだと。
というか今これを書きながらプレビューしてて気付いたんですけど、
記事の色真っ黒じゃないですかね。
色付けのCSSが意味ないものなのかな。
あと、もう一点は見出しですよ。
なんか線が入ったりするのかと思ったら入らないんですね。自分で入れろと。

CSSコードを色付きで載せたいが為に“はてな記法”で書いてみたんですけど、
当たり前だけど、ダメだ。書けねぇ。
これもこれからブログ書きながら学んでいきます。

参考にさせて頂いた記事

はてなブログの行間＆記事タイトル色を変更してみる - そこに落ちてた帳面

それでは。