タグ・デザイン掲示板

[

名前変換小説の分岐ページについて
by z

2017-11-19 13:00
外部サイト様からテンプレートをお借りしてページを作成しようと思っているのですが、どうにもうまく表示されなくて困っています。
---------------------------------------
タイトル
名前変換ページ

long
タイトル１（説明）
タイトル２（説明）

short
タイトル１（説明）
タイトル２（説明）

…log
-------------------------------------
というようにしたいのですが、Shortのほうにうまくページリンクが反映させられません。
ナノでは#list#の独自タグを用いると思いますが、テンプレートの「<a href="">タイトル</a>」部分はどのように活用したらいいのでしょうか？
longのほうは下記BODY部分の「<h2>Long</h2>」の下に#list#を入れましたが、合っているでしょうか？加えて、飛んだ先のページのレイアウトの変更の仕方も分かりません。（全て左寄りにページのタイトルが表示されてしまう）

タグの知識は本当にぼんやり知っている程度です…。
分かりづらい説明で申し訳ありませんが、詳しい方いらっしゃいましたら助言お願い致します。

▼HEAD(HEAD・HTML詳細に記載)
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'><style type="text/css">body {
font-family:'Cabin',"メイリオ", sans-serif;
font-size:11px;
line-height:1.85;
letter-spacing:2.5px;
margin:0;
padding:0;
background-image: url("背景URL");
background-repeat: repeat-y;
background-position: center;
background-size:70px;
}

#wrp {
max-width:320px;
margin:0 auto;
padding:30px 20px 0 20px;
text-align:center;
opacity:0.9;
}

#txt {
max-width:400px;
font-size:13px;
margin:0 auto;
padding:10px 25px 0;
background:rgba(255,255,255,0.6);
}

#atg{
width:auto;
font-size:11px;
color:#888;
padding:10px 20px 0 20px;
margin:0 auto;
border-top:#ececec double 6px;
}

h1{
font-family:'Dancing Script',"メイリオ", sans-serif;
font-size:30px;
line-height:1;
display:inline;
margin:0;
}

h2{
font-family:'Dancing Script',"メイリオ", sans-serif;
font-size:17px;
line-height:1;
margin:5px 0;
display:inline;
}

h3{
font-size:17px;
margin:50px 0 0;
text-align:center;
}

.bold{
font-weight:bold;
margin-bottom:0;
}

a:link{
text-decoration:none;
}

a:hover{
color:#ececec;
}

figure{
display: table;
margin: 0 auto;
position: relative;
}

figcaption{
position: absolute;
top: 40px;
width: 100%;
}

input[type] {
font-family:'Cabin',"メイリオ", sans-serif;
height:auto;
background:#fff;
border:solid 1px #e0e0e0;
border-radius:0px;
color:#333;
box-shadow:none;
padding:3px 5px;
}

input[type=text] {
width:140px;
background:#fefefe;
margin-right:5px;
}

input[type=submit] {
width:auto;
}
</style>

▼BODY(表紙レイアウトに記載)
<div id="wrp"><figure><img src="画像URL" width="220px" /><figcaption><h1>Bookshelf</h1><p class="bold"><a href="変換ページURL">NAME CHANGE</a></p></figcaption></figure><h2>Long</h2>
<a href="">タイトル</a> (xxx)
<a href="">タイトル</a> (xxx)

<h2>Short</h2>
<a href="">タイトル</a> (xxx)
<a href="">タイトル</a> (xxx)
<a href="">タイトル</a> (xxx)
<a href="">タイトル</a> (xxx)
<a href="">タイトル</a> (xxx)<p class="bold"><a href="">... LOG</a></p></div>

pc
[編集]

by とくめー

2017-11-19 19:01
#list#タグはページを公開すると、自動でリンクされる独自タグです。
<h2>Long</h2>の下でいいです。
何ページか表示(公開)すると理解しやすいです。
サンプルページ→https://nanos.jp/sampler/novel/1/12/

<a href=""></a>はリンクタグです。とーっても基本的なタグです。
https://lyze.jp/tagmaker/?type=link_tag
ログインしてすぐのHTMLタグメーカーを見て下さい。とりあえず基礎知識になります。

あとGooglefontは正しくは
<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
font familyにスペースがあれば+を。あと空要素なので最後スラッシュ。(わからない言葉はGoogle検索して下さい。)

飛んだ先(リンク先)の件は、そちらのページのレイアウトを載せて下さい。

pc
[編集]

[