案内書庫連結

案内

曼珠沙華の憂鬱

展示

ここの欄はtab2に対応しております。
作品展示スペース等にいかがでしょうか？

作品展示例

└作品説明など。〇〇なお話です。
［登場人物｜設定］
画廊／書庫

コピー用Box

CSS(HEADに入力)

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

body {
   background-color: #999999;
   color: #030303;
   overflow-wrap: break-word;
   word-wrap: break-word;
   text-align: center;
   line-height: 1.5em;
   font-size: 15px;
   font-family:"Roboto Slab" , Garamond , "Times New Roman" , serif;
}

a {
   color: #000;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   -ms-transition: 0.5s;
   transition: 0.5s;
}
a:hover {
   color: #fff;
   text-shadow: -1px 1px 5px #000, 1px -1px 5px #000;
}

/* トップ画像位置 */
.top_img {
   position: relative;
   margin: 1em 0 auto;
   margin-left: auto;
   margin-right: auto;
}
/* サイト名 */
.site_title {
  position: absolute;
  font-weight: bold;
   writing-mode: tb-rl; /*IE*/
   -o-writing-mode: vertical-rl; /*Opera*/
   -webkit-writing-mode: vertical-rl; /*Chrome, Safari*/
   writing-mode: vertical-rl; /*Firefox, Edge*/
   color: #cc0000;
   font-family: "衡山毛筆フォント"
}

/* 横幅1279pxまでの画像の大きさ */
@media screen and (max-width:1279px) {
.top_img {
   width: 200px;
   height: 200px;
}
/* サイト名の文字の位置と大きさ */
.site_title {
  top: 0.5em;
  right: 1em;
  font-size: 3.2em;
}
}
/* 横1280px以上でトップ画像の大きさを変える */
@media screen and (min-width:1280px) {
.top_img {
   width: 320px;
   height: 320px;
}
/* サイト名の文字の位置と大きさ */
.site_title {
  top: 0.4em;
  right: 0.8em;
  font-size: 6em;
}
}

/* コンテンツ部分 */
.tab-content input[type="radio"] {
  display: none;
}
.tab-content .tab-box {
  width: 90%;
  max-width: 620px;
  min-height: 200px;
  border: 1px solid #AAA;
  margin: 0 auto;
}
.tab-content > .tab-box > div {
  display: none;
}

#tab1:checked ~ .tab-box > #tabView1 {
  display: block;
  padding: 5 10;
  text-align: left;
}
#tab2:checked ~ .tab-box > #tabView2 {
  display: block;
  padding: 5 10;
  text-align: left;
}
#tab3:checked ~ .tab-box > #tabView3 {
  display: block;
  padding: 5 10;
  text-align: left;
}

/* メニュー装飾 */
.tab-content label {
  display: inline-block;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 20px;
  color: #cc0000;
  writing-mode: tb-rl; /*IE*/
  -o-writing-mode: vertical-rl; /*Opera*/
  -webkit-writing-mode: vertical-rl; /*Chrome, Safari*/
  writing-mode: vertical-rl; /*Firefox, Edge*/
}
.tab-content label:hover,
.tab-content input[type="radio"]:checked + label {
   color: #fff;
   text-shadow: -1px 1px 5px #cc0000, 1px -1px 5px #cc0000;
}

/* 見出し */
h1 {
   margin-top: -20px;
   margin-left: -15px;
   margin-bottom: 5px;
   width: 2.5em;
   font-size: 2em;
   line-height: 1.2em;
   background-color: #333;
   color: #999;
   text-align: center;
}
h1:first-letter {
   color: #cc0000;
}

h2 {
   margin: 0;
   padding: 0;
}

h3 {
   margin: 0;
   padding: 0;
}

/* フォーム周りの設定 */
input[type="text"] ,
textarea {
   border: 1px solid #000;
   background: #999999;
   font-size: 15px;
   font-family:"Roboto Slab" , Garamond , "Times New Roman" , serif;
}
input[type="text"]:focus ,
textarea:focus {
  border: 1px solid #cc0000;
  outline: 0;
}
</style>

body

<div class="top_img"><img src="トップ画像画像URL"><span class="site_title">ここにサイト名。1～4文字くらいが丁度いいかもしれません</span></div>
<div class="tab-content">

<input type="radio" id="tab1" name="tab" checked >
<label for="tab1">案内</label>
<input type="radio" id="tab2" name="tab">
<label for="tab2">展示</label>
<input type="radio" id="tab3" name="tab">
<label for="tab3">連結</label>

<div class="tab-box">

<div id="tabView1">
<h1>案内</h1>
<h2>説明</h2>
スマホ／PC1カラム、1ページ完結型のトップページです。<br>
ここは〇〇サイトです。等。<br>
<br>
ここの欄はtab1に対応しております。<br>
<br>
今回はサイト名を直接編集画面に入力出来るようにし、わざわざ画像を編集・文字入れしなくても良いようにしました。<br>
<br>
自動改行なしで作成しております。<br>
スマホ(iPhone5/iOS10.3.1/Safari)にて作成、動作確認済み。<br>
素人が趣味で作ったものですので記述間違い等ある可能性を了承した上でご使用ください。<br>
表示確認はScreenfly(<a href="http://quirktools.com/screenfly/">http://quirktools.com/screenfly/</a>)にて行っております。一部ブラウザでは想定通りの表示が出来ていない可能性もあります。<br>
トップ画像は自作です。<br>
同一の素材は当サイト「<a href="https://alicex.jp/Abend/">宵 - Abend -</a>」の素材ページ→円窓素材→<a href="https://alicex.jp/Abend/album/2/2/">夕闇</a>より保存の上、各自アップロードしてお使いください。<br>
同サイズ(500px × 500px)の画像であれば画像は差し替えても問題ございません。<br>
<b>直リンクはレンタルサーバー様に負荷がかかり他サイト様にも迷惑になる可能性がございますので絶対にやらないようお使い致します。</b><br>
<br>
ソースのコピペは「展示」タブにて。
</div>

<div id="tabView2">
<h1>展示</h1>
ここの欄はtab2に対応しております。<br>
作品展示スペース等にいかがでしょうか？<br>
<br>
<h2>作品展示例</h2>
└作品説明など。〇〇なお話です。<br>
［<a href="url">登場人物</a>｜<a href="url">設定</a>］<br>
<a href="url">画廊</a>／<a href="url">書庫</a>
</div>

<div id="tabView3">
<h1>連結</h1>
ここの欄はtab3に対応しております。<br>
コンテンツ3の内容が表示されます。<br>
リンクページなどに如何でしょうか？
</div>
</div>
</div>

連結

ここの欄はtab3に対応しております。
コンテンツ3の内容が表示されます。
リンクページなどに如何でしょうか？