source code

自動改行“しない”で作成しています。
画像はパブリックドメインのものを加工していますので、こちらからお持ち帰りください。

HEAD

@import url('https://fonts.googleapis.com/css?family=Alegreya');

@font-face
{
font-family: XANO明朝;
src: url('https://cdn.leafscape.be/XANO-mincho/XANO-mincho_web.woff')
     format("woff");
}

body{
font-family:"Alegreya","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#000;
background:#4c6473;
margin:0;
padding:0;}

@media screen and (min-width:401px){
.wrapper{
width:400px;
margin:0 auto;}
}

@media screen and (max-width:400px){
.wrapper{
width:100%;
margin:0 auto;}
}

.top{
margin:50px auto 20px;
width:240px;
height:160px;
background:url(##画像URL##);
background-size:cover;
border:solid 1px #000;
box-shadow:0 0 5px #000;
text-align:center;}

.menu{margin:0 0 15px;}

.menu a{
color:#e7e7eb;
background:rgba(0,0,0,.7);
padding:2px 6px;
margin:0 5px;}

.menu a:hover{
background:rgba(0,0,0,.7);
color:transparent;
text-shadow:0 0 1px #e7e7eb;
box-shadow:0 0 1px #000;}

.title{
font-family:"XANO明朝","Alegreya","メイリオ", sans-serif;
font-size:14px;
color:#e7e7eb;
background:rgba(0,0,0,.6);
padding:5px 10px;
margin:70px auto 0;
cursor:pointer;
display:inline-block;
transition:0.5s;}

.title:hover{
background:#000;
color:transparent;
text-shadow:0 0 1px #e7e7eb;}

.info{
background:rgba(255,255,255,.3);
margin:30px 20px 20px;
padding:15px;
display:none;
box-shadow:0 0 5px #000;}

.con{margin:40px 20px 20px;}

.box{
font-size:11px;
background:rgba(255,255,255,.3);
margin:20px;
padding:15px;
box-shadow:0 0 5px rgba(255,255,255,.3);}

strong{
text-shadow:0 0 1px #000;
font-weight:normal;}

h1{
font-family:"XANO明朝","Alegreya","メイリオ", sans-serif;
font-size:16px;
font-weight:normal;
color:transparent;
text-shadow:0 0 1px #e7e7eb;
background:rgba(0,0,0,.6);
margin:10px 0;
padding:5px 10px;
display:inline-block;
}

h2{
font-family:"XANO明朝","Alegreya","メイリオ", sans-serif;
font-weight:normal;
font-size:14px;
margin:5px 5px 5px 0;
padding:2px 10px;
color:transparent;
text-shadow:0 0 1px #000;
background:rgba(255,255,255,.5);
display:inline-block;
}

a{
color:#000;
background:rgba(255,255,255,.3);
text-decoration:none;
padding:0 3px;
transition:0.5s;
}

a:hover{background:none;}

</style>

</script>

$(function() {
  $('.title').click(function(){
      $('.info').fadeToggle(1000);
  });
});

</script>

本文

子ページ

information

midashi

source code