このサイトは１ヶ月 (30日) 以上ログインされていません。 サイト管理者の方はこちらからログインすると、この広告を消すことができます。

水平線の亡霊_demo



phantom

水平線の亡霊

phantom of the horizon


  • ページを囲うような枠と、枠に沿ってサイトタイトルとメニューリンクを表示できるテンプレートです
  • ソースさえ入れればどのページでも使える想定です
  • ナビゲーションメニュー非表示推奨 表示すると崩れるかも
  • テーマもある程度好きなテーマで使えると思います（白背景は見えなくなるかも）
    ※背景画像が何枚も重なっているテーマや、背景が2色に分かれているようなテーマは崩れるかもしれない
  • グーグルフォントを使って変わったフォントのテーマを作りたかった
  • このページ下部にhtml・スタイルシートを置いています。どちらもマイページ（など使いたいページ）の自由入力欄に入れてね

推奨ブラウザ外からdemoページを見ているなどで
demoページが正しく表示されない人向けに、表示イメージのキャプチャを置いています
表示イメージ / mobile
image
表示イメージ / PC
image
スタイルシート ※マイページの自由入力の先頭に入れてね

<style>
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Nunito+Sans:200');
</style>

<style>
.main {
padding: 0 15px;
}
.ad_bottom{ z-index: 10; }/* 消さないでください */
.footer{ z-index: 10; }/* 消さないでください */
.title_wrap {
position: fixed;
top: 16px;
left: 0;
right: 0;
z-index: 10;
}
.title_wrap h1 {
position: relative;
font-size: 30px;
color: #fff;
height: 30px;
width: 100%;
letter-spacing: 0.1em;
}
.title_wrap h1 span {
position: absolute;
top: -15px;
left: 25px;
line-height: 1em;
font-family: 'Dancing Script', cursive;
}
.link_list {
position: fixed;
top: 15px;
right: 3px;
line-height: 1em;
transform: rotate(-90deg);
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
z-index: 10;
}
.link_list ul li {
display:inline-block;
margin: 0 10px;
}
.link_list ul li a {
display: inline-block;
padding: 5px 10px;
color: #fff;
}

/* style */
.wrapper:before {
content:"";
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:95%;
height: 87%;
height: calc(100vh - 120px);
margin: 15px auto;
border: 1px solid #fff;
box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
.wrapper:before {
width:98%;
}
.title_wrap h1 {
font-size: 35px;
height: 35px;
}
.title_wrap h1 span {
top: -18px;
left: 45px;
}
.link_list {
top: 10px;
right: 20px;
}
.link_list ul li a {
padding: 10px;
}
}
</style>


枠、メニューリンクのソース ※マイページの自由入力で、上記スタイルシートの直後に入れてね

<div class="title_wrap"><h1><span>★サイトタイトル（英字のみ）</span></h1></div><div class="link_list"><ul><li><a href="★リンクURL">intro</a></li><li><a href="★リンクURL">novel</a></li><li><a href="★リンクURL">index</a></li></ul></div>


メイン画像下部のサイトタイトルのソース ※マイページの自由入力の好きな場所に入れてね

<h2>★サイトタイトル</h2><p style="font-family: 'Dancing Script', cursive;">★サイトタイトル（英字のみ）</p>


Copyright © Visualworks. All Rights Reserved.
読者になる