サイトのタイトル

呟 - (20:23)
ここに最新の投稿を表示させたくて作ったもの。独自タグをいじるとできる。サイトの説明を書くにもいいと思っている。
「自動改行をしない」設定にしました。自動改行をする場合は調整が必要です。
こうやって線を引いたり、それから文字の色を変えたりもできる。
これを元にして微調整したものが2pxの枠線。

liを{pading:5px 20px;width:30px;}にすると左右に余白があって好きだけど、骨組みだし5pxと60pxにした。文字数が増えても60pxに収まれば崩れない。

+ RANKING　SITE
+ RANKING　SITE

HTML

CSS

a{color:#000;}
a:hover{color:#fff;}
.wrap{
  width:90%;
  max-width:500px;
  margin:70px auto;
}
.main{
 border:1px solid;
 margin-bottom: 30px;
}

h1{
font-size: 17px;
    font-weight: normal;
    padding: 20px;
    margin: 0;
  border-bottom:1px solid;
}
nav{}
nav ul{
  list-style-type: none;
  padding-left: 0;
  font-size: 0;
   border-bottom:1px solid;
}
.navi2{border-bottom:none;}
nav li{
  display: inline-block;
  padding: 5px;
  width:60px;
  font-size: 12px;
  border-right: 1px solid;
  text-align:center;
}
li.free{
width:auto;
}
.top{
 padding: 20px;
 min-height:100px;
}
.middle{
  padding: 20px;
 border-bottom:1px solid;
}
.bottom{
padding:20px;}

.real .middle{
min-height:100px;
}
.page_title{
background:rgba(224,224,224,0.4);
}
.line{
background: linear-gradient(transparent 50%, #eee 50%);
}
.usui{color:#fafafa;}
.usui a{color:#fafafa;}

hr{
border: 1px solid #fff;
margin:20px 0;}

.note_file img{
width:80px;
display:block;
margin-top:10px;
}
img{
max-width:400px;
margin-top:100px;
}

textarea ,input[type="text"], input[type="submit"],select{
border-radius:0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
  }
textarea{
background:#fafafa;
color:#000;
border:none;
 resize: auto;
  max-width: 400px;
  max-height: 500px;
  min-width: 250px;
  min-height: 50px;
  width:250px;
  height:50px
}
input[type="text"]{
padding:5px;
background:#fafafa;
color:#000;
border:none;
font-size:12px;
margin-right:5px;
}
input[type="submit"]{
padding:5px 10px;
background:#fafafa;
border:none;
font-size:12px;
color:#000;
vertical-align:middle;
}
input::placeholder {
  color: #ddd;
}
</style>