烏たちの神話

自動改行しないで作成しています。
画面幅600px以上で2列に表示されます。
タイトルは(f)ukaさまよりお借りしています。
素材は自作していますが、背景はお好きに変えていただいての使用を前提としていますので、割愛しています。

HEAD

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin|Noto+Serif+JP');

@font-face
{
font-family: 和田研細丸ゴシック;
src: url('https://cdn.leafscape.be/wadalab/wadalab-hosomin_web.woff2')
     format("woff2");
}

body {
    background: #fff;
    color: #555;
    font-size: 12px;
    font-family: 'Libre Franklin', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    line-height: 200%;
    letter-spacing: 2px;
    margin: 0;
}

a {
    color: #555;
    background: #eee;
    padding: 2px 5px;
    margin: 0 5px;
    text-decoration: none;
}

a:hover {
    background: #fff;
}

h1 {
    font-family: 和田研細丸ゴシック, 'Libre Franklin', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    font-size: 18px;
    margin: 10px 0 20px;
}

h2 {
    font-family: Noto Serif JP, 'Libre Franklin', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    font-size: 12px;
    margin: 0 auto 8px;
    padding: 0 0 5px;
    border-bottom: dashed 1px #ccc;
    font-weight: normal;
}

.wrp {
    max-width:600px;
    margin:10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
}

.top {
    max-width:250px;
    margin: 0 auto;
    padding: 50px 15px 15px;
    text-align: center;
}

.ttl {
    margin: 25px 15px; 
    position: relative;
    width: 220px;
    box-shadow: 0 0 6px #ccc;
}

.ttl a,.ttl a:hover {
    display: block;
    padding: 0;
    margin: 0;
}

.ttl img {
    width: 220px;
    height: 100px;
    vertical-align: bottom;
}

.text {
    background: rgba(255,255,255,.8);
    position:absolute;
    top: 4px;
    color: #555;
    width: 190px;
    line-height: 200%;
    margin: 0;
    padding: 15px;
    text-align: center;
}

.sc {
    max-width:300px;
    margin: 0 auto;
    padding: 15px;
}

</style>

全体レイアウト

烏たちの神話

終末ララバイ

遊戯日和

射抜かれた回路

虚言シュプレヒコール