Description

tl.sさま、「冷たさの残る冬のイメージ、#f8f8ffを使う、小さい写真」とのリクエストでしたので、氷柱が光る木の写真で、#f8f8ffは背景に使わせていただきました。
丸い窓から外を覗いているイメージで作ってみました。
丸の中には３行入れられます。減らしたい場合は、HEAD内の.boxのpadding:55px 0;を調節してください。
また、画像はCSS内で丸くしていますので丸い画像を用意する必要はありません。

tl.s様、当サイトの企画にご参加くださりありがとうございます。
また846。に足を運んでくださると嬉しいです。

HEAD(CSS)

@import url(https://fonts.googleapis.com/css?family=Poiret+One|Josefin+Sans);

body{
 margin:3%;
 padding:3%;
 font-size: 12px;
line-height:30px;
letter-spacing:2px;
color:#555;
font-family:'Josefin Sans',Meiryo, メイリオ, sans-serif;
text-align:center;
background:#f8f8ff;
}

.all{
max-width:600px;
text-align:left;
margin:0 auto;
}

.box{
width:200px;
background:url(#画像URL#);
background-size:200px;
border-radius:50%;
display:inline-block;
letter-spacing:1px;
margin:5px;
padding:55px 0;
vartical-align:top;
font-family:'Poiret One';
color:#000;
font-size:12px;
font-weight:bold;
line-height:30px;
border:double 20px #fff;
text-shadow:1px 1px 2px #fff,
1px 1px 2px #fff,
-1px 1px 2px #fff,
-1px 1px 2px #fff,
1px -1px 2px #fff,
1px -1px 2px #fff,
-1px -1px 2px #fff,
-1px -1px 2px #fff;
}

.box p{
display:inline;
font-size:25px;
}

.box a{
border:none;
font-size:12px;
color:#fff;
text-shadow:1px 1px 3px #333,
-1px 1px 3px #333,
1px -1px 3px #333,
-1px -1px 3px #333;
margin:0 3px;
letter-spacing:2px;
transition: 0.3s;
 -ms-transform: 0.3s;
 -webkit-transform: 0.3s;
 -moz-transform: 0.3s;
 -o-transform: 0.3s;
}

.box a:hover{
border:none;
text-shadow:1px 1px 3px #ddd,
-1px 1px 3px #ddd,
1px -1px 3px #ddd,
-1px -1px 3px #ddd;
}

.ma{
background:#fff;
padding:3px 5px;
color:#000;
}

h1{
font-family:'Poiret One';
border-bottom:dotted 3px #fff;
font-size:20px;
color:#5F7C96;
}

a {
text-decoration: none;
color:#000;
border-bottom:dotted 3px #fff;
}

a:hover {
border-bottom:solid 3px #fff;
}

</style>

BODY(HTML)

素材↓

人気急上昇中のBL小説
BL小説 BLove

- ナノ -