information

サイトの説明などを書いたらどうでしょうか。ここはほにゃららほにゃららサイトです。色々あります。携帯用とPC用を想定したタグを入れているので画像のURLを二箇所入れる必要があります。たぶんHEADをみればわかると思います。動作確認はIEとsafari(iphone5)です、ガラケーではどうなってるのかわかりません。文字は小さめ。素材はパブリックドメインなので↓から保存して下さい。付箋はこんなかんじでお好きに色を変えてください

HEAD

* {
 margin:0 auto;
 padding:0 auto;
}

body {
 font-size: 12px;
 font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
  Meiryo, メイリオ, sans-serif;
}

.header {
padding-top:40px;
 text-align:center;
 font-size: 10px;
 width:100%; 
}

.photobox{
 width:100%; 
 height:120px;
 background: url(#画像#);
 background-position:center top;
 background-repeat:no-repeat;
-moz-background-size:contain;
 background-size:contain; 
 no-repeat;position:relative;
}

.photobox p{ 
 width:100%;
 position:absolute; 
 top:80px;
 left:0px;
 font-size:9px;
 line-height: 2.0em;
 text-align:center;
 -webkit-transform: rotate(3deg);
 -moz-transform   : rotate(3deg);
 -ms-transform    : rotate(3deg);
 -o-transform     : rotate(3deg);
 transform        : rotate(3deg);
}

.box {
 width: 93%; 
 font-size:11px;
 line-height: 1.4em;
 margin-top:2px;
 padding:10px 10px 10px 10px;
 border:dotted 1px #000000;
 text-align:left; 
}

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

a:hover { 
 border-bottom: 1px solid #000000;
 color:#000000;
}

h1{
 color:#000000;
 padding:20px 0px 0px 0px;
 font-size:10px;
}

.title { 
 padding: 2px 5px 2px 5px;  
 color: #000000;
}

.ma { 
 color: #000000;
 padding: 0px 2px 0px 2px; 
 background: linear-gradient(transparent 40%, #eeeeee 0%);
}

@media screen and (min-width: 600px) {.all {  width:400px;}}

@media screen and (max-width: 600px) {
.all { 
 width:auto;
 letter-spacing: -0.001em;
 padding: 2% 10px 0px 10px;
 text-align: justify;
 text-justify: inter-ideograph;
}

</style>

BODY

素材未透過原寸大↓