タグ・デザイン掲示板

[

長編小説の数字揃え
by 蒼和

2017-09-22 22:56
検索をかけても解決しなかったため、投稿させて頂きます。
重複していたら申し訳ありません。

私は今、100話を超える長編小説を書いています。

章タイトル
01 02 03
章タイトル
04 05 06

のように数字にリンクを繋げているのですが100話、つまり桁が3桁になったために統一だったリンク幅がずれるようになってしまいました。
桁が異なってもリンク幅が同じにするためにはどうすれば良いでしょうか？
わかりにくい説明で申し訳ありませんが助言を頂けると幸いです。

pc
[編集]

by 774

2017-09-23 02:01
私ならですが、暫定的(あとで時間あるときにタイトル左右使って再調整します)で一番楽な方法として

▽タイトル左右
　01の左：<div class="before100">
　99の右：</div>

▽HEAD
　.before100 a{ ここ } に
　　・margin-left
　　・margin-right
　　・padding-left
　　・padding-right
　のいずれかでいい感じに調整、

　もしくは
　.before100 a:before { content:'0';}

という方法でやります。
他にタイトル左右入れている場合は、ソース表示等しながら整合性取れるよう調整してください。

上手くいかない場合は、
　・上記込でのレイアウトを全て
　・タイトル左右の入力例
　・ソース表示(方法要検索)したもの
を、
　・ID：***
　・伏せたい固有名詞：○○○
にそれぞれ置き換えて提示してください。

pc
[編集]

by 蒼和

2017-09-23 17:15
ありがとうございます。
頂いた助言通りに試したのですが、上手くいかなかったので書かせて頂きます。

あとすみません。
前回情報不足だったのですが、私は#list#タグを使わず一つ一つURLを表紙に打ち込む形にしています。
#list#だと章がリンク表示されてしまうため……。

《全体レイアウト》
<pc_only><table align="center" width="50%"><tr></pc_only><mobile><table align="center" width="95%"><tr></mobile><font size="2"><mobile><br /></mobile><mobile></td><tr><td align="left"></mobile><pc_only></tr><tr><td align="left"></pc_only><font size="2"><div style="text-align:center" align="center"><div style="text-align:left" align="left">#novel#
</div></div></font><mobile></td></tr></table></mobile><pc_only></td></tr></table></pc_only>

《表紙レイアウト》
章タイトル
<div class="before100"><a href="">01</a> <a href="">02</a> <a href="">03</a>……

章タイトル
<a href="">98</a> <a href="">99</a></div>

章タイトル
<a href="">100</a>

《HEAD》
<style type="text/css"></style>

勉強不足なものでわからないことが多いのですが、ご指摘頂けたらと思います。
よろしくお願いします。

pc
[編集]

by 774

2017-09-23 20:34
margin-leftに値入れましょうよ。(方法要検索)

とりあえずレイアウトしっちゃかめっちゃかなので、上記の値指定含めサクッと最適化しておきました。

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

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

body {
text-align: center;
}

a {
text-decoration:none;
}
a:hover {
color: #666;
position: relative;
top: 1px;
left: 1px;}

#layout {
width: 95%;
margin: 26px auto 0;
text-align: left;
font-size: 13px;
line-height: 18px;
}

.before100 a {
margin-left: 8px;
}

<pc_only>

#layout {
width: 50%;
}

</pc_only>

</style>

▽指摘
・テーブルはレイアウトに使わないほうがいいです。
・テーブルを使うとしたら、テーブル関係以外のタグを使えるのは<td></td>間のみです。
・テーブル自体の記述も怪しいので正しい形を調べた後、見返してみてください。
・開始タグ、閉じタグが入れ子で数はあっているかしっかり確認しましょう
・文字寄せで中央の後すぐ左寄せ、文字サイズ同一で再指定等、不要な指定が多いです。
・HTML採点サイトの使用をおすすめします。ナノサイトは仕様上、満点は取れなくなっているのと冗長部分は指摘してくれませんが、ある程度のミスは削れると思います。

それから、もしタグが苦手/頻繁に弄るようでしたらホムペ設定ページで「改行をbrに変換：しない」にしておくことをおすすめします。
ブログ記事内や小説本文内はまた個別に設定できますし、表示する際改行させたいところ以外でレイアウトで改行できないより、わかりやすくなるとおもいますよ。

----------
↓追記

お疲れ様です。
慣れるまで色々大変ですが、できることが増えるとその分楽しさも増えますよ。
話数三桁書いてるって時点で長らくやっている方とは思いますが、今後も頑張ってください。

pc
[編集]

by 蒼和

2017-09-24 21:15
774さん、ありがとうございました！
何とか調整して納得いく形にすることができました。
ご指摘の部分も書き換え、サイト全体を見回して直しました。
本当にありがとうございます…！

取り敢えずあれですね。
タグやら弄る前にもっと勉強してきます……。

pc
[編集]

[