ワードプレス テーマ レインドロップスで、定食屋さんなどにあるメニューを書いてみます。
ありふれたメニューを、そのまんま記述出来ると、新鮮にかんじますね
麺類
醤油ラーメン六〇〇
味噌ラーメン六〇〇
塩ラーメン六〇〇
タンタンメン六〇〇
定食
日替わり定食平日のみ六〇〇
生姜焼き定食六〇〇
とんかつ定食六〇〇
ニラレバ定食六〇〇
HTML
<h3 class="d-tate menu-group">麺類</h3> <p class="d-tate osinagaki">醤油ラーメン<span class="price">六〇〇</span></p> <p class="d-tate osinagaki">味噌ラーメン<span class="price">六〇〇</span></p> <p class="d-tate osinagaki">塩ラーメン<span class="price">六〇〇</span></p> <p class="d-tate osinagaki">タンタンメン<span class="price">六〇〇</span></p> <h3 class="d-tate menu-group">定食</h3> <p class="d-tate osinagaki">日替わり定食<span class="price"><span class="week-date">平日のみ</span>六〇〇</span></p> <p class="d-tate osinagaki">生姜焼き定食<span class="price">六〇〇</span></p> <p class="d-tate osinagaki">とんかつ定食<span class="price">六〇〇</span></p> <p class="d-tate osinagaki">ニラレバ定食<span class="price">六〇〇</span></p> <!--[raindrops class="writing-mode-mix"]-->
CSS
投稿画面内の、この投稿のカスタムCSSに以下のスタイルを入力します。
.menu-group{
font-size:150%;
}
.osinagaki{
position:relative;
font-size:110%;
}
.price{
position:absolute;
bottom:0;
right:0.5em;
}
.week-date{
color:red;
padding-bottom:1em;
}
おまけスタイル 横書きの時には値段を半角数字で表示
.writing-mode-standard-article{
width:800px;
}
.writing-mode-standard-article .price{
visibility:hidden;
}
.writing-mode-standard-article .week-date, .writing-mode-standard-article .price:after{
content:'600円';
visibility:visible;
}