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

デザイン変更CSS設定

公式デザインBordeauxを私のHPと同じデザインに変える方法
色々なサイトを参考に、今の形に変えました。
サイドバーとかのリンク色を変えたいけど、まだ試行錯誤中です・・・。
色指定とかフォントサイズ指定とか丸い角の大きさ指定は、各自で変更してください。
素人なので、上手く行かなかったらごめんなさいヽ(;´д`)ノ

↓元デザイン
Bordeaux


↓最新記事を画像つきコードにするには、以下のサイトを参考にどうぞ。
はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNote
・・・私の場合、ここから画像に関する幅や高さを変更し、アイコンの四隅を丸くしたり日付をちょっと左にずらしたり、色々改造しています(´・ω・`)
元のままだと横長画像を表示すると、何故か画像が縦にちょっと縮小されちゃうんですよね・・・。
後、縦サイズが足りなかったら中央に配置したいんだけど・・・まだやり方が分かりません・・・。
合ってるかどうかすら解りませんが・・・orz


デザイン>カスタマイズ>{}デザインCSS内にコピペ

/* カテゴリの縦幅を指定してスクロールさせる */
.hatena-module.hatena-module-category > .hatena-module-body {
height: 150px; /* 縦幅指定 */
overflow: auto;
background:#b9c0c0; /* 背景色指定 */
border-radius: 5px;
-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
-moz-border-radius: 5px; /* Firefox用 */
}



/* フォントサイズ */
.entry-content {
line-height: 1.7; /* 1.5~2.0くらい */
font-size: 110%; /* 80%~110%くらい */
}



/* 各フレームの色指定 */
body{
  background:#4f6264;
}
#container{
background:#7f8c8d;
}

#footer{
background:#7f8c8d;
}

#content{
background:#b9c0c0;
border-radius: 10px; /* 角を丸くする */
-webkit-border-radius: 10px; /* 角を丸くするSafari,Google Chrome用 */
-moz-border-radius: 10px; /* 角を丸くするFirefox用 */
}
#main-inner{
background:#ffffff;
border-top-left-radius: 10px; /* 左上の角を丸くする */
-webkit-border-top-left-radius: 10px; /* 左上の角を丸くするSafari,Google Chrome用 */
-moz-border-top-left-radius: 10px; /* 左上の角を丸くするFirefox用 */
border-bottom-left-radius: 10px; /* 左下の角を丸くする */
-webkit-border-bottom-left-radius: 10px; /* 左下の角を丸くする Safari,Google Chrome用 */
-moz-border-bottom-left-radius: 10px; /* 左下の 角を丸くする Firefox用 */
}

広告を非表示にする

※ここにある物の著作権は、「うっちょん」または「マナ」にあります。 無断転載等は禁止しています。
© 2002 ucchon    © 2014 mana