タグ・デザイン掲示板

[

テーブルの下にリンクを貼りたい
by とくめい

2016-08-17 12:27
過去のトピを見たり、自分で調べてみたりしたのですが、解決しなかったため質問させていただきます。

小説サイトを運営しているのですが、「設定」をテーブルの上に、テーブルには本編を入れています。
その本編のテーブルの下に「あとがき」を入れたいのですが、どのようにしたらよいでしょうか。

普通に改行タグを入れただけでは「設定」の横もしくは下になり、回り込み解除の <br clear="all"> を使用したのですが同じ結果になりました。

わかる方、よろしくお願いします。

pc
[編集]

by あ

2016-08-17 13:38
せめてレイアウトを見ないと何もわかりません
問題のページに関わるレイアウト全て提示してください
表紙画面の話だとしたらタイトル左右の情報も必要です

とりあえず「絶対にテーブルでないといけない」という理由がないのならば<div>の方が無難で楽だと思いますよ
テーブルはレイアウト用のタグではないですし

pc
[編集]

by 774774

2016-08-17 14:10
あさんも仰っているようにテーブルは
レイアウト崩れの原因になることが多くおすすめできません…。

とりあえず、
<div style="display:block;clear:both;">ここに後書き</div>　
を</table>のあとに記述するのはどうでしょうか。

※追記※
19:03のレス拝見しました。
#list#での一覧でタイトルの左右を使って装飾、ということでしたら上記は不適切です。
小説本文があるページのレイアウトと勘違い致しました。申し訳ございません。

pc
[編集]

by とくめい

2016-08-17 19:03
お早い回答ありがとうございます。

#sozai1751_w#<br><div class="all"><br><font face="メイリオ" size="3">[ <a href="#dream_url#">Name Change</a> ]</font><br><br><br><div class="list"><table>#list#</table></div><br /><br /><br /><font face="メイリオ" size="3">[ #page4_Main Top# ]</font></div>

表紙レイアウトはこのようになっております。
タイトルの左右は <tr></tr><td></td> タグを使って行や列を作っています。

また、テーブルでほとんどのレイアウトを仕上げてしまっているのですが、divタグを使う場合は、#list#を <ul><li></li></ul> で囲み(すみません、<ul></ul>のタグの意味が調べても理解できませんでした。これは必要な物でしょうか？)、タイトル左右に <div></div> を入れるだけでよいのでしょうか？

774774様がおっしゃったタグを左右に入れてみたのですが、結果は同じでした。

すみませんが、回答の方よろしくお願いします。

pc
[編集]

by あ

2016-08-17 20:26
もう一度言いますが、ページに関わるレイアウトすべてを提示してください
全体レイアウトやHEAD、共通上下や共通HEADは空欄なのですか？

タイトル左右もどっちに何をどのように入れていますか？各タイトルでバラバラなのでしょうか？

ぶっちゃけタイトル左右は一例だけを提示されても各入力欄への書き込みミスまで把握しきれないので、該当ページのソース表示(方法がわからない場合は『ソース表示/方法/ツール/HTML』あたりで組合せて要検索)をし、IDやタグに無関係の固有名詞のみ伏せ字にしてそのまま提示していただきたいです

pc
[編集]

by とくめい

2016-08-19 14:31
あ様、大変失礼しました。

全体レイアウト
<pc><br /><br /></pc><div id="layout"><nopc><nosoftbank></nosoftbank></nopc><imode><blockquote></imode>
<softbank><div style="margin:15px;"></softbank><br /><font face="メイリオ" size="3" color="#000000">#novel#</font><br /><softbank></div></softbank><imode></blockquote></imode><nopc><nosoftbank></nosoftbank></nopc></div><pc><br /><br /></pc>

HEAD内
<style type="text/css"></style>

タイトル左右については、五行ずつになるように、タグを入れています。

ソースは下記の通りです。

<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<link rel="shortcut icon" href="/favicon.ico" />

<style type="text/css"></style><title>タイトル | ナノ</title>
<style></style></head>
<body bgcolor="#000000" text="#ffffff" link="#ffffff" vlink="#000000" alink="#000000">
<div style="background-color: #dc143c; text-align:center;"><font color="#FFFFFF" >現在一時休止中です｡この画面は管理者にのみ表示されています｡</font></div>

<br /><br /><div id="layout"><br />
<br /><font face="メイリオ" size="3" color="#000000"><img src="http://img.mobilerz.net/sozai/1751_w.gif" border="0" /><br><font face="メイリオ" size="4"><br>タイトル</font><div class="all"><br><font face="メイリオ" size="3">[ <a href="/ID/novel/1/dream">Name Change</a> ]</font><br><br><br><div class="list"><table><a href="/ID/novel/1/?ParentDataID=3">設定</a><br><br />
<tr><td><a href="/ＩＤ/novel/1/?ParentDataID=2">Act.1</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=13">Act.2</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=20">Act.3</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=26">Act.4</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=33">Act.5</a></td></tr><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=113">Act.5.5</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=45">Act.6</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=50">Act.7</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=56">Act.8</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=118">Act.8.5</a></td></tr><br />
<tr><td><a href="/ＩＤ/novel/1/?ParentDataID=61">Act.9</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=66">Act.10</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=125">Act.10.5</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=71">Act.11</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=77">Act.12</a></td></tr><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=84">Act.13</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=88">Act.14</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=95">Act.15</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=96">Act.16</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=101">Act.17</a></td></tr><br />
<tr><td><a href="/ＩＤ/novel/1/?ParentDataID=132">Act.17.5</a></td><br />
<td><a href="/ＩＤ/novel/1/?ParentDataID=109">あとがき</a></td><br />
</table></div><br /><br /><br /><font face="メイリオ" size="3">[ <a href="/ＩＤ/page/4/">Main Top</a> ]</font></div></font><br /></div><br /><br />



<div align="center" ><div style="margin:10px 0"><a href="http://mblg.tv/">スマホで簡単ブログ作り！<br />豊富な機能が全部無料で使えるよ！</a></div></div>
<div align="center">
<a href="http://nanos.jp"><span style="color:#ffffff">- ナノ -</span></a></div>

</body>
</html>

あとがきは現在テーブルの中に入れています。

ID部分にはIDと入れています。
足りない部分や、間違っている個所などありましたら、ご指摘の方お願いします。

pc
[編集]

by 774

2016-08-19 20:55
諸々の提示お疲れ様です。

『設定』『あとがき』共にナノの自動リンクで表紙から繋げていますか？
だとしたら原因としてはテーブル内に入っているからと思われます。

<table>#list#</table>
の形にすると、ナノの機能で自動的にリンクされる本文ページはすべてテーブル間に入ってしまいます。
例：<table>
　　[左]<a href="/1/">01</a>[右]
　　[左]<a href="/2/">02</a>[右]
　　[左]<a href="/3/">03</a>[右]
　　[左]<a href="/ex/">あとがき</a>[右]
　　</table>

また、テーブル自体<table><tr><td>ここ</td></tr></table>で初めて表示させるための文字等を記述できるタグです。
提示されている中に以下のミスがありますのでどうにかしておいた方がいいと思います。
×<table>文字１<tr><td>文字２</td></tr></table>
×<table><tr><td>文字１</td><td>文字２</td></table>
タイトル左右を使うと全体像が掴みづらくミスが多発しがちです。何かおかしいな、と思ったらソース表示してみるなどして全体を見てみてください。

解決策としては、
・表紙レイアウトから</table>を削除、『あとがき』のタイトル左で </table>まで記述
・『あとがき』のタイトル左に 、表紙レイアウトの</table>下にあとがきへのリンクを直接記述
等がありますが、他にも色々とミスや問題があるレイアウトなのでサクッと最適化させていただきました。

・広告下げ回避
・#list#部分、全体の25%幅で5列は携帯端末で無理があるため修正
以外あまり見た目に変化はないようにしています。コメントアウトを参考に調節してみてください(下部余白はいじらない方がいいです)

【全体レイアウト】
<div id="layout">#novel#</div>

【表紙画面レイアウト】
#sozai1751_w#<p class="title">タイトル</p><p>[ <a href="/ID/novel/1/dream">Name Change</a> ]</p><ul class="list"><li class="none">#list#</li></ul>
<p>[ #page4_Main Top# ]</p>

【タイトル左】
『設定』　　：</li><li class="block set">
『あとがき』：</li><li class="block">
その他全部　：</li><li>

【タイトル右】
全部共通して空欄

【HEAD】
<style type="text/css">

body {/*=ベース=*/
text-align: center;
margin: 0;
padding: 0;
}

a {/*=リンク_総合=*/
text-decoration: none;
}

a:hover {/*=リンク_マウスオーバー時=*/
color: #ffffff;
position: relative;
top: 1px;
left: 1px;
}

p {
margin: 0;
}

#layout {/*=枠=*/
margin: 5px ;/*外側_余白*/
padding-top: 2em !important;/*内側_上余白*/
padding-bottom: 1em !important;/*内側_下余白*/
background-color: #ffffff;/*背景色*/
border: 1px solid #cccccc;/*枠線*/
font-family: 'メイリオ', 'Meiryo', sans-serif;/*フォント*/
color: #000000;/*文字色*/
}

#layout a {
color: #000000;/*枠内_リンク色*/
}

p.title {/*=全体のタイトル=*/
margin: 1em 0;/*余白(上下左右)*/
font-size: large;/*文字サイズ*/
}

ul.list {/*=リスト=*/
margin: 2em 0 1em;/*余白(上左右下)*/
padding: 0;
list-style: none;
}

ul.list li.none ,
ul.list br {
display: none;
}

ul.list li.set {/*=『設定』へのリンク=*/
margin: 3em 0 2em;/*余白(上左右下)*/
}

<nopc>
/* ==ガラケー向け== */

#layout{
padding: 25px;/*枠内_余白(左右)*/
}

</nopc><pc>
/* ==pc,sp向け== */

#layout{
margin-top: 2em;/*枠外_上余白*/
margin-bottom: 1em;/*枠外_下余白*/
}

@media only screen and (min-width: 332px) {
/*===
ブラウザ幅332px( 下記の最低幅 + 枠内外左右余白合計 + 枠線太さ左右分 )以上でリスト部分を5列に
===*/

ul.list {
width: 25%;/*pc向け幅*/
min-width: 300px;/*最低幅*/
margin-right: auto;
margin-left: auto;
text-align: left;
}

ul.list li {
display: inline-block;
width: 20%;/*5列で100%*/
text-align: center;
}

ul.list li.block {
display: block;
width: auto;
}

}
</pc>

</style>

pc
[編集]

by とくめい

2016-08-27 11:07
返信が遅くなり、大変申し訳ありません。

774様、本当にありがとうございます。
思っていたような形になりました。
ですが、1話からその下にある6話の間隔が少し狭いと思い、縦幅を広げようとしたのですが、どこに入れて良いのかわかりません。
それらしいところに入れてみたのですが、変わりませんでした。
高さを変えるにはどこにタグを入れればよいのでしょうか。
また、現在21話と半端な数なので気にはなりませんが、各タイトルとあとがきの間隔も近いのが気になりました。
こちらもどうすればよいのでしょうか。
それからすみません、全体レイアウトにはごちゃごちゃといろいろ入っていますが、774様の提示してくださった一行のみでよいのでしょうか。それとも #novel# のところのみ変えるのでしょうか。

沢山聞いてしまってすみません。
よろしければお願いします。

pc
[編集]

by 774

2016-08-27 12:45
全体レイアウトは一行で大丈夫です。

行ごとの余白については以下の指定箇所をそれぞれ置き換えてください。

▼①変更前
ul.list li.set {/*=『設定』へのリンク=*/
margin: 3em 0 2em;/*余白(上左右下)*/
}
▽①変更後
ul.list li.set {/*=『設定』へのリンク=*/
margin: 3em 0 2em !important;/*余白(上左右下)*/
}

▼②変更前
ul.list li {
display: inline-block;
width: 20%;/*5列で100%*/
text-align: center;
}
▽②変更後
ul.list li {
display: inline-block;
margin-top: ■■;/*行毎の余白*/
width: 20%;/*5列で100%*/
text-align: center;
}

ul.list li.ext {
margin-top: ■■;/*あとがき_上部余白*/
}

▼③変更前
『あとがき』タイトル左：
</li><li class="block">
▽③変更後
</li><li class="block ext">

pc
[編集]

by とくめい

2016-11-23 14:51
中々返信ができず本当に申し訳ありませんでした。

774様、大変助かりました。
無事、思っていた通りのレイアウトになりました。
本当にありがとうございました。

pc
[編集]

[