SOURCE&CODE

ブラウザによってデザインが崩れる可能性大ですがそれでもよければ。

メニュー以外のリンクはこうなります

＜strong＞＜/strong＞で囲むと文字に影が付きます。

背景画像はパブリックドメインのものを使っているので、こちらからダウンロードしてください。(縮小してあります)

自動改行「しない」で製作しています。

HTML

HEAD

<link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans);
*{margin:0; padding:0;}

body{color:#fff;
background-color:#ffffff;
background-image:url(##背景画像のURL##);
 background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
background-size:cover;
  font-size:12px;
 letter-spacing:2.4px;
 line-height:2;
font-family:'Alegreya Sans',"Hannari","Sawarabi Mincho",Meiryo,Osaka,"MS ゴシック", sans-serif;
text-align:center;
}

.wrp {
    max-width: 500px;
    margin: 50px auto 10px;
}

.wrp a {
    padding: 0 3px;
}

.top {
    margin: 0 20px;
}

.box{
 font-family: "游明朝";
}

a {
text-decoration: none;
color:#fff;
padding: 0 .3em;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
a:hover {
  background-position: -100% 0;
  color: #000;
}

.button {
  background:rgba(0,0,0,.5);
  color: #fff;
}
.button:hover {
background-color:rgba(227,227,227,0.4);
}

textarea {
    height: 50px;
    width: 50%;
    font-size: 12px;
    font-family: 'Antic Slab', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    line-height: 180%;
    letter-spacing: 2px;
    color: #333;
    background: rgba(255,255,255,.5);
    border: solid 1px rgba(255,255,255,.5);
        -webkit-appearance: none;
    border-radius: 0;
    box-shadow: none;
    margin: 3px 0;
    padding: 3px;
}

h1 {
font-family: 'Oleo Script', cursive;
font-size:50px;
  margin:0;
text-shadow: 1px 2px 3px #000000; }

strong{
font-size:15px;
text-shadow: 1px 2px 3px #000000;}

.str {
  /* --- 文字情報設定 ------------------------------- */
  text-align      : left;         /* 文章を上詰め     */
  font-size       : 12pt;         /* 文字サイズ       */
  letter-spacing  : .1em;         /* 文字間隔         */
  line-height     : 1.3;          /* 行間隔（1行高さ）*/
  -ms-writing-mode: tb-rl;        /* 縦書き（IE用）   */
  writing-mode    : vertical-rl;  /* 縦書き           */
}
 /* --- 見出しは文字を大きく中央に表示 -------------- */
.str .midashi {
  font-size       : 120%;
  text-align      : center;
  font-weight     : bold;
}
 /* --- 後書きは文字を下詰めに表示 ------------------ */
.str .ato {
  text-align      : right;
}
 /* --- リンクのアンダーバーは左に付ける ------------ */
.str a {
  text-decoration : none;       /* 下線なし           */
}


</style>

Moonset

SOURCE&CODE