【はてなブログ】Evergreen カスタマイズ②（目次・レイアウト）
はてなブログ始めて6日が経ちました！備忘録に追記したCSSコードをメモしておきます。
※ フォント、見出しについては過去記事を参照ください。
CSSは使ったことがない素人なので、見よう見まねで作りました。自分の記録用にメモします。（間違いがあったらすみません）
基本のきですが、CSSコードは 「デザイン ＞ レンチマーク ＞｛デザインCSS｝」に追記します。
①目次
①－１ 目次のカスタマイズ（メモつき）
/*目次*/
/*枠*/
ul.table-of-contents {
position: relative; /*位置*/
font-size: 16px; /*文字サイズ*/
border: 2px solid #b4dddf; /*枠の線の太さ、実線、色*/
padding: 0.5em 2em 1em 2em; /*枠の内側の空白 上 右 下 左*/
margin:0 0 0 0; /*枠の外側の空白 上 右 下 左*/
color: #696969; /*文字色 濃い目のグレー*/
display: inline-block;
background-color: #fff; /*背景色 白*/
}
/*目次の見出し*/
ul.table-of-contents:before {
content: " I N D E X "; /*目次の見出し*/
display: block;
text-align: center; /*背景色 白*/
margin: 1em 1em 1em 1em; /*枠の内側の空白 上 右 下 左*/
padding: 0 0 0 0; /*枠の外側の空白 上 右 下 左*/
font-weight: bold;
font-size: 120%; /*文字サイズ*/
border-bottom: 1px dashed #fac; /*下線の太さ、下線点線、下線の色薄いピンク*/
}
/*目次の最後*/
ul.table-of-contents a:after {
display: none; /*何も表示しない*/
}
/*リンク項目*/
ul.table-of-contents li a,
ul.table-of-contents li a:visited {
color: #696969; /* リンク文字の色 濃いめのグレー*/
text-decoration: none; /* リンクの下線なし */
}
ul.table-of-contents li a:hover {
color: lightgrey; /* リンクにマウスを重ねた時の色 薄いグレー*/
}
/*項目の位置*/
ul.table-of-contents li {
margin: 0px 0px 0px 0px; /*枠の外側の空白 上 右 下 左*/
padding: 1em; /*枠の内側の空白*/
line-height: 2.5;
list-style-type: none;
}
/*見出し前*/
ul.table-of-contents li:before{
font-family: blogicon;
content: " ● "; /*見出し前の記号*/
position: relative; /*位置*/
font-size: 16px; /*フォントサイズ*/
left: -0.5em; /*見出し前の位置 やや左に*/
color: #b4dddf; /*見出し前 記号の色*/
}
理解した範囲で日本語をメモしていますので、間違いがありましたらすみません…。
※「padding」と「margin」の違いがわかりにくかったのですが、「padding」は作成した枠から文字までの空白の距離を設定できて、「margin」は作成した枠から画面までの空白の距離を設定できるようです。
②レイアウト
②－１ ブログタイトル下の二重線を消す（公式デザインEvergreen特有）
/*ブログタイトル下の二重線を消す*/
.page-archive #main,.entry,#blog-title{background:none;}
公式デザインEvergreen特有だと思いますが、ブログタイトル下の二重線が気になりましたので消しました。
②－２ ブログタイトルの位置変更
/*ブログタイトルに下線を引く*/
#blog-title{
text-align:center;
border-bottom:solid 10px #b4dddf;/*線の色*/
}
二重線を消すとシンプルでいいのですが、やや寂しく感じたので下線を追加しました。
②－３ トップページへサイドバーの表示
/*2カラム*/
/* <system section="theme" selected="evergreen"> */
@import url("/css/theme/evergreen/evergreen.css");
#main{
float: left;
max-width: 600px;
margin: 0 30px 0 40px;
}
@media screen and (max-width: 1084px) {
#main {
float:none;
max-width: 800px;
margin: 0 auto;
}
}
.page-archive #main{
margin: 0 20px 0 40px;
}
@media screen and (max-width: 1084px) {
.page-archive #main{
margin: 0px auto 100px;
}
}
.entry-content {
font-size:17px;
}
.entry-title {
font-size: 20pt;
}
シンプルなデザインが気に入っていますが、PCで見るとサイドバーがないのが物足りなく感じたので、サイドバーを追加しました。
長くなりましたが、参考になりましたら幸いです。
ド素人が書いてますのであしからず…
※ 関連記事
#はてなブログ #無料版 #カスタマイズ #目次 #レイアウト #Evergreen
