Midnight

幸福と不幸という兄弟

1.月夜に重ねる
2.旅をする傍らで
3.Lost child is sun.
4.金の腕輪、銀の冠

Title by Anthem

めぐ様！このような感じでいかがでしょうか。
良い感じのランプの画像がなかったので、パブリックドメインのイラストを加工しました。
パソコンで見ると明朝体になっています。多分。
私の大好きなジェネレーターを使いました。色変更の際に参考にしてみてください。
＜div class="list"＞＜/div＞の間に囲んだところはリンクが右側にスライドする仕様です。
タイトルは英語推奨ですが、日本語にする場合は文字の大きさを調節したほうが良いと思います。
改変自由です。作り直し可能ですので、気軽にお申し付けください。

素材↓(見えづらいですが、ランプの下に星の画像があります)

HEAD

body{margin:0;
 padding:0;
 font-size: 12px;
line-height:30px;
font-family: 'PT Serif',,"ヒラギノ明朝 Pro W3" ,'游明朝',MS 明朝,HGP明朝B,'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
background:url(#星の画像URL#);}

#all{max-width:600px;
margin:0 auto;}

a {border-bottom:dotted 1px #fff;
color:#000;
padding:0px 5px 0px 5px;
text-decoration: none;}

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

.top{max-width:150px;
height:auto;
margin:5% 5% 0% 5%;}

.title{font-family: 'Caesar Dressing';
font-size:40px;
margin:20px 0px 0px 0px;}

h1{font-size:15px;
color:#B0E0E6;
line-height:1;}

.list{background:rgba(0,0,0,0.5);
text-align:left;
padding:20px;
margin:0px 20px 20px 20px;
border-radius:10px;}
.list a{color:#fff;
transition: 0.5s;
 -ms-transform: 0.5s;
 -webkit-transform: 0.5s;
 -moz-transform: 0.5s;
 -o-transform: 0.5s;
border-bottom:solid 1px #B0E0E6;}
.list a:hover{color:#fff;
margin-left:2%;}
.list a:visited{color:#b0e0e6;}

.text{background:rgba(255,255,255,0.5);
color:#000;
font-size:13px;
text-align:left;
padding:20px;
margin:0px 20px 20px 20px;
border-radius:10px;}

html{background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #001F4A),
	color-stop(0.52, #35A3AB),
	color-stop(1, #E9F09E));
background-image: -o-linear-gradient(bottom, #001F4A 0%, #35A3AB 52%, #E9F09E 100%);
background-image: -moz-linear-gradient(bottom, #001F4A 0%, #35A3AB 52%, #E9F09E 100%);
background-image: -webkit-linear-gradient(bottom, #001F4A 0%, #35A3AB 52%, #E9F09E 100%);
background-image: -ms-linear-gradient(bottom, #001F4A 0%, #35A3AB 52%, #E9F09E 100%);
background-image: linear-gradient(to bottom, #001F4A 0%, #35A3AB 52%, #E9F09E 100%);}</style>

全体レイアウト

表紙レイアウト

目次レイアウト

本文レイアウト