読者です 読者をやめる 読者になる 読者になる

とある(C)SS書きの奏P

SSもCSSも書ける凄い奏Pを目指してます。

久しぶりにCSSいじり~フォント、余白、リンク色、引用デザイン、見出しタグ

ずっと気になってたとこやっといじれる時間が取れたぜウェーーーイ!

まず、フォント。
とにかくフォントが気に食わない。なんか丸っこい。
「お日記」感ある。気に食わない。もうちょっとオサレ記事っぽくしたい。

というわけで変えたった。

f:id:kanafumi-ojisan:20161106220044p:plain

f:id:kanafumi-ojisan:20161106220803p:plain

うん。すっきり!(満足
ついでに行間とかの余白もいじったので、読みやすくなったのではなかろうか、と。

あと次リンク色。
何で黄色にしたのか覚えてないんだけど←
やっぱリンクは青っぽい色のがいいですよねってことで。

f:id:kanafumi-ojisan:20161106221124p:plain

f:id:kanafumi-ojisan:20161106221145p:plain

お次は引用部分のデザイン。
これは自分でいじったんじゃなくてデフォで設定されてたんだけど。

場所取りすぎじゃね?引用符デカすぎない?邪魔じゃない?引用なのに目立ちすぎね??

って、ずっとムカついてたので変えたった。

f:id:kanafumi-ojisan:20161106221324p:plain

f:id:kanafumi-ojisan:20161106221358p:plain

引用であることはわかりにくくなったけど、まあいっか(雑

最後は見出しタグ。

ただの太字+文字デカ部分と違いが分からなかったので、見出しっぽくしたかった。

f:id:kanafumi-ojisan:20161106221655p:plain

f:id:kanafumi-ojisan:20161106221715p:plain

でもなんか引用デザインと被ってしまってなんかやだな…。
また後日引用の方だけ直します。

 

続きに、今現在のCSS置いておきます~。
はてなのテンプレをベースに、気に入らないトコだけ直してるんで、この中にないものはテンプレのCSSです。

 

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

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


/* body */

body {
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
color: #383838;
background-color: #fff;
font-size: 15px;
}

/* タイトル部分 */
#blog-title {
padding: 50px 0;
background: #2b3046;
text-align: left;

}

/* タイトル説明部分 */
#blog-description {
font-weight: 300;
font-size: 90%;
color: #B29B00;
margin: 3px 0 0;
padding: 0 25px;
}

#title a {
color: #FFE645;
}


/* 日付 */
.date {
height:50px;
}

.date a {
color: #2b3046;
font-size: 20px;
font-weight: 700;
background:#FFE645;
letter-spacing:0.1em;

}


/* 記事タイトル */

.entry-title {
margin-bottom: 50px;
border-top: 2px dashed #3b3b3b;
border-bottom: 2px dashed #3b3b3b;
padding: 15px 0;

}


a.entry-title-link.bookmark {

text-decoration: none;
color: #2b3046;
}

/* リンク */

a {
color: #365899;
text-decoration: none;
}

/* h3 */
h3 {
position: relative;
}
h3::before,
h3::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
height: 4px;
}
h3::before {
z-index: 2;
width: 15%;
background-color: #2b3046;
}
h3::after {
width: 100%;
background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
background: repeating-linear-gradient(45deg, #fff, #fff 2px, #afac70 2px, #afac70 4px);
}

.entry-content h3 {
font-size: 140%;
margin: 40px 0 50px;
}


/* h4 */
.entry-content h4 {
margin-bottom: 20px;
padding-left: 10px;
line-height: 24px;
font-size: 120%;
font-weight: bold;
border-left: #dad41e solid 5px;
}


/* pタグ */

.entry-content p {
margin: 0 0 19px;
line-height: 2;
color: #383838;
}


/* 引用 */
.entry-content blockquote {
border-bottom:5px solid #dcc41e;
background: #eee;
padding: 10px 10px 10px 35px;
font-size: 90%;

}