design
本サイトは、「フォレストページ+」の「マイテーマ編集」を使って、かなり細かくCSSをカスタムして使っております。
こちらのカスタムCSSについて、公開して欲しいといった要望があったためご紹介いたします。
ただし、かなり入り組んだCSSかつ行数も多いため、自己責任で“参考程度”に御覧ください。
注意！CSSのソースは公開しておりますが、背景画像、トップ画像はフリー素材ではございませんので、絶対に使わないようお願いします。
下記を念頭に置いた上でデザインの参考にしていただければと思います。
「サイト全体設定」→「マイテーマ編集」の「HEAD編集」を基本的には利用しています。
また、「マイテーマ編集」のベーステーマは「アメコミ（ブルー）」を利用しています。
他のテーマに適応してもある程度は同じ見た目になるかとは思いますが、全く同じものになるという保証はありません。
一部、「マイテーマ編集」→「マイページ」→「【上級者向け】レイアウト設定」のカスタムを入れています。
トップ画像及び、背景画像はご自身で作成し、ご用意下さい。当サイトの画像は持ち出し厳禁でございます。
スマホ用のメニューにつかっている「」画像については、コピー＆ペーストをしたときにうまく表示しない可能性がありますことをご了承下さい。
（font-family: FontAwesome;の設定あたりの、アイコン画像指定の「\」マークがうまく動作しないことがあるためです）
相当長く200行以上ありますのでご注意下さいませ。
また、バッドノウハウだらけで細かい解説は入れづらいので、調べて自己責任にてご利用下さい。
本カスタムCSSは、スマホ版のみメニューを立てに並べているため、それを実施したい場合は下記のように「マイページ」の「レイアウト設定」の[#linkarea#]部分を書き換えて下さい。
各リンク用独自タグは、その機能を使用していない場合は、独自タグがそのまま表示されてしまうので、適宜削除する等ご調整下さい。
CSSカスタムはハマると面白いですが、うまく表示できなかったり等もあるので、自己責任でお願い致します！
こちらのカスタムCSSについて、公開して欲しいといった要望があったためご紹介いたします。
ただし、かなり入り組んだCSSかつ行数も多いため、自己責任で“参考程度”に御覧ください。
注意！CSSのソースは公開しておりますが、背景画像、トップ画像はフリー素材ではございませんので、絶対に使わないようお願いします。
CSSカスタム前の準備
下記を念頭に置いた上でデザインの参考にしていただければと思います。
「サイト全体設定」→「マイテーマ編集」の「HEAD編集」を基本的には利用しています。
また、「マイテーマ編集」のベーステーマは「アメコミ（ブルー）」を利用しています。
他のテーマに適応してもある程度は同じ見た目になるかとは思いますが、全く同じものになるという保証はありません。
一部、「マイテーマ編集」→「マイページ」→「【上級者向け】レイアウト設定」のカスタムを入れています。
トップ画像及び、背景画像はご自身で作成し、ご用意下さい。当サイトの画像は持ち出し厳禁でございます。
スマホ用のメニューにつかっている「」画像については、コピー＆ペーストをしたときにうまく表示しない可能性がありますことをご了承下さい。
（font-family: FontAwesome;の設定あたりの、アイコン画像指定の「\」マークがうまく動作しないことがあるためです）
CSS
相当長く200行以上ありますのでご注意下さいませ。
また、バッドノウハウだらけで細かい解説は入れづらいので、調べて自己責任にてご利用下さい。
<style scoped="scoped">
body{
background-color:#FBF9EA;
background-image:url(★背景画像のURLに差し替えてください★);
background-position: right;
background-repeat: no-repeat;
color:#623228;
}
@media screen and (min-width: 920px){
body{background-size:cover;}
}
@media screen and (max-width: 480px){
body{background-size:500px 300px;}
}
h1,h2,h3,h4,h5 {
color:#623228;
font-weight:bold;
}
h2{
background-color:#74DADC;
}
h3{border-bottom:1px #74DADC solid;}
a {
color:#2DADB0;
}
a:hover {
color:#623228;
background: repeating-linear-gradient( -45deg, #FFF83D, #FFF83D 5px, #fff 5px, #fff 10px );
}
input , textarea , option ,select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background:#FFF83D;
color:#623228;
border:dashed 1px #FFF83D; !important
}
input:focus , textarea:focus , option:focus ,select:focus {
box-shadow: 0 0 7px #F7E8FF;
}
.search form input, .search form select, .main.cushion form input {
background:#FFF83D;
color:#623228;
border:dashed 1px #FFF83D; !important
}
button.btn,.btn,.btn2 {
display: inline-block;
text-decoration: none;
background: #74DADC;
color: #fff;
border:#fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow:0 2px 0 #fff;
-moz-box-shadow:0 2px 0 #fff;
-webkit-box-shadow:0 2px 0 #fff;
}
.button.btn:active,.btn2:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
box-shadow:0;
-moz-box-shadow:0;
-webkit-box-shadow:0;
}
.btn2.btn_like , .btn2.btn_like i , .btn2.btn_bookmark ,.btn2.btn_bookmark i {color:#fff;}
.btn2.btn_like: a:hover , .btn2.btn_like i: a:hover , .btn2.btn_bookmark: a:hover ,.btn2.btn_bookmark i: a:hover {color:#623228;}
.popup h2 {
color:#623228;
font-weight:bold;
-webkit-border-radius: 10px 10px 0 0 ;
-moz-border-radius: 10px 10px 0 0 ;
border-radius: 10px 10px 0 0 ;
}
.popup .popup_close {color:#fff;}
i{color:#74DADC;}
pre{
font-family: "Courier New",Courier,monospace;
font-size: 1em;
color: #207B7D;
background-color: #fafafa;
border: solid 1px #bbbbbb;
line-height: 90%;
margin: 1em 0 0 0;
padding: 0.99em;
overflow-x: auto;
overflow-y: auto;
max-height: 30em;
}
#header{
width:100%; !important
margin:0 auto; !important
}
.message_form{
background
}
.main{
margin:0 auto;
padding:0;
}
.work_list ul li {
line-height: 1.5; !important
padding: 0.5em 0; !important
list-style-type: none!important;
}
.work_list ul li:before {
font-family: FontAwesome; !important
content: "\f0da"; !important
position: absolute; !important
left : 1em; !important
color: gray; !important
}
.main .top_icons a {
border:0; !important
}
.main_links a {
border: solid 1px #74DADC;
display: block;
background: repeating-linear-gradient( -45deg, #FFF83D, #FFF83D 10px, #fff 0px, #fff 20px );
height: 30px;
line-height: 30px;
color: #623228;
text-decoration: none;
font-weight:bold;
}
.main_links a {
margin-right: 5px;
}
.main_links a {
margin-left: 5px;
}
.main_links a {
margin-top: 5px;
}
.main_links a:hover {
background: #74DADC;
color: #FFF;
}
.main_links_sp ul {
padding: 0;
position: relative;
}
.main_links_sp ul li a {
line-height: 1.5;
padding: 0.5em 0.5em 0.5em 1.7em;
list-style-type: none!important;
background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #FFF83D 0, #FFF83D 12px);
border-top:1px solid #74DADC;
border-bottom:1px solid #74DADC;
display: block;
margin:5px auto;
color:#623228;
font-weight:bold;
}
.main_links_sp ul li:before {
font-family: FontAwesome;
content: "\f054";
position: absolute;
left : 0.5em;
color: #74DADC;
padding: 0.5em 0.5em 0.5em 0.1em;
}
.main_links_sp ul li a:hover {
background: #74DADC;
color: #FFF;
}
.top_kiriban{
font-size:14px;
color:#623228;
position: relative;
margin:20px auto;
padding: 0.25em 1em;
border-top: solid 1px #74DADC;
border-bottom: solid 1px #74DADC;
}
.top_kiriban:before, .top_kiriban:after{
content: '';
position: absolute;
top: -7px;
width: 1px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: #74DADC;
}
.top_kiriban:before {left: 7px;}
.top_kiriban:after {right: 7px;}
.message_form {
background:#fff;
border: solid 1px #74DADC;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.novel_list ul li {
border-bottom:solid 1px #74DADC;
}
.main .prof_icons a {
color:#0021aa;
margin:0 auto;
padding:5px;
}
.main .prof_icons a:hover i {
color:rgba(0,33,170,0.6);
}
.toggle_more .show,
.toggle_more .hide {
color:#74DADC;
}
.update_list ul li {
border-bottom:solid 1px #74DADC;
}
.entry_list ul li {
color:#623228;
border:1px solid #74DADC;
}
.entry_list ul li .date {background:#74DADC;}
.entry_list ul li h4 a {color:#74DADC;}
.comment_content {
padding:10px 0 5px;
border-top:solid 1px #74DADC;
border-bottom:solid 1px #74DADC;
}
</style>マイページレイアウト設定
本カスタムCSSは、スマホ版のみメニューを立てに並べているため、それを実施したい場合は下記のように「マイページ」の「レイアウト設定」の[#linkarea#]部分を書き換えて下さい。
各リンク用独自タグは、その機能を使用していない場合は、独自タグがそのまま表示されてしまうので、適宜削除する等ご調整下さい。
<div class="main_links_sp"><ul><li>[#free=1#]</li><li>[#history#]</li><li>[#bookshelf#]</li><li>[#free=2#]</li><li>[#reply#]</li></ul></div>CSSカスタムはハマると面白いですが、うまく表示できなかったり等もあるので、自己責任でお願い致します！
