素材 / demo

用法

• マイページのみのテンプレート
• ナビゲーションメニュー非表示推奨 表示すると崩れるかも
• 「シンプル」テーマベース
• このページ下部にhtml・スタイルシートを置いています。htmlはマイページの自由入力欄に、スタイルシートはマイテーマのHEAD内に入れてね
• カウンター好きなところに入れられるけど、CSS追加して調整しないとPCで変なところに入っちゃうかも

demo

推奨ブラウザ外からdemoページを見ているなどで
demoページが正しく表示されない人向けに、表示イメージのキャプチャを置いています

表示イメージ / mobile

表示イメージ / PC

htmlソース

マイページの自由入力に下記を入れる

<div class="prescription"><div class="pseudowrapper"><div id="header"><h1 class="site_title">内服薬</h1></div><div class="main"><h2><h2><span>用法</span></h2>
<p>※このサイトは以下の成分を含んでいます※</p>
<hr>
<ul class="genre_list"><li>夢小説</li><li class="checked">BL</li><li>GL</li><li>二次創作</li></ul>
<ul class="link_list"><li><a href="★リンクURL">はじめに</a><a href="★リンクURL">紹介状</a></li><li><a href="★リンクURL">処方箋</a><a href="★リンクURL">成分</a></li></ul>
<div class="top_icons"><a href="★DMのリンクURL"><i class="fa fa-envelope" aria-hidden="true"></i></a><a href="★スキのリンクURL"><i class="fa fa-heart" aria-hidden="true"></i></a></div>
<hr class="btm">
<p>※用法・容量を守って正しくお使いください※
ここにサイトの説明を入れられます</p></div></div><div class="heartbeat"><i class="fa fa-heartbeat" aria-hidden="true"></i></div></div>

スタイルシート

HEAD内スタイルシート

• マイテーマのHEAD内に入れることを一応想定しています
• ですが、マイページの自由入力欄の最初の方に入れても大丈夫っぽいです
• 自由入力欄に入れる場合は、前述の「htmlソース」一行目<div class="prescription">の前に下記のstyle～/styleをそのまま入れてください
• /styleのあとに改行入れちゃうとページの最上部に変な改行はいっちゃうから気を付けて

<style>
#header {
min-height: 0;
}
.prescription {
background: #ff5050;
color: #ff5050;
text-align: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.prescription a {
color: #ff5050;
}
.prescription a:hover,
.prescription .main .top_icons a:hover i {
color:#ff9580;
}
h1,
h2,
.top_kiriban {
display: none;
}
.main {
width: auto;
padding: 0;
margin: 0;
}
.main .top_text {
margin: 0;
}
.pseudowrapper {
background: #fff;
padding: 10px 8px 30px;
}
.heartbeat {
position: relative;
background: #ff5050;
color: #fff;
min-height: 500px;
}
.heartbeat i {
position: absolute;
right: 50%;
top: 50%;
font-size: 300px;
color: #fff;
margin-top: -150px;
margin-right: -150px;
}
.prescription #header h1.site_title {
display: block;
color: #ff0505;
font-size: 200%;
letter-spacing: 0.6em;
margin: 20px 0;
}
.prescription #header h1.site_title,
.prescription #header h1.site_title a {
height: auto;
}
@media only screen and (min-width: 1000px) {
.prescription {
flex-direction: row;
}
.pseudowrapper {
flex: 1 1 0;
}
.heartbeat {
flex: 1 1 0;
}
.prescription #header h1.site_title {
margin-bottom: 35px;
}
}
.pseudowrapper .main {
position: relative;
border: 1px solid #ff0505;
margin: 0 auto;
max-width: 440px;
padding: 15px;
box-shadow: 8px 8px 0 rgba(255, 80, 80, 1);
}
.prescription .main h2 {
display: block;
position: absolute;
top: -17px;
margin: 0;
width: 90%;
text-align: center;
}
.prescription .main h2 span {
display: inline-block;
background: #fff;
padding: 5px 15px;
margin: 0 auto;
}
.prescription .main p {
margin: 20px 0 10px;
}
.prescription .main hr {
border-color: #ff0505;
}
.prescription .main ul.genre_list {
display: flex;
flex-wrap: wrap;
}
.prescription .main ul.genre_list li {
margin: 5px auto;
padding: 0 5px;
}
.prescription .main ul.genre_list li:before {
content: "\f096";
font-family: FontAwesome;
display: inline-block;
margin-right: 5px;
font-size: 18px;
}
.prescription .main ul.genre_list li.checked:before {
content: "\f046";
}
.prescription .main ul.link_list li {
width: 48%;
vertical-align: top;
margin: 0 auto;
}
.prescription .main ul.link_list {
padding: 10px 0;
}
.prescription .main ul.link_list li:first-child {
border-right: 1px solid #ff0505;
float: left;
}
.prescription .main ul.link_list li:last-child {
float: right;
}
.prescription .main ul.link_list li:after {
clear: both;
}
.prescription .main ul.link_list li a {
padding: 10px 15px;
min-width: 100px;
display: block;
}
@media only screen and (max-width: 530px) {
.pseudowrapper {
padding: 10px 16px 30px 8px;
}
.prescription .main {
box-shadow: 6px 6px 0 rgba(255, 80, 80, 1);
padding: 15px 8px;
}
.prescription .main p {
font-size: 85%;
}
}
</style>