自動改行しないで作成しています。

HEAD
<style type="text/css"> @charset "UTF-8"; @import url('https://fonts.googleapis.com/css?family=Megrim'); @font-face { font-family: 和田研中角ゴシック; src: url('https://cdn.leafscape.be/wadalab/wadalab-nakakakugo_web.woff2') format("woff2"); } body { background: #fff; color: #555; font-size: 12px; font-family: 'Megrim', メイリオ, sans-serif; line-height: 180%; letter-spacing: 2px; margin: 0; } h1 { font-family: 'Megrim', '和田研中角ゴシック', メイリオ, sans-serif; font-size: 20px; margin: 50px 10px 30px; } h2 { font-family: 'Megrim', '和田研中角ゴシック', メイリオ, sans-serif; margin: 0 0 20px; padding: 0 10px 10px; border-bottom: solid 2px #eee; font-size: 14px; } a { color: #507ea4; text-decoration: none; } a:hover, active { position: relative; top: 0; } .wrp { max-width: 400px; margin: 0 auto; } .top { margin: 50px 20px; text-align: center; } .text { margin: 20px 30px 30px; padding: 20px; background:repeating-linear-gradient(45deg,transparent 0,transparent 5px,#eee 5px,#eee 6px); border-radius: 20px; } .text a { background: #fff; border: solid 1px #fff; padding: 5px 10px; margin: 10px 3px 0; border-radius: 10px; font-weight: 700; display: inline-block; } .text a:hover { background: none; } .ft { text-align: center; margin: 20px; } .ft a { text-decoration: none; padding: 2px 10px; margin: 0 5px; background:repeating-linear-gradient(45deg,transparent 0,transparent 5px,#eee 5px,#eee 6px); } .ft a:hover { background: #fff; } .ft span { text-decoration: line-through; padding: 2px 10px; margin: 0 5px; } </style>
全体レイアウト
<div class="wrp"> #blog# </div>
一覧画面レイアウト（上部表示テキスト）
<div class="top"> <h1>GRAY</h1> </div>
一覧画面レイアウト（一覧部分）
<div class="text"> <h2>#date# #title#</h2> #text# <div style="text-align:right">#ext_>> READ MORE#</div> </div>
一覧画面レイアウト（下部表示テキスト）
<div class="ft"> #prev_prev_<span>prev</span># <a href="">top</a> #next_next_ <span>next</span> # </div>
追記画面レイアウト
<br><br><div class="text"> <h2>#date# #title#</h2> #text2# </div>